一、块级元素概述
块级元素是HTML中的一种元素，其特点是默认展现为独占一行的元素，其宽度默认为父元素的100%，高度由内容撑开。块级元素与内联元素相对应，它们的主要区别在于排版方面。块级元素可以包含其他块级元素和内联元素。
块级元素通常用于HTML页面中的主要结构，比如header、footer、sidebar、nav、section、article、div等。
二、块级元素的特性
1、默认展现为独占一行
块级元素在排版时会默认展现为独占一行，即元素前后有一个明显的换行，且元素之间不会有内容，是一个完整的独立块。可以通过设置CSS属性display:inline来改变其展现方式。
div {
display: inline;
}
2、默认宽度为父元素宽度的100%
块级元素默认宽度为父元素的宽度，可以通过CSS的width属性进行设置。在浏览器的默认样式中，父元素通常是body，因此块级元素的默认宽度是body的宽度。
div {
width: 200px;
}
3、高度由内容撑开
块级元素的高度由内容撑开，其高度并不受设置的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>
2、文本标签
块级元素还可以用于显示文本块，比如段落、标题等。在HTML页面中，p、h1~h6等标签都是块级元素，可以使用这些标签来实现文本的排版。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是一段文字</p>
3、元素容器
块级元素也可以用作元素的容器，是一些内联元素的父容器。此时，块级元素的主要作用是设置内联元素的样式，比如文字颜色、字体大小、背景颜色等。
<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;
}
2、块级元素默认垂直方向上有一定的间距，可以通过设置CSS属性line-height:0来减小其间距。
div {
line-height: 0;
}
3、块级元素可以通过设置CSS属性display:none来隐藏元素。
div {
display: none;
}
五、块级元素总结
块级元素在HTML页面中通常用于结构化布局、文本的排版、元素的容器等，其特点是默认展现为独占一行的元素，其宽度默认为父元素的100%，高度由内容撑开。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236771.html
微信扫一扫 
支付宝扫一扫 