**
3.2 css篇
内联盒子（inline-box） 组成：内容区＋上半间距＋下半间距
line-height:设置行高，行间距：（行高-字体大小）/2；
line-height一般用在块元素上，当line-height用在块状元素上面的时候表示的是每行的最小行框高度 既然是最小的行框高度那么就有可能比最小值要大。 line-height的值也可以是数值，将数字作为行高的值，为数值时是根据font-size`来进行计算，计算的是当前的font-size的多少倍。
_块状元素不设置元素高度的时候，改变line-height的值将会成撑高盒子，并且其中的内容会垂直居中。
当设置了块状元素的高度的情况下，line-height的改变只会讲文字在垂直方向上改变位置不会改变盒子的高度
单行文本如果要居中让行高等于元素的高度。
内联盒子中的内容区的构造(@@@)
**baseline（基线）基线是小写英文字母x的下边缘，是为了排列整齐用的，如果是图片基线是图片的底部。 x-height，表示该字体中x的高度。
给行内元素和行内块状元素使用的。
baseline，默认值，默认的时候就是基线对齐。bottom，将内联盒子的底边与行框的底边对齐。top，将内联盒子的顶边与行框的顶边对齐。middle，元素的垂直中心点和父元素的x-height的1/2处对齐。-
垂直居中出现的问题（@@@）
- 块状元素只包含一张图片时会有不知名的空白。
原因：1. 在HTML5当中，内联元素的所有解析和渲染，如同每个行框盒子的前面有一个空白节点，这个节点透明，并且不占据任何宽度，而且也无法用脚本获取。但是只有在HTML5中并且使用<!DOCTYPE html>声明的时候才会有。
2. 根据上面所说的这个空白节点（幽灵节点）实际上就是在图片前面有看不见的内容。既然是有内容，那么默认时采用的是vertical-align:baseline对齐，图片是行内块状元素它的基线是图片的底部。所以才会导致图片下面有一段空白。
- 解决方法:
- 图片块状化，让图片没有基线。
img{
display:block;
} - 将图片改为底部对齐。
img{
vertical-align: bottom;
}
3.将line-height设置为0px。上下半行间距就显示不出来了，因为是由于幽灵节点的下半行间距阻挡但是现在下半行间距没有了。所以说图片也会下来。
div{
border:1px solid green;
line-height:0px;
}
一个inline-block元素，如果里面没有内联元素，则该元素的基线是其底部边缘。但是其中如果有内容基线就变成了元素里面的最后一行的内联元素的基线。 - 当使用
vertical-algin:middle时只是近似垂直居中。
为什么是近似垂直居中： - 图片本身有一条中线就是垂直中心线。
vertical-align:middle中的图片的中线永远和x-height的1/2处对齐。- 由于字体设计的时候字体不会正好占据内容区域的1/2，一般来说都会有些下沉。
- 所以字体设置的越大，内容区域就会越大，字体的中线就会比内容区越靠下。
- 解决办法：给父元素的font-size设置为0，父元素font-size设置为0之后，内容区域高度就为0，内容区中的所有乱七八糟的线就都在一条线上面了。
当行高和设置高度相同时，那么文字会水平居中
行框：就是由很多个内联盒子组成，形成的大盒子行框
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
