什么是 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 可灵活控制其行为,实现复杂而优雅的页面结构。