CSS

深入了解CSS的line boxes模型

说起css的盒子模型大家都不陌生。盒子宽度=width+padding+border,我们有没有对于盒子的高度有疑惑呢?直接指定height,简单粗暴,在不指定的情况下height是怎么确定的呢?下面就来讲讲。

1.到底有哪些盒子?

说起有哪些盒子,我们很快想到display为block的块级盒子,inline-block的行内块级盒子,inline行内盒子。而盒子的形成一般是因为我们在文档中加入了相应的标签,例如常用到的行内块级盒子,input ,textarea ,img,button等标签生成的 盒子。像span,i,a等标签生成的就是行内盒子。那么我们直接写在盒子里面的文字属于盒子吗?属于哪种盒子?

2.inline boxes模型

我们知道行级盒子是在同一行排列的。排在同一行的这些盒子都是inline boxes。由标签生成的inline-block和inline盒子是有名字的inline boxes,而文字则属于匿名的inline boxes。

line-boxs模型

3.line boxes模型

说了这么久line boxes到底是个啥呢?line boxes就是代表包含众多inline boxes的这行。line boxes的高度等于这行内高度最高的inline boxes的高度,在上面的图中就是textarea的高度。没有指定高度的块级元素和行内块级元素其高度就是由多个这样的line boxes累计堆起来的。

那么问题来了,我们知道line boxes有啥作用呢?不知道大家看到上图中的input框没有,它是超出了line boxes的高度的,也就是说它发生了错位,这是由于它的vertical-align默认值为baseline,我们明天再来讲讲vertical-align是怎么回事,想要弄明白vertical-align和line-align这两个属性,盒子的line boxes模型是一定要知道的。最后说个我们常用的单行文字垂直居中的一个方法,line-align=盒子的高度。其实line-align=X,是规定了非替换元素line boxes高度的最小值,相应的line box高度变了,盒子的高度也就变了。

感谢3金大神的博客分享。
张鑫旭的博客