CSS常用布局属性

定位

谈及定位，我们就得从position属性说起。你能准确的说出position的属性值吗？相信你可以完美地说出这么六个属性值：static、relative、absolute、fixed、sticky和inherit。

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

**absolute：**它的偏移量是相对于最近一级position不是static的祖先元素的。

**fixed：**它的偏移量是相对于整个视图窗口的。

尺寸

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

width： 这是标准盒子模型，可以看到width的长度等于content的宽度；而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和。
heigth: auto这个属性值表示的是浏览器自动计算。这种自动计算，需要一个基准，一般浏览器都是允许高度滚动的，所以，会导致一个问题——浏览器找不到垂直方向上的基准。但是宽度就可以auto;

浮动

浮动， 这是一个非常有意思的东西，在布局中被广泛的应用。最初，设计浮动时，其实并不是为了布局的，而是为了实现文字环绕的特效，它可以自成一派最初是用来文字环绕。所谓浮动布局就是div收尾相接占据着相应的宽度，不然就是独占一行的div.

最初的布局——table

**两栏布局：**一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。

左侧部分

右侧部分

.left{ width: 200px; height: 600px; background: red; float: left; display: table; text-align: center; line-height: 600px; color: #fff; }

.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
三栏布局： 使用flex进行布局。

左栏

中间

右栏

.left{ width: 200px; height: 300px; background: green; } .middle{ width: 100%; height: 300px; background: red; marign: 0 20px; } .right{ width: 200px; height: 300px; background: yellow; }