前言：本篇是自己的总结，适合人群：小白。如有错误希望指出，必定改正
1.盒子类型
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，（或list-item，table）成为“块级”元素,会生成block-level box,并参与block fomatting context；span默认display属性值为“inline”（或inline-block，inline-table）是“行内”元素,会生成inline-level box并且参与inline formatting context
2.元素分类
总体来说有三大类
- 1.块级元素（div,ul,ol,li,dt,dd,h1,p）
- 2.行内元素(img,span,input)
- 3.空元素(img,input) 其他的例如列表元素都是属于块级元素中的
3.元素的盒属性：
行内元素：有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。 块级元素：可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。 设置宽高 行内元素：不允许设置宽高，行内元素的宽高只能是由行内元素内的内容撑起来。 块级元素：允许设置宽高，如果不设置，默认宽度是父元素的100%，高度是由内容撑起来的。
4.BOX
BOX:是布局的基本单位，元素的display属性决定了BOX的类型，不同类型的BOX,会参与不同的Formatting Context(一个决定如何渲染文档的容器,块级盒子参加BFC行内盒子参加IFC），因此不同的Box内的元素以不同的方式渲染,上面有说,如图：
5.Formatting context
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系的相互作用 常见的有：
- Block fomatting context(BFC)
- Inline formatting context(IFC)、 对BFC想了解的点这个链接
