-
在平时设置时 {height:36px;line-height:36px;}其实height:36px这个属性是多余的查看全部
-
在ie6/ie7下对元素使用height的效果查看全部
-
line-height的实际应用 A、实现单行文字垂直居中 B、大小不固定的图片、多行文字垂直居中 1、图片水平垂直居中(ie8+才能支持) .box{line-height:300px;text-align:center;} .box>img{vertical-align:middle;} 2、多行文本水平垂直居中（ie8+才能支持） .box{line-height:250px;text-align:center;} .box>.text{display:inline-block;line-height;nomal;text-align:left;vertical-align:middle;} 多行文字水平垂直居中实现的原理跟图片的实现原理是一样的，区别在于要把多行文本所在的容器display水平转换成和图片一样的，也就是inline-block（img就是inline-block），以及重置外部继承的text-align和line-height属性值。 实际应用： line-height用来代替height，避免ie6/ie7下的haslayout，因为在ie6/ie7下给元素设置了height高度，该元素就有了layout布局（haslayout），会导致其冲破父元素自适应（display：inline-block;/*或float:left*/）的布局,如果对元素使用行高line-height则该元素不会有layout查看全部
-
小图片和大文字查看全部
-
在图文混排的情况下inline元素在默认情况的vertical-align是baseline（基线对其）的，容器的高度取决于inline元素与文字基线对其之后文字行高-基线位置的高度+inline元素的高度。 把图片放在一个块容器中图片呈现的位置理解为块容器隐藏了一个文本节点，即有一个看不见的文本（chrome默认的文字基线对其之后文字行高-基线位置的高度=3px） 如何消除图片底部的间隙？ 1.图片块状化——无基线对齐 img{display:block;}（只有inline元素才有vertical-align属性，把inline元素设置为块状元素就不会存在基线对齐） 2.图片底线对齐 img{vertical-align:bottom;} 3.行高足够小——基线位置上移 .box{line-height:0;}查看全部
-
行高不会影响图片实际占据的高度！查看全部
-
body全局数值行高使用经验 如果你的网友偏向于关注阅读的版面类似博客，则行高至少要1.5-1.6； 而其他的版面形式则使用匹配20像素的使用经验（比18,19之类的更方便计算），如字体大小为14px，则，line-height=20px/14px=1.42857（14...），如果直接使用1.42857，其他浏览器的行高刚好是20px，但在chrome浏览器中行高只有19px，因此一般都设置成1.4286，即 body{font-size:14px;line-height:1.4286;}或者直接简写成body{font:14px/1.4286 'Microsoft Yahei'}查看全部
-
推荐使用line-height:<number>如1.5的形式设置行高 line-height默认是baseline对其的，可以使用vertical-align:middle使其文字图片居中对齐。 ine-height:1.5, line-height:150%, line-height:1.5em的区别； 计算无差别，应用元素有差别： line-height:1.5 所有可继承元素根据各自的font-size重新计算行高（各行框区域高度不一样根据文字大小仔细调节）； line-height：150%/1.5em 当前元素根据font-size计算行高，继承给下面的元素（各行框区域高度一样，不会根据文字大小进行调节，可能会发生重叠）。查看全部
-
line-height:normal;默认属性值，1）与用户浏览器，且与元素字体有关。 line-height:<number>:根据当前元素的font-size大小计算：如设置成1.5，1.5*字体大小。 line-height:<length>;line-height:1.5em,20px;使用具体的长度作为行高值。 line-height:percent;使用百分比作为行高值，相对于该line-height属性的元素的font-size大小计算。 line-height:inherit;行高继承，比如一些控件，如input框，其行高是normal，我们需要重置，使用inherit可以让文本样式可控性更强。 line-height:1.5, line-height:150%, line-height:1.5em的区别； 计算无差别，应用元素有差别： line-height:1.5 所有可继承元素根据各自的font-size重新计算行高（各行框区域高度不一样）； line-height：150%/1.5em 当前元素根据font-size计算行高，继承给下面的元素（各行框区域高度一样）。查看全部
-
line-height支持的属性值查看全部
-
行高决定内联盒子高度；行间距墙头草，可大可小（甚至是负值），保证高度正好等于行高查看全部
-
仅只有在宋体（simsun）字体下行间距才使用以下的计算公式 因为只有simsun字体下字体大小才等于内容区域高度查看全部
-
simsun字体下的情况查看全部
-
内容区域的高度关系查看全部
-
关于行高需要知道的 ... 内容区域高度+行间距=行高查看全部
举报
0/150
提交
取消