1. 如下如，高度已知，写出三栏布局，左右宽度为300px，之间自适应；
1. float 布局
<article class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</article>
article>div {
min-height: 300px;
}
.left {
float: left;
width: 300px;
background-color: red;
}
.right {
float: right;
width: 300px;
background-color: blue;
}
.center {
background-color: #f8f800;
}
缺点：清除浮动，浮动之后是脱离文档流的，若内容太多，则会造成内容溢出，如下图
2. position 布局
<style>
article div{
position: absolute;
min-height: 100px;
}
.left{
width: 300px;
background-color: red;
}
.center{
left: 300px;
right: 300px;
background-color: yellow;
}
.right{
right: 0;
width: 300px;
background-color: teal;
}
</style>
缺点：布局脱离文档流，有效性和可使用性比较差
3. flex 布局
article{
display: flex;
}
div{
height: 300px;
}
.left{
width: 300px;
background-color: red;
}
.right{
width: 300px;
background-color: blue;
}
.center{
flex: 1;
background-color: yellow;
}
4. 表格布局
article{
display: table;
width: 100%;
}
div{
display: table-cell;
height: 300px;
}
.left{
width: 300px;
background-color: red;
}
.center{
background-color: yellow;
}
.right{
width: 300px;
background-color: blue;
}
优点：兼容性好
5. grid 布局
article{
display: grid;
width: 100%;
grid-template-rows: 300px;
grid-template-columns: 300px auto 300px;
}
.left{
background-color: red;
}
.center{
background-color: yellow;
}
.right{
background-color: blue;
}
2. 写出一个div块垂直居中
3. flex布局
1. 以下属性定义在box中
.box{
display: flex;
}
// 行内元素：
.box{
display: inline-flex;
}
注意，设为 Flex 布局以后，子元素的
float、clear和vertical-align属性将失效。
- flex-direction（决定items的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
// nowrap（默认）：不换行
// wrap：换行，第一行在上方。
// wrap-reverse：换行，第一行在下方。
- flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
- justify-content 定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
// flex-start（默认值）：左对齐
// flex-end：右对齐
// center： 居中
// space-between：两端对齐，项目之间的间隔都相等。
// space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-items 定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
// flex-start：交叉轴的起点对齐。
// flex-end：交叉轴的终点对齐。
// center：交叉轴的中点对齐。
// baseline: 项目的第一行文字的基线对齐。
// stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
2. 以下属性定义在items上
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
- flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
- flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
3. grid
1. box元素属性
1. display
.box{
display: grid;
}
// 行内元素：
.box{
display: inline-grid;
}
2. 行和列
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(2, 100px 20px 80px);
// 相当于
grid-template-columns: repeat(100px 20px 80px 100px 20px 80px);
grid-template-columns: 150px 1fr 2fr;
3. 每个单元格的位置
如：
- 1.justify-items （设置单元格水平位置(左中右））
- 2.align-items（设置单元格内容的垂直位置（上中下））
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
// stretch：拉伸，占满单元格的整个宽度（默认值）。
- 3.place-items（justify-items 和 align-items 的合并简写）如：
place-items: start end;
4. 整个内容区域的位置
如：
- 1.justify-content （整个内容区域的水平位置（左中右））
- 2.align-content（整个内容区域的垂直位置（上中下））
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
- 3.place-content（justify-content 和 align-content 的合并简写）如：
place-content: space-around space-evenly;
5. 间隔
grid-row-gap: 20px; // 设置行与行之间的间隔
grid-column-gap: 20px; // 设置列与列之间的间隔
// 合并简写
grid-gap: 20px 20px;
6. 先行后列 或者 先列后行
grid-auto-flow: row; // 先列后行
grid-auto-flow: column; // 先行后列
7. 多余的网格外的行高和列高设置
grid-auto-columns ，
grid-auto-rows
2.以下属性是设置在items上的
2.1 项目的位置
grid-column-start: <number>; //属性：左边框所在的垂直网格线
grid-column-end: <number>; //属性：右边框所在的垂直网格线
grid-row-start: <number>; //属性：上边框所在的水平网格线
grid-row-end: <number>; //属性：下边框所在的水平网格线
如：
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
参考文章：阮一峰-gird
4. table
5. css3的响应式布局单位：vw 和 wh
vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。 vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。 vh就是可视窗口的高度了。
这边顺便提一下vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个。
- 使用vw和vh实现垂直居中
.box {
width: 50vw;
height: 50wh;
margin: 25vh auto; // 上下边距为25vh，左右边距为自适应（居中）
background-color: aquamarine;
}
只要设置margin的上下间距，
使之 heigit + margin-top +margin-bottom = 100 ，
width + margin-left + margin-right = 100 ，
就能够响应垂直居中
4. em
em是相对长度单位。相对于当前对象内本文的字体尺寸（如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px），这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。
5. rem
rem和em一样也是相对长度单位，但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的，IE8以上版本和其他浏览器都已经支持，是个做响应式页面的好选择。
