-
line-height的实际应用：
1、大小不固定的图片、多行文字垂直居中
1）图片水平垂直居中
2）多行文本水平垂直居中
2、代替height，避免IE6\7下的haslayout
查看全部 -
line-height与图片的表现：
1、行高会不会影响图片实际占据的高度：不会
行高引起容器高度的改变，实际上是与文字行高变化共同改变的
2、消除图片底部间隙的方法:
1）图片块状化-无基线对齐
img{ display：block；}
2）图片底线对齐
img{ vertical-align: bottom；}
3）行高足够小-基线位置上移
img{ line-height：0；}
查看全部 -
行高的各类属性值：
1、行高支持的属性值：
normal/<number>/<length>/<percent>/inherit
1）normal：由浏览器，以及元素字体决定
2）<number>：根据当前元素的字体大小计算
如line-height:1.5;
font-size：20px；
那么line-height=1.5*20=30px；
3）<length>：使用的具体的长度值作为行高值，line-height：1.5em，1.5rem，20px，20pt；
4）<percent>：使用百分比值作为行高值
如line-height：150%；
font-size：20px；
那么line-height=150%*20=30px
5）inherit：继承
2、line-height：1.5 / 1.5em /150%; 的差别：
1）1.5：所有可继承元素根据font-size重计算行高
2）150%/1.5em：当前元素根据font-size计算行高，继承给下面的元素
3、body全局数值行高使用，匹配20像素
body{
font-size:14px;
line-height:20px / 1.4286;
}
查看全部 -
1、line-height的定义：两行文字基线之间的距离
2、内联元素的高度其实是由行高决定的
3、行高是两基线距离，单行文字为何有行高
行高有基继承性
高度的表现不是行高，而是内容区域和行间距
内容区域高度+行间距=行高
4、内容区域高度只与字号及字体有关，与line-height无关
若字体为宋体，内容区域高度等于文字大小值，font-size+行间距=line-height
查看全部 -
行高不会影响图片实际占据的高度；
消除图片底部间隙的方法：
图片块状化-无基线对齐 img{display:block;}
图片底线对齐 img{vertical-align:bottom;}
行高足够小-基线位置上移
查看全部 -
内联元素的高度由行高决定，高度的表现不是行高，而是内容区域和行间距；（行高=内容区域+行间距）
内容区域高度只与字号以及字体有关，与line-height没有关系（宋体下内容区域等于字体大小）
查看全部 -
记住Chrome浏览器数值行高为1.4286才为20px查看全部
-
line-height：的值为数字、百分比和长度时的区别查看全部
-
数值 百分比 和长度作为值的区别查看全部
-
此例子仅通过数值大小来证明normal值与字体大小有关，且不同浏览器默认值不同查看全部
-
基线是定义字线的根本
查看全部 -
实现多行垂直居中可以将多行文本使用一个元素包裹，设置为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：行高足够小，基线位置上移。
查看全部 -
因为不同浏览器和不同字体的行高不同，所以重置line-height。
line-height:1.42857在火狐和opera浏览器可以表现为20px，但是谷歌却是19px，所以向上取值line-height:1.4286，表现都为20px。
查看全部
举报