css盒模型block-box与line-box

block box

display: block、list-item、、table会让一个元素成为块级元素

例： div、section、article、h1、form、ul、li、

在block box中，会被水平格式化，垂直格式化

如何计算高度：

正常流中，块级元素框的水平部分 = 其父元素的width
= (margin-left) + (margin-right) + (padding-left) + (padding-right) + (border-left) + (border-right) + 自身width

height与width一样，height定义了内容区的高度，而不是元素框的高度。元素框上下的内边距，边距，都会增加到height值里。

inline box

display: inline-block;

例： span、a、img、input、textarea、select、b(加粗)、i(斜体)、em(斜体)

line box

行级盒子是在同一行排列的，排在同一行的这些盒子都是inline boxes.

由标签生成的inline-block和inline盒子都是有名字的inline boxes，而文字则属于匿名的inline boxes.

每一行成为一条line box ，它又是由这一行的许多的inline-box组成，他的高度可以直接由line-height决定
line boxes 的高度垂直堆叠形成了containing box 的高度，就是我们见到的div或p标签的高度了

inline-box

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性