-
图片水平垂直居中查看全部
-
行高不会影响图片实际占据的高度。 隐匿文本节点 消除图片底部间隙的方法： 1.图片块状化-无基线对齐 img{ display:block; } 2.图片底线对齐 img{ vertical-align:bottom; } 3.行高足够小-基线上移 .box{ line-height:0; }查看全部
-
body全局数值行高使用经验 body{font-size:14px;line-height:?} 匹配20的使用经验——方便心算。 line-height=20px/14px=1.42857 除chrome浏览器的其他浏览器都可以，但是chrome会变成19px。所以 body{font-size:14px;line-height:1.4286;} body{font:14px/1.4286 'microsoft yahei';}查看全部
-
1.5与150%/1.5em的差别 1.5：所有可继承元素重计算； 150%/1.5em：当前元素计算，继承给下面的元素。查看全部
-
line-height支持属性值： ·normal（默认） 跟着用户浏览器走，且与元素字体关联 ·<number> 如1.5 ·<length> 如1.5em,1.5rem,20px,20pt ·<percent> 如150% ·inherit（继承）（IE8+） input框等元素默认行高是normal，使用inherit可以让文本框样式可控性更强。查看全部
-
内联元素的高度是由line-height决定的 问：line-height明明是两基线距离，单行文字哪来行高，还控制了高度？ 答：1.行高由于其继承性，影响无处不在，即使单行文本也不例外； 2.行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。 只不过，正好：内容区域高度（content area）+行间距（vertical spacing）=行 高（line-height） 内容区域高度： 1.内容区域高度只与字号（font-size）以及字体（font-family）有关，与line-height 没有关系。 2.在simsun字体下，内容区域高度等于文字大小值（font-size）。 总结： 行高决定内联盒子高度；行间距墙头草，可大可小（甚至负值），保证高度正好 等同于行高。 问：如果行框盒子（line boxes）里面有多个不同行高的内联盒子？ 答：（似是而非）看截图（文本占据的高度） 含多个行框盒子的包含容器： 多行文本的高度就是单行文本高度累加。查看全部
-
文本占据的高度查看全部
-
行内框盒子模型查看全部
-
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查看全部
-
行高不会影响图片实际占据的高度。 消除图片底部间隙 1.图片块状化--无基线对齐 img{display:block;} 2.图片底线对齐 img{vertical-align:bottom;} 默认是vertical-align: baseline 3.行高足够小--基线位置上移 box{line-height:0;} 特例：小图片和大文字，基本高度就受行高控制 在图文混排的情况下inline元素在默认情况的vertical-align是baseline（基线对其）的，容器的高度取决于inline元素与文字基线对其之后文字行高-基线位置的高度+inline元素的高度。 把图片放在一个块容器中图片呈现的位置理解为块容器隐藏了一个文本节点，即有一个看不见的文本（chrome默认的文字基线对其之后文字行高-基线位置的高度=3px） 消除图片底部间隙的方法; 1、图片块状化，原因：因为vertical-align等只适用于内联inline,inline-block元素，块状化(img{display:block})后便不受其影响； 2、图片底线对齐：img{vertical-align:bottom;} 3、父盒子行高足够小.box{line-height:0}; 以上第二，第三种的原因是因为盒子容器中隐匿文本节点的存在，导致图文基线对齐所致；查看全部
-
line-heigth: normal; 默认，不同浏览器有所差异，不同字体也有所差异。 line-heigth: <number> 根据当前元素的字体大小计算，line-height = 1.5 * 20px = 30px。 line-height: <length> **em;**rem;**px;**pt。 line-heigth: <percent> 相对于设置该属性元素的字体大小计算，line-height = 150% * 20px = 30px。 line-height: <inherit> 行高继承，ie8+。 应用元素有差别： line-height：1.5 所有可继承元素根据字体大小重新计算。 line-height：150% / 1.5em 当前元素根据字体大小计算，继承给后代元素。 body全局行高数值 一般博客、文章等中阅读应用line-height:1.5左右 其余地方匹配20px line-height: 20px / 14px = 1.42857 = 1.4286 font-size: 14px / 1.4286查看全部
-
1.内联元素的高度是由行高决定的 2.行高由于其继承性，影响无处不在，即使单行文本也不例外 3.行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距 内容区域高度（content area）+行间距（vertical spacing）=行高（line-height） 4.内容区域高度只与字号以及字体有关，与line-height没有任何关系 5.在simsun字体下，内容区域高度等于文字大小值,既 font-size+行间距=line-height 6.行间距上下拆分，就有了“半行间距” 总结：行高决定内联盒子高度，行间距墙头草，可大可小（甚至负值），保证高度正好等于行高 如果行框盒子里面有多个不同行高的内连盒子的行高怎样表现？ 大部分情况下，是由行高最高的那个盒子决定的。 但比如在属性中含有vertical-align有值时就一样。 多行文本的高度就是多行文本高度的累加查看全部
-
四种盒子模型： 1.“内容区域”（content area） 2.“内联盒子”（inline boxes） 3.“行框盒子”（line boxes） 4.“包含盒子”（containing box） 4>3>2（包含关系） 2和1之间关系说不清。 行内框盒子模型： 内容区域，一个围绕文字看不到的盒子，相当于鼠标选中时候的区域，与font-size有关。 内联盒子，不会让内容成块显示，而是排成一行inline，如果是光秃秃的文字，则属于匿名内联盒子。如span 行框盒子，每一行都是一个行框盒子，由内联盒子组成——如果换行就相当于是两个行框盒子。 包含盒子，由一行一行的行框盒子组成，如p查看全部
-
内容区域高度只与字号以及字体有关，与line-height 无关; 在simsun宋体情况下，内容区域高度等于文字大小值。查看全部
-
行间距注意查看全部
举报
0/150
提交
取消