常见的页面布局方式

1.固定布局（最基本的布局）

2.流式布局也叫百分比布局

把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的.

* 百分比是基于元素父级的大小计算得来的；

* 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)

* 边框不能用百分比设置

3.弹性布局（伸缩布局）

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的。

属性值：(注意兼容性)

* flex-direction：属性决定主轴的方向及起点（即项目的排列方向）row | row-reverse | column | column-reverse;

* flex-wrap

        nowrap（默认）：不换行

        wrap：换行，第一行在上方

        wrap-reverse：换行，第一行在下方

* flex-flow

        flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，eg：flex-flow:  flex-direction  || flex-wrap;

* justify-content 属性定义了项目在主轴上的对齐方式

* align-items 属性定义项目在交叉轴上如何对齐

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

            flex-start：与交叉轴的起点对齐。

            flex-end：与交叉轴的终点对齐。

            center：与交叉轴的中点对齐。

            space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

            space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

            stretch（默认值）：轴线占满整个交叉轴。

4.浮动布局(float)

5.定位布局 

    position: fixed;固定布局

    position: relative;相对定位，相对于元素自身定位，不脱离文档流

    position: absolute;绝对定位，脱离文档流

6.grid布局

CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容，示例：

                       1.html：

                        2.css:

div.grid{

display: grid;

   grid-template-columns: 100px 100px 100px;  /*列*/

    grid-template-rows: 100px 100px 100px; /*行*/

    grid-column-start: 1;

    grid-column-end: 4;

}

div.item{

background: red;

border: 1px solid #fff;

text-align: center;;

color: #fff;

line-height: 6;

}

div.item1{

    grid-column: 1 / 4;

}

.item1 { /* 第一列开始，横跨3-1=2列 */

    grid-column-start: 1; 

    grid-column-end: 3;

}

.item3 {/* 第二行开始，横跨4-2=2行 */

    grid-row-start: 2;

    grid-row-end: 4;

}

.item4 {

    grid-column-start: 2;

    grid-column-end: 4;

}

                                          3.效果图：