CSS块级元素详解

发布时间：2023-05-20

一、块级元素概述

块级元素是HTML中的一种元素，其特点是默认展现为独占一行的元素，其宽度默认为父元素的100%，高度由内容撑开。块级元素与内联元素相对应，它们的主要区别在于排版方面。块级元素可以包含其他块级元素和内联元素。 块级元素通常用于HTML页面中的主要结构，比如header、footer、sidebar、nav、section、article、div等。

二、块级元素的特性

  1. 默认展现为独占一行 块级元素在排版时会默认展现为独占一行，即元素前后有一个明显的换行，且元素之间不会有内容，是一个完整的独立块。可以通过设置CSS属性display:inline来改变其展现方式。
div {
    display: inline;
}
  1. 默认宽度为父元素宽度的100% 块级元素默认宽度为父元素的宽度，可以通过CSS的width属性进行设置。在浏览器的默认样式中，父元素通常是body，因此块级元素的默认宽度是body的宽度。
div {
    width: 200px;
}
  1. 高度由内容撑开 块级元素的高度由内容撑开，其高度并不受设置的CSS属性height的影响。如果元素内没有内容，则高度为0。可以通过设置CSS属性height来改变其高度。
div {
    height: 100px;
}

三、块级元素的应用

  1. 结构化布局 块级元素在HTML页面中通常用于结构化布局，比如header、footer、sidebar、nav、section、article、div等。使用块级元素可以将一个页面分割为多个逻辑区域，使网页结构明显，易于维护。
<header>
    <h1>这是头部</h1>
</header>
<nav>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
</nav>
<section>
    <article>
        <h2>标题</h2>
        <p>内容</p>
    </article>
    <article>
        <h2>标题</h2>
        <p>内容</p>
    </article>
</section>
<aside>
    <h3>侧边栏</h3>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</aside>
<footer>
    <p>版权信息</p>
</footer>
  1. 文本标签 块级元素还可以用于显示文本块，比如段落、标题等。在HTML页面中，p、h1~h6等标签都是块级元素，可以使用这些标签来实现文本的排版。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是一段文字</p>
  1. 元素容器 块级元素也可以用作元素的容器，是一些内联元素的父容器。此时，块级元素的主要作用是设置内联元素的样式，比如文字颜色、字体大小、背景颜色等。
<div class="container">
    <p>这是一段文字</p>
    <a href="#">这是一个链接</a>
</div>

四、块级元素注意事项

  1. 块级元素默认不支持text-align:center，可以通过设置CSS属性display:inline-block来改变其展现方式，从而支持text-align:center。
div {
    display: inline-block;
    text-align: center;
}
  1. 块级元素默认垂直方向上有一定的间距，可以通过设置CSS属性line-height:0来减小其间距。
div {
    line-height: 0;
}
  1. 块级元素可以通过设置CSS属性display:none来隐藏元素。
div {
    display: none;
}

五、块级元素总结

块级元素在HTML页面中通常用于结构化布局、文本的排版、元素的容器等，其特点是默认展现为独占一行的元素，其宽度默认为父元素的100%，高度由内容撑开。

推荐文章