CSS布局

一、table（表格）布局

1.用法：就是将网站当做一个表单来做，不做展开。

2.优点：比较容易。

3.缺点：在实际项目中页面很少使用，因为页面不会向表格一样几行几列，而是比较自由，使用table比较麻烦。

二、Float（浮动）布局

1.用法：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

2.优点：比table布局要方便不少。

3.缺点：带来了 “浮动高度塌陷”的问题，也就是说如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0。

4.引申：

(1).clear清除浮动：

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

(2).网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。之后为了解决 “浮动高度塌陷”的问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。

三、position（定位）

1.

static:该元素根据文档的正常流程进行定位。顶部、右、底部、左和z- index属性都没有影响。这是默认值。

relative:元素根据文档的正常流程进行定位，然后根据顶部、右、底部和左侧的值对其进行偏移。偏移量不影响任何其他元素的位置;因此，页面布局中元素的空间与位置是静态的一样。当z- index的值不是自动的时候，这个值就会创建一个新的叠加上下文。它对表组、表行、表列、表格单元和表标题元素的影响是未定义的。

absolute:元素从正常的文档流中删除，并且没有为页面布局中的元素创建空间。它的位置相对于它最接近的位置，如果有的话;否则，它是相对于初始包含块的。它的最终位置是由上、右、下和左的值决定的。当z- index的值不是auto的时候，这个值就会创建一个新的叠加(栈堆)上下文。绝对定位的盒子的边缘不会随着其他的边缘而倒塌。

fixed:元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。元素从正常的文档流中删除，并且没有为页面布局中的元素创建空间。它的定位相对于viewport建立的初始包含块，除非它的一个祖先有一个转换、透视或过滤属性集到除none之外的其他东西（参见CSS转换规范），在这种情况下，祖先的行为就像包含块一样。（注意，浏览器与透视图和过滤器之间存在不一致，有助于包含块的形成。）它的最终位置是由上，右，下，左，决定，这个值总是创建一个新的叠加上下文。在打印文档中，元素被放置在每个页面的相同位置。

子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。

大多使用三种：相对于一个元素的正常位置来对其定位；使用绝对值来对元素进行定位；相对于浏览器窗口来对元素进行定位。

2.优点：不像float那样会影响其他元素。

3.缺点：需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。

四、flex（弹性）

1.

容器：添加display:flex

fix-direction（决定了元素的排列的方向，是按照横着还是竖着排）

flex-wrap（就是用来换行的，当内部元素的大小超过了父元素大小，这个时候应该如何换行呢）

flex-flow（flex-direction和flex-wrap的简写形式）

justify-content（定义了项目在主轴上的对其的方式）

align-items（在交叉轴上的对齐方式）

align-content（定义了多根轴线上的对齐方式，如果项目只有一根轴线，则该属性不起作用）

项目：

order（定义项目的排序顺序）

flex-grow（定义项目放大的比例）

flew-shrink（定义项目缩小比例）

flew-basics（定义了，在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，来计算是否还有多余的空余空间。）

flex（是flex-grow和flex-shrink以及flex-basis属性的集合。）

align-self（允许单个项目和其他项目的属性不一样的对齐方式，可以用来覆盖align-items属性）

这里粗略介绍，有详细整理关于flex的。

2.优点：解决了float和position的问题。

3.缺点：不兼容IE8及以下的浏览器。

4.引申：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。

五、grid（网格）

未完待续。。。

六、推荐一个网站http://zh.learnlayout.com/toc.html

长这样