CSS的常见的布局方式
（1）flex布局
采用flex布局的元素叫做容器，其所有的子元素自动成为容器成员，成为flex项目
容器属性：
- flex-direction：row | row-reverse | column | column-reverse
row: 主轴为水平方向，起点在左边
row-reverse：主轴为水平方向，起点在右方
column：主轴为垂直方向，起点在上沿
column：主轴为垂直方向，起点在下方 - flex-wrap：nowrap｜wrap｜wrap-reverse
nowrap：不换行（默认）
wrap: 换行，第一行在上方
wrap-reverse：换行，第一行在下方 - flex-flow： flex-direction 和 flex-wrap的简写形式
- justify-content：flex-start ｜ flex-end ｜ center ｜ space-between ｜ space-around
- align-items：定义项目在交叉轴上如何对齐
flex-start｜flex-end｜center｜stretch｜space-between｜space-around｜stretch
项目属性
- order：定义项目的排列顺序，数值越小，排列越靠前，默认为0
- flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
如果所有项目的flex-grow属性为1，则它们将等分剩余空间（如果有的话），如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间比其他项多一倍 - flex-shrink：定义项目的缩小比例，默认为1，如果空间不足，该项目会缩小
如果所有的项目的flex-shrink都为1，当空间不足时，都将等比例缩小，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性不生效。 - flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目本来大小
- flex：flex-grow，flex-shrink，flex-basis的缩写
（2）grid布局
网格布局（grid）是最强大的css布局
采用网格布局的区域叫做容器，容器内部采用网格定位的子元素，称为项目。
容器属性
- display: grid ｜ inliine-grid 指定一个容器采用网格布局
- grid-template-columns: 定义每一列的宽度
- gird-template-rows：定义每一行的行高
- grid-row-gap：用来设置行间距
- grid-column-gap：用来设置列间距
- grid-gap：<gid-row-gap> <grid-column-gap>
项目属性
- grid-column-start：左边框所在的垂直网格线
- grid-column-end：右边框所在的垂直网格线
- grid-row-start：上边框所在的水平网格线
- grid-row-end：下边框所在的水平网格线
- grid-column：是grid-column-start 和 grid-column-end 的简写
- grid-row：是grid-row-start 和 grid-row-end 的简写
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}- justify-self：设置单元格内容的水平位置（左中右）
- align-self：设置单元格内容的垂直位置（上中下）
- place-self：align-self属性和justify-self属性的合并简写形式。
圣杯和双飞翼布局，都是三栏，中间自适应的布局
（3）圣杯布局
- 首先把left、middle、right都放出来
- 给它们三个设置上float: left, 脱离文档流
- 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
- left、right设置上各自的宽度
- middle设置width: 100%
接下来比较重要 - 给left、middle、right设置position: relative;
- left设置 left: -leftWidth, right设置 right: -rightWidth;
- container设置padding: 0, rightWidth, 0, leftWidth;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
height: 100px;
line-height: 100px;
background-color: green;
text-align: center;
font-size: 30px;
font-weight: bolder;
}
.footer {
background-color: goldenrod;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.left,
.middle,
.right {
position: relative;
float: left;
min-height: 130px;
word-break: break-all;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background-color: red;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background-color: green;
}
.middle {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddle
</p>
</div>
<div class="left">
<h4>left</h4>
<p>
leftleftleftleftleftleftleftleftleftleftleftleft
leftleftleftleftleftleftleftleftleftleftleftleft
leftleftleftleftleftleftleftleftleftleftleftleft
</p>
</div>
<div class="right">
<h4>right</h4>
<p>
rightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightright
</p>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
（4）双飞翼布局
双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
- 首先把left、middle、right都放出来, middle中增加inner
- 给它们三个设置上float: left, 脱离文档流；
- 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
- left、right设置上各自的宽度
- middle设置width: 100%
接下来和圣杯布局不一样的地方 - left设置 margin-left: -100%, right设置 right: -rightWidth
- container设置padding: 0, rightWidth, 0, leftWidth
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
height: 100px;
line-height: 100px;
background-color: green;
text-align: center;
font-size: 30px;
font-weight: bolder;
}
.footer {
background-color: goldenrod;
}
.container {
overflow: hidden;
}
.left,
.middle,
.right {
float: left;
min-height: 130px;
word-break: break-all;
}
.left {
margin-left: -100%;
width: 200px;
background-color: red;
}
.right {
margin-left: -220px;
width: 220px;
background-color: green;
}
.middle {
width: 100%;
height: 100%;
background-color: blue;
}
.inner {
margin: 0 220px 0 200px;
min-height: 130px;
background: blue;
word-break: break-all;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">
<div class="inner">
<h4>middle</h4>
<p>
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddle
</p>
</div>
</div>
<div class="left">
<h4>left</h4>
<p>
leftleftleftleftleftleftleftleftleftleftleftleft
leftleftleftleftleftleftleftleftleftleftleftleft
leftleftleftleftleftleftleftleftleftleftleftleft
</p>
</div>
<div class="right">
<h4>right</h4>
<p>
rightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightright
</p>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。