前言
HTML标签种类繁多,常见的标签有<div>
、<p>
、<li>
以及<img>
、<span>
等。
CSS为了流体布局的需要通常这些标签分为两大类:块级元素和内联元素(内联级元素)。
因为CSS诞生之初就是为了解决网页图文布局的,所以为了布局的需要将标签分了两类,块级元素负责结构,内联元素负责内容。
块级元素
块级元素(block-level element)‘用于负责结构’,它垂直显示,宽度自动撑满,可以设置宽高。常见块级元素有div 、h1 ~ h6 、p、ol、ul、li等。
这里需要特别说明一下:
display: block的元素是块级元素,但不代表块级元素就是display: block;
例如:<li>
标签 display 的默认值是 list-item,<table>
标签display 的默认值是 table。但它们都是块级元素。
清除浮动
由于块级元素具有换行特性,因此可以结合 clear 属性来清除浮动。
.clear:after {
content: '';
display: table; // 也可以是 block,最好不要是 list-item
clear: both;
}
为什么最好不要是 list-item ?
因为display: list-item; 主要是因为它兼容性不好 IE 浏览器不支持,
并且额外会出现的项目符号,还得再加一行 list-style: none;
内联元素
内联元素(inline-level elements)‘用于负责内容’,它并排显示,宽度自动收缩,不能设置宽高。常见内联元素有a、span、b、u、label 、em等。
这里也需要特别说明一下:
内联元素也一样,display 为 inline 的元素是内联元素,但不代表块级元素就是display: inline;
display 为inline-block 和 inline-table 都是内联元素。
例如:<button>按钮,其 display 默认值是 inline-block;是内联元素。
结语
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!