line-height相关

• line-height指两行之间基线（baseline）的距离（其实一行也有效）
• 行内宽盒子模型（从小到大，包含关系）

Paste_Image.png

• 内敛元素的高度是由line-height决定的，不是由font-size决定的。
• 行高由于其继承性，影响无处不在，即使单行文本也不例外；高度的表现不是行高，而是内容区域和行间距，内容区域高度+行间距=行高。
• 内容区域高度只与字号和字体有关，在simsun字体下就是字号。
• 行间距是上下拆分的。用于保证高度正好等于行高。
• 多行文本的高度就是单行文本高度的累加
• line-height值的类型：normal（默认值），数值，百分比，rem/em，inherit（继承）
• 1.5、150%、1.5em计算上没有区别，但1.5所有可继承元素根据font-size重计算行高；而150%、1.5em根据当前font-size计算行高，继承给下面的元素；
• reset.css中建议使用1.5这种写法统一行高。
• 行高不会影响图片实际占据的高度，而是影响图片所在行文字的高度，即使没有文字

Paste_Image.png

Paste_Image.png

• 如何消除图片底部间隙：
  1、图片块状化{display:block}
  2、图片底线对齐{vertical-align:bottom；}
  3、行高足够小：{line-height:0;}
• 单图片水平居中
  .box{line-height:300px;text-align:center;}
  .box>img{vertical-align:middle;}
• 多行文本图片水平居中，实现方式与当行相同，区别是要把多行文本所在容器的display水平转换成和图片一样（inline-block），以及重置外部继承的text-align和line-height属性值
  .box{line-height:250px;text-align:center}
  .box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;max-widht:100%}
  .box>img{vertical-align:middle}