CSS 布局

1.定位

static		元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
relative	top,bottom,left,right	元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。只是多了可以移动的属性，能发生位置偏移，可能会覆盖其他元素。
absolute		元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
fixed		元素框不再占有文档流位置，并且相对于视窗进行定位。（它的偏移量是相对于视口的）
sticky		(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。
inherit

2.尺寸

百分比	百分比的参照物是父元素，50%相当于父元素width的50%
rem	这个对于复杂的设计图相当有用，它是html的font-size的大小
em	它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了。

3.盒子模型

盒子模型	可以通过box-sizing设置不同的模型 1.width=content 2.置成border-box时：width=border+padding+content 3.等

4.浮动

浮动
清除浮动	footer { clear: both; }  这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另一个元素。 clear可以取三个值： left：停止任何活动的左浮动 right：停止任何活动的右浮动 both：停止任何活动的左右浮动