慕课张鑫旭，笔记之line-height的定义

1、line-height的定义

指的是行高，两行文字基线之间的距离

2、基线的定义：

英语里面一行文字的第三条线，baseline 如右图所示

3、两行，演示例子，指的是两行基线之间的距离

4、行高为零，两行重叠

5、为何line-height可以让单行文本垂直居中？

当字体的大小为零的时候，才会垂直居中，否则的话，只会字体越大越往下垂

6、line-height与行内框盒子模型

行内框盒子模型：

 

8、    1、line-height：normal  

           默认属性值，跟着用户的浏览器走，且与元素的字体关联（除以一百）

          2、内容区域，内联盒子（只有文字，表示匿名内联盒子），行框盒子，包含盒子（由行框盒子）

          3、line-height 的高度机理，内联的高度是由行高决定的

          4、line-height明明是两基线距离，单行文字哪来行高，还控制了高度？

                 1、行高由于继承性，影响无处不在，即使单行文本也不例外、

                 2、行高只是幕后，高度的表现不是行高，而是内容区域和行间距

          5、内容区域的高度只与字号（size）以及字体（family）有关，与line-height没有任何的关系

                 在simsun字体下，内容区域高度等于文字大小值

          6、行间距等于行高减去内容区域

          7、行间距上下拆分，就有了“半行间距”

          8、行高的各类属性值：line-height; normal  (跟着浏览器走 微软雅黑为1.32)

           9、line-height 等于1.5 和150%/1.5em  的区别

              一个是可继承元素根据fontsize 重计算行高

                line-height150%/1.5em则是计算行高，继给下面的元素

           10、line-height与图片的表现

1、行高不会影响图片的高度

2、后面的文字高度变化，导致了行高的变化，改变字体的大小和内联块状化可以看出

因为基线对齐，但是还是有高度

3、隐匿文本节点起的作用，如何消除图片底部的间隙？

      1、图片块状话----无基线对齐    display:block;

      2、图片底线对齐   vertical-align: bottom;

      3、行高足够小-----导致基线的（baseline）位置上移。  (设置容器的line-height：0；)

 4、小图片大文字：

      1、基本上高度受行高控制（一般，ie6）

      2、剩余的交给 vertical-align 垂直对齐了

5、line-height的实际应用

      1、大小不固定的图片、多行文字垂直居中，如下图，  （存在兼容性问题ie7）

     2、多行文本水平垂直居中

    3、代替height，避免ie6/7 下对的haslayout

 line-height:36px;    不会冲出限制，永远为内联