说起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。
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金大神的博客分享。
网友评论