-
1，行高，基线，主要说明基线的问题是行高的标志 2.解释了行内框盒子模型效果， 内容区域，内联盒子，行内盒子，包含盒子。 3，line-height 高度机理 ，，行高==内容区域+行间距；内容区域=字号+字体（字体为宋体）； 4，line-height的各种属性，normal，默认属性和浏览器和字体有关系，number，根据font-size有关系，length，直接固定具体长度大小（px，pt，em。。。），percent，百分比，inherit继承关系（这个章节主要说明了一下百分比和数值的关系，还不是很清楚，需要在看其他资料自己了解）； 5，body全局数值行高的经验，body｛font-seiz：14px；line-height：1.4286｝是根据20字号下的宋体进行得出来的结论，再次用到了数值和百分比的关系。 6，解决图片下面有空白的bug三种解决方法，图片块状话，图片底线对其，行高为零， 7，line-height的实际应用，图片居中，多行居中，line-height和height的关系。查看全部
-
字体高度由行高决定而不是字体大小，但高度的表现不是行高，而是内容区域和行间距……查看全部
-
内联元素的高度由line-height决定查看全部
-
张大神每次都带来让人耳目一新的内容，对CSS的深入了解起到了很大的作用，期待更多的课程！查看全部
-
哈哈，大牛一本正经的样子查看全部
-
实现多行垂直居中可以将多行文本使用一个元素包裹，设置为display:inline-block转换成图片一样的display属性，然后使用vertical-align:middle。
查看全部 -
给图片设置 vertical-align: middle不兼容IE8以下的浏览器。
实现多行垂直居中可以将多行文本使用一个元素包裹，设置为display:inline-block模拟成图片，然后使用vertical-align:middle。
IE6里如果给元素设置height后，会导致元素的行内元素或行内块状元素块状化，导致流体布局或者自适应布局错乱，需要注意，可以使用line-height代替
查看全部 -
行内元素都会基于基线对齐，
<p><img src='xxx.png'></p>
如上p里没有文字，但是存在隐匿文本节点内容，所以图片距离p底部有一点的距离，这个距离相当于文字基线距离底部距离（半个行间距，行高=内容高度+行间距）。
解决方法：
图片块状化：图片块状化可以让其不按照基线对齐显示。
vertical-align: bottom；让图片按底部对齐。
line-height:0：行高足够小，基线位置上移。
查看全部 -
图片默认baseline 对齐
查看全部 -
line-height:1.5;所有可继承元素根据font-size重新计算行高；
line-height:150%/1.5em 当前元素根据font-size计算行高，继承给下面的元素；
查看全部 -
包含盒子包含行框盒子包含内联盒子包含内容盒子
查看全部 -
在全局定义样式时，限定了字体大小，他的行高用20去除，然后小数点取第4位，并向上四舍五入，因为不同浏览器的行高时不同的！
如下面截图所示。
查看全部 -
line-height:默认值（normal），用户的浏览器和字体相关 line-height:<number>,跟字体大小相关 line-height:1.5 所有可继承元素根据fontsize重新计算行高； line-height:150%;根据line-height元素的fontsize计算，并且直接继承给下面的子元素； 所以：：：：全局设置使用<number>类型
查看全部 -
基线与行高查看全部
-
行高不会影响图片实际占据的高度。为了实现基线对齐（内联元素，内联块状元素才有），是后面的文字的line-height的影响。隐匿文本节点。好像有一个文本节点在里面。 如何消除底部间隙，1.图片块状化（块状元素没有基线了）。没有基线对齐。2.vertical-align:bottom；底线对齐。3.行高足够小，line-height:0; 小图片和大文字查看全部
举报