CSS常见布局方式CSS常见布局方式 1.传统盒模型布局方式 ** 我们的传统布局方式就是通过盒模型，使用 displ

CSS常见布局方式

1.传统盒模型布局方式

** 我们的传统布局方式就是通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）。**

2.文档流布局

** 这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行。**

3.浮动布局

** 浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。**

4.定位布局

** 通过 position 属性来进行定位。**

5.表格布局

根据

标签或者display属性来定义表格中的元素 display:table/table-cell /table-row

6.网格布局(grid)

7.flex布局

可以简便、完整、响应式地实现各种页面布局。 ** flex 是一种新型的布局方式，使用该布局方式可以实现几乎所有你想要的效果。但是要注意其浏览器的兼容性，flex 只支持 ie 10+，所有还是要根据你的项目情况使用（要求至少 ie 9）**

flex 兼容性

表格布局

table的display可选值：

table：指定对象作为块元素级的表格，相当于html标签 table
inline-table：指定对象作为内联元素级的表格，相当于html标签table
table-caption：指定对象作为表格标题，相当于html标签caption
table-cell：指定对象作为表格单元格，相当于html标签td
table-row：指定对象作为表格行，相当于html标签tr
table-row-group：指定对象作为表格行组，相当于html标签tbody
table-column：指定对象作为表格列，相当于html标签col
table-column-group：指定对象作为表格列组显示，相当于html标签colgroup
table-header-group：指定对象作为表格标题组，相当于html标签thead
table-footer-group：指定对象作为表格脚注组，相当于html标签tfoot 还有一些协助属性：
border-collpase：用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
border-spacing：规定相邻单元格边框之间的距离（只适用于边框分离模式）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设—置不同于水平间距的垂直间距。
table-layout：定义了用于布局表格单元格，行和列的算法。（auto：表格及单元格的宽度取决于其包含的内容。fixed：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。
vertical-align：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

flex布局

flex 的使用方法很简单，只需要将其 display 属性设置为 flex 就可以，也可以设置行内的 flex，记得 Webkit 内核的浏览器，必须加上 -webkit 前缀。注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

.ele{ display: -webkit-flex; display: flex; display: inline-flex; display: -webkit-inline-flex; }

在 flex 中，最核心的概念就是容器和轴，所有的属性都是围绕容器和轴设置的。其中，容器分为父容器和子容器。轴分为主轴和交叉轴（主轴默认为水平方向，方向向右，交叉轴为主轴顺时针旋转 90°）。

在使用 flex 的元素中，默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）主轴开始的位置称为 main start，主轴结束的位置称为 main end。同理，交叉轴开始的位置称为 cross start，交叉轴结束的位置称为 cross end。在使用 flex 的子元素中，占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。