关于line-height的一些理解

看张鑫旭的博客关于line-height的一些理解.

  结论:一个没有定义高度的盒子的高度是由其包裹的盒子lineboxes的最大line-height决定.但是若line-boxes没有内容,即使该盒子自己定义了行高,也无法作用于自己的高度.

<div ></div>

      div{line-height: 30px;background: blue;}

什么也没有显示,在浏览器上.

如果这样

<div>你好</div>div{line-height:30px;background:blue;}

就会显示


inline-box模型中,有个line-boxes负责包裹每一行的内容.一行一个,lineboxes会监视本行里line-height最大的那一个并应用于height.

一个没有设置高度的div就是由一行行lineboxes堆砌而成的.

而line-height有垂直居中属性.