CSS-IFC：字体度量、line-height、vertica

IFC：inline formatting content

基本知识点：深入理解CSS：字体度量、line-height、vertical-align

理解font-size:规定em-square

  font-size: 100px;/*和字体大小没有直接关系,不同字体font-size后的表现样式不一样。字体大小是由设计师决定的。font-size指的不是看的见的任何高度，指的是看不见的一个字体的框框*/

理解line-height：决定内联元素的真实占位。

• 行和：每一行的高度是由每一个span的真实占地面积决定，和可视化占地面积无关。
• 每一行的行和是所有的字以基线对齐得到的高度确定的。
• 字体不同，基线也不同。
• 父元素写一个line-height，会使其子内联元素自动居中。
• 父元素设置line-height，但是其高度不一定是line-heiht的取值。

两个字体不同的span会使其父容器变高

• 当内部两个inline元素的字体不同时，基线不同，又因为以基线对齐，所以会使其父容器的高度变高。

span {
  font-size: 100px;
  border: 1px solid red;
  line-height: 100px;
}
span:nth-child(2) {
  font-family: SimSun-ExtB;    
}
p {
  border: 1px solid black;
  margin:20px 0; 
}
  <p>
    <span>你B</span>
    <span>你B</span>
    <span>你B</span>
  </p>

当不写line-height时，line-height是多少。

line-heigt默认值：normal，是字体设计师决定的，不同字体的line-height是不同的。最少：字体的0.618；最大：字体的3.378倍，一般是1.5；即line-height:1.5；

vertical-align：

• vertical-align: top / bottom，表示与 line-box 的顶部或底部对齐，基本没用

• vertical-align: text-top / text-bottom，表示与 content-area 的顶部或底部对齐

  
  v2-c4550a3a0387a2dd7fd323bd9e98ccf5_r.jpg
• vertical-align:middle;middle不是居中对齐。大部分可以对齐，但是字体很奇葩，就很难对齐。middle 的意思是「用父元素 baseline 高度加上父元素中 x-height 的一半的高度来对齐当前元素的垂直方向的中点」。即：设置middle的元素自己的中线对齐另外一个元素的基线。

所以，对齐方式使用flex。

图片下面为什么有空隙？

  <div>
    <img src = "https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
  </div>
div {
  border: 1px solid red;
}
img {
  height: 200px;
}

• 图片和其父容器之间存在空隙

  
  TIM图片20190112142437.png
• 原因：父容器中有一个内联元素，也会存在对齐，它以看不见的基线对齐。
• 不要使用font-size：0；解决，会引起其他bug。
• 可以采用vertical-align:top / bottom / middle / text-top / text-bottom

div {
  border: 1px solid red;
}
img {
  height: 200px;
  vertical-align: top;
}

不要用inline-block做布局，两个inline-block元素之间存在空格，因为HTML中加了空格。

span {
  border: 1px solid red;
}
  <div class = "parent">
    <span class = "child1">○</span>
    <span class = "child2">你</span>
  </div>

TIM图片20190112144009.png

• 解决办法： flex,或者float
  .parent {display: flex;}

总结

• font-size指的是：em-square
• line-height指的是： 实际占地高度
• 100px 100px -> 103px，因为两个内联元素之间，因字体的不同，导致基线不同，所以存在高度差
• vertical-align: top ：实际高度顶部对齐。 middle：用父元素 baseline 高度加上父元素中 x-height 的一半的高度来对齐当前元素的垂直方向的中点。 bottom 、 text-top、 text-bottom
• 图片下面有空隙,因为图片会以看不见的基线对齐
  解决办法：

1. vertical-align: top
2. img{display: block;}
3. font-size: 0 傻逼采用

• inline-block 元素对不齐 ——无解 —— 用 flex 或 float
• inline-block 有空隙 ——用 flex 或 float