在CSS的视觉格式化模型中，block元素是最基础的元素类型之一，它决定了页面中大部分容器和内容的默认排列方式，理解它的特点对做好页面布局至关重要。
block元素的核心特点
1. 独占一行显示
block元素在默认情况下会占据父容器的整个宽度，即使自身内容宽度很小，也会强制换行，后面的元素只能排列在它的下方。这是block元素最直观的特点。
<!DOCTYPE html>
<html>
<head>
<style>
.block-demo {
background-color: #f0f0f0;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="block-demo">第一个block元素</div>
<div class="block-demo">第二个block元素</div>
<span>行内元素内容</span>
</body>
</html>
上述代码中两个div>都是默认的block元素，会各自占满一行，行内元素span>会排在第二个div的下方。
2. 可设置宽高和内边距外边距
block元素支持设置width>、height>、padding>、margin>等盒模型相关属性，并且这些属性都会生效。如果未设置宽度，block元素的宽度默认是父容器内容区的100%。
/* block元素样式示例 */
.block-box {
display: block;
width: 200px;
height: 100px;
padding: 20px;
margin: 15px auto;
background-color: #e8f4ff;
}
3. 默认包含子元素时高度自适应
如果block元素没有设置固定高度，它的高度会由内部子元素的内容高度、内边距、边框共同决定，会自动包裹住所有子元素。
<div class="parent-block">
<p>子元素段落1</p>
<p>子元素段落2</p>
</div>
.parent-block {
background-color: #fff3e0;
/* 未设置height，高度由内部两个p元素决定 */
padding: 10px;
}
4. 可以包含其他block元素和行内元素
block元素作为容器时，内部可以嵌套其他block元素，也可以嵌套行内元素、行内块元素等，嵌套后子元素的布局依然遵循对应的元素类型规则。
常见block元素列举
HTML中很多默认的元素都是block类型，常见的包括：
div>、p>、h1>-<h6>等容器和文本类元素ul>、ol>、li>等列表相关元素header>、footer>、section>等语义化布局元素form>、table>等表单和表格相关元素
block与inline元素的区别
可以通过下表快速区分block元素和行内inline元素的核心差异：
| 对比项 | block元素 | inline元素 |
|---|---|---|
| 排列方式 | 独占一行 | 和其他行内元素在同一行排列 |
| 宽高设置 | 支持设置width和height | 设置width和height不生效 |
| 外边距设置 | 上下左右margin都生效 | 只有左右margin生效，上下margin不生效 |
| 默认宽度 | 父容器内容区宽度的100% | 由自身内容宽度决定 |
如何修改元素为block类型
如果需要将其他类型的元素改为block元素，只需要设置display>属性为block>即可，修改后的元素会具备所有block元素的特点。
/* 将span行内元素改为block元素 */
span {
display: block;
width: 150px;
height: 50px;
background-color: #f5f5f5;
}
需要注意的是，修改display>属性为block>后，元素原本的行内特性会全部失效，完全按照block元素的规则渲染。