-
基线～baseline 与字母x底部平齐的线查看全部
-
line-height实际应用:除了单行文本的垂直居中，还有实现大小不固定的图片、多行文字的垂直居中，还有代替height以避免ie6/ie7下得hashlayout。<br> 大小不固定的图片的垂直居中:.box{text-align:center; line-height:300px;} .box img{vertical-align:middle;}<br> 多行文本的垂直居中:.box{text-align:center; line-height:300px;} .box .text{display:inline-block; line-height:normal; text-align:left; vertical-align:middle;}查看全部
-
line-height:默认值（normal），用户的浏览器和字体相关 line-height:<number>,跟字体大小相关 line-height:1.5 所有可继承元素根据fontsize重新计算行高； line-height:150%;根据line-height元素的fontsize计算，并且直接继承给下面的子元素； 所以：：：：全局设置使用<number>类型 推荐：body{fontsize:14px,lineheight:1.5}或者匹配20px查看全部
-
以上增加，还要干掉子容器(包裹文本的最里容器)的行高继承,line-height:normal;查看全部
-
多行文本的垂直居中方法： 1、将多行文本包裹在一个inline-block盒子里，并增加vertical-align：middle样式； 2、对父容器添加text-align:center; 记住：vertical-align:middle;只能做到近似居中，因为对齐的线为基线向上1/2 * X处，X对于不同字体的取值不同；查看全部
-
消除图片底部间隙的方法; 1、图片块状化，原因：因为vertical-align等只适用于内联inline,inline-block元素，块状化(img{display:block})后便不受其影响； 2、图片底线对齐：img{vertical-align:bottom;} 3、父盒子行高足够小.box{line-height:0}; 以上第二，第三种的原因是因为盒子容器中隐匿文本节点的存在，导致图文基线对齐所致；查看全部
-
line-height:1.5 与 line-height:150% / 1.5em差异： 1、line-height:1.5 后代元素继承行高时是以自身字体大小计算得出；（更加智能） 2、line-height:150% / 1.5em 当前元素根据自身字体大小计算得出固定的行高值，再由后代元素继承固定行高值；查看全部
-
内容区域高+行间距=行高查看全部
-
行内盒子模型，如图查看全部
-
1.匿名盒子 2.行内盒子 3.行盒子（一行，可以有n个匿名盒子+n个行内盒子组成）查看全部
-
.box{line-height:250px;text-align:center;} .box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;} 多行文本水平垂直居中： .box{line-height:250px;text-align:center;} .box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;}查看全部
-
消除图片底部间隙的方法 1、图片块状化-无基线对齐（display：block） 2、图片底线对齐(vertical-align:bottom) 3、行高足够小（line-height:0）查看全部
-
内容区域+行间距=行高查看全部
-
内联元素的高度是由line-height决定的查看全部
-
line-height值为数字和百分比的区别查看全部
举报
0/150
提交
取消