HTML标签种类繁多,通常分为两类,块级元素(block-level element)和内联元素(inline-level element)。
2.1 块级元素
块级元素,如<div>、<p>、<li>、<table>等,特点是在一个水平流上只能单独显示一个元素,多个块级元素自动换行显示。
块级元素和display属性为block的元素不是一个概念,如<li>的display值是list-item,<table>的display值是table,但是他们都是块级元素,具有块级元素的特点。
根据块级元素的换行特性,清除浮动影响的其中一个方案就是:
.clear:after{ content:""; display: table; // block、list-item 也可以 clear:both; }
2.2 盒子概念
最初,只有两类盒子,块级盒子(block-level box)和内联盒子(inline-level box),分工明确,块级盒子负责结构,内联盒子负责内容。
但现实世界是复杂的,很多时候想要一行展示多个块级元素,于是inline-block就来了,为此css重新解释了盒子概念。
一个元素的盒子模型是这样的,从内外结构上来看,每个元素都具有一个外在盒子和一个容器盒子(内在盒子),外在盒子负责元素是一行显示,还是换行显示,容器盒子负责宽高、内容呈现等。
外在盒子、容器盒子是个逻辑概念,具体来看,外在盒子可以是块级盒子和内联盒子,内在盒子也可以是块级容器盒子和内联容器盒子。
所以,display理论上会有几种组合,block-block、block-inline、inline-block、inline-inline,其实不然,block-inline并不存在,因为内外盒子是为了解决问题提出的设计思想,而种种组合是根据设计思想拼凑的可能性,实际中并不存在这样的需求,并且还有一些inline-table、inline-flex等。
其实容器盒子才是重中之重,外在盒子只是负责是否换行。
可以这样理解,元素的容器盒子很丰富,如block、inline、table、item等,可能将来还有更多,但从元素自身上,由于块级元素和内联元素的默认分类,使得他们的外在盒子特性具有了默认值,如果默认值是块级换行特性,就限制了布局的灵活性,所以才出现了inline-xx的属性值,如果元素本身是内联特性,想改变默认特性比较容易,因此不存在此需求就没有block-inline属性值。