什么是 Block 元素？
在HTML中，div、p、h1-h6、ul、li 等默认为块级（block）元素。它们会独占一行，并可设置宽高、内外边距等属性。
常见 Block 搭配模式
合理组合 block 元素是构建页面骨架的基础。以下是几种经典搭配：
<div class="container">
<header>网站头部</header>
<main>
<section>主要内容区</section>
</main>
<footer>页脚信息</footer>
</div>
<header>网站头部</header>
<main>
<section>主要内容区</section>
</main>
<footer>页脚信息</footer>
</div>
布局建议
- 使用语义化标签（如
<header>,<section>）提升可读性与SEO - 避免过度嵌套，保持DOM结构扁平
- 结合 Flexbox 或 Grid 实现现代响应式布局
虽然 block 元素天然垂直堆叠，但通过 CSS 可灵活控制其行为，实现复杂而优雅的页面结构。