CSS中的元素可以分为三种:行内元素，块级元素，行内块元素。
行内元素
特点:行内元素默认宽度是由内容撑开的，不能设置宽高，只能容纳文本或者其它行内元素，可以和其他元素在一行拼接显示。
常用行内元素:a、span、i、em、strong、img
/*宽高演示*/
<style>
span {
margin-top: 10px;
border: solid 1px black;
width: 1000px;
height: 1000px;
}
</style>
<body>
<span>你好世界</span>
</body>
为span元素设置了宽和高各位1000px,但是实际的效果却不是我们所想的，span的大小并没有发生变化。
<style>
span {
margin-top: 10px;
border: solid 1px black;
width: 1000px;
height: 1000px;
}
</style>
<body>
<span>你好世界</span>
<span>你好世界</span>
</body>
两个span元素可以在同一行显示。
块级元素
特点:块级元素默认的宽是容器的100%，可以设置宽和高，可以容纳其它块级元素或行内元素，并且独占一行。
常用行内元素:div、h1~h6、p、ul、ol、li、table、form
<style>
div {
border: solid 1px black;
}
</style>
<body>
<div>你好世界</div>
</body>
如果没有明确的设置块级元素的宽和高，那么默认的高会被内容撑开，而默认的块会与父容器等宽，比如上述示例的div元素。
<style>
div {
border: solid 1px black;
width: 100px;
margin: 10px;
}
</style>
<body>
<div>你好世界</div>
<div>你好世界</div>
</body>
上述示例中，两个div元素各自独占一行。
行内块元素
特点:行内块元素默认的大小取决于它包容的内容的大小，可以设置宽和高，可以容纳其它元素，不会独占一行。
常用行内块元素:input、button、label、select
<style>
.first {
width: 100px;
height: 100px;
}
</style>
<body>
<button class="first">按钮一</button>
<button>按钮二</button>
</body>
元素类型转换
使用display属性可以转换元素的类型。
转换为块级元素
<style>
span {
display: block; /*将行内元素转为块级元素*/
}
</style>
<body>
<span>你好世界</span>
<span>你好世界</span>
</body>
类型转换后两个span元素从并排变成了各自独占一行(变成了块级元素)。
转换为行内元素
<style>
div {
display: inline; /*转换为行内元素*/
}
</style>
<body>
<div>你好世界</div>
<div>你好世界</div>
</body>
类型转换后两个div元素从独占一行变成了并排显示(变成了行内元素)。
转换为行内块元素
<style>
div {
display: inline-block; /*转换为行内块元素*/
}
</style>
<body>
<div>你好世界</div>
<div>你好世界</div>
</body>
类型转换后两个div元素从独占一行变成了并排显示(变成了行内块素)。
替换元素和非替换元素
我们在写CSS的时候会用到img元素，会给img元素设置高和宽，并且设置的高和宽会生效，但是img元素属于行内元素，按理说行内元素是不能够设置宽和高的(除非转换为块级元素或者是行内块元素)。
为了解释这个现象不得不介绍另外两个概念置换元素和非置换元素(元素的另一种分类方式)。
在介绍置换元素和非置换元素之前先来介绍一下非常重要的概念:CSS的视觉格式化模型。
**CSS的视觉格式化模型**：CSS的视觉格式化模型是一个抽象的概念，它描述了CSS如何将文档中的元素呈现为视觉效果，该模型定义了元素的尺寸、位置、边框、内边距、背景、定位、浮动等样式属性在页面上的表现形式。
其中我们所了解的盒子模型就是CSS的视觉格式化模型内容之一。
现在我们来了解一下置换元素和非置换元素:
置换元素：置换元素是指其内容不受CSS控制，它们的内容通常是由浏览器根据元素的属性和上下文确定的。例如，img、input、textarea等元素，它们的内容并不是在CSS的盒模型中呈现的，而是由浏览器根据元素的属性和上下文进行渲染的。在某些情况下，置换元素的尺寸和位置可以受到CSS的控制，例如通过设置宽度和高度属性来控制img元素的大小。
非置换元素：非置换元素则是指其内容受CSS控制，它们的内容会在CSS的盒模型中呈现。例如，div、p、span等元素，它们的内容会受到CSS的尺寸、位置、边框等属性的控制，呈现为一个矩形盒子。
这里之所以说img元素的内容不受CSS控制是因为img元素的内容是受到img元素的src属性控制的而不是CSS。
正因为img是置换元素，所以img虽然是行内元素却又表现的脱离CSS的视觉格式化模型的控制(但是img元素又有一部分行内元素的特性，所以并没有完全脱离CSS的视觉格式化模型的控制)。
评论