Block结构详解

在HTML和CSS中，block结构是网页布局的基础之一。理解block元素的行为对构建清晰、可维护的页面至关重要。

什么是Block元素？

Block级元素（如 <div>、<p>、<h1>-<h6>、<ul> 等）默认会独占一行，并在其前后自动换行。它们可以设置宽度、高度、内外边距等样式属性。

Block 与 Inline 的区别

与 inline 元素（如 <span>、<a>）不同，block 元素：

• 默认从新行开始
• 宽度默认为父容器的100%
• 可设置宽高、上下外边距

CSS 中控制 Block 行为

通过 display 属性，可以改变元素的显示类型：

div { display: block; }        /* 默认 */
span { display: inline-block; } /* 混合特性 */
section { display: inline; }    /* 变为内联 */