css系列之line-height 与 vertical-align

参考链接: https://www.zhangxinxu.com/wo…

line box

  
《css系列之line-height 与 vertical-align》

content area

content area是一种围绕文字看不见的box.content area的大小与font-size的大小相关。

inline box

inline box不会让内容成块显示,而是排成一行。
如果是个光秃秃的文字,则属于匿名inline box。

line box

在containing box里,一个一个的inline box组成了line box。

注:line box高度取决于inline box最高元素的高度

line height

注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因。

line-height属性取值:

1.%

  • 若自身没有设置line-height,则line-height = 父元素的font-size * %;
  • 即为直接继承父元素计算后的line-height,与自身的font-size无关。

2.length

  • 若自身没有设置line-height,则line-height = 父元素的line-height, 也与自身的font-size无关。

3.number

  • 若自身没有设置line-height,则line-height = 父元素的line-height。

区别在于:不论继承与否,line-height = font-size line-height,因此有灵活性。*

4.normal

  • 与number一样,只是浏览器不同,会有差异,约为1.2。

5.inherit

  • 继承父元素的line-height

vartical align

适用于:inline / inline-block / table-cell

  
《css系列之line-height 与 vertical-align》

《css系列之line-height 与 vertical-align》
《css系列之line-height 与 vertical-align》

理解vertical-align最重要的是先要定line box基线(默认值):

一般情况下,基线与X底对齐

  1. line box有inline box, 则为最后一个inline box元素的baseline
  2. line box没有inline box, 则为底margin边界,即为盒模型的边界
  3. line box有inline box, 但overflow != visible, 也为line box有inline box
  4. 特殊情况,若把inline box最高元素的vertical-align设为middle, 则baseline则为最高元素的中间线

vertical-align取值:

    
1.top / bottom

  • 使元素的top / bottom与line box的top / bottom对齐

2.middle

  • 使元素的中点与line box的X-height对齐 (题外话:ex相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。)

3.text-top / text-bottom

  • 使元素盒模型的top / bottom与line box文本元素的top line / bottom line对齐

4.sub / super

  • 使元素盒模型的top / bottom与line box 的 sub / sup元素的baseline对齐

5.length

  • 使元素上移 、下移length

6.%

  • 若为0,则为baseline
  • vertical-align = line-height * %; (可为负)

注:若多行文本,两个inline-box则对齐最后一行的baseline

    原文作者:zhouzhou
    原文地址: https://segmentfault.com/a/1190000011064674
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞