CSS世界(张鑫旭)系列学习总结 （二） 流、元素与基本尺寸

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属性值。

 2.3 内联盒模型

是否理解此模型，是css开发人员和熟练css开发人员之间的分水岭。

1.内联盒模型包含很多术语和概念，或者说包含很多种盒子，比块级元素盒模型复杂的多。

1.1 内容区域

　  内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子；但对于图片等替换元素，不存在字符，可以看成元素自身。

　如：

<p>这是一段普通的文字，这里有个<em>em</em>标签。</p> 

    p标签内，紧紧挨着内容的范围就是内容区域，和文本选中时的区域差不多。

    内容区域可以等同于基本盒模型中的content box，我们同样可以给内联元素设置padding、border、margin 基本盒模型的属性，只是有些不生效而已。

1.2内联盒子

　 内联元素的外在盒子就是内联盒子，如上面代码中，文本元素和em元素的外在盒子都是内联盒子，决定了他们可以在一行显示。

1.3行框盒子

　在 p 元素内，每一行都存在一个行框盒子， 每个行框盒子又是由一个个内联盒子组成的。

1.4包含盒子

   p 元素所包含的所有区域就是包含盒子，由一个个行框盒子组成，也称为包含块。

 

也就是说，当我书写了一个p元素，在元素内写下一个字符后，字符本身产生了内容区域，字符属于内联元素，也携带了内联盒子，字符所在的这一行也产生了一个行框盒子，而包含行框盒子的p元素则形成了一个包含块。

随着字符越来越多，内容区域越来越大，随着更多内联元素的加入，开始换行，又产生了一个行框盒子，最终行越来越多，包含块也越来越大。

2.幽灵空白节点

这是内联盒模型中非常重要的一个概念，官方文档说：内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。

这个空白节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，就像幽灵一样，但确确实实存在。

今天我就遇到了，发现一个元素在某些情况下高度莫名其妙的增加了4px，不明所以，突然想到是不是幽灵节点的问题，因为那个元素正好没有内容时高度才会变化，最后果然通过设置fontsize为0 将问题解决。

举个栗子：

div{
background-color:#cd0000;
}

span{
display:inline-block;
}

<div><span></span> </div>

通过浏览器查看元素，此 div 高度并不是 0，这就证明了幽灵空白节点确确实实存在，诚不我欺。