CSS中间自适应，左右两栏定宽
实现方法有很多种
1：浮动布局（左右浮动，中间不浮动）
.container .left {
float: left;
width: 200px;
background-color: orange;
}
.container .main {
background-color: rgb(0, 255, 106);
}
.container .right {
float: right;
width: 200px;
background-color: rgb(76, 0, 255);
}
<div class="container">
<div class='left'>111111</div>
<div class="right">1111111</div>
<div class='center'>111111111</div>
</div>
2：定位布局（三个盒子都绝对定位，然后使用left：0；right：0）
.container>div{
position: absolute;
}
.left{
left:0;
width: 300px;
background: red;
}
.center{
left: 300px;
right: 300px;
background: yellow;
}
.right{
right:0;
width: 300px;
background: blue;
}
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
3：flex布局（给父元素添加display：flex，然后设置中间盒子flex:1）
.container{
display: flex;
}
.left{
width: 300px;
background: red;
}
.center{
flex:1;
background: yellow;
}
.right{
width: 300px;
background: blue;
}
4：表格布局（给每个div设置display：table-cell）
.container{
width:100%;
height: 100px;
display: table;
}
.containter>div{
display: table-cell;
}
.left{
width: 300px;
background: red;
}
.center{
background: yellow;
}
.right{
width: 300px;
background: blue;
}
5：圣杯布局
HTML代码
<template>
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>
CSS代码
要点：（1）父元素设置左右padding，并创建BFC（设置overflow：hidden或其他）或使用伪元素清除浮动；（2）为三个盒子设置position：relative；float：left（3）中间盒子宽度100%，左右定宽（4）为左盒子设置margin-left：-100%，left：-100px；右盒子设置margin-left：-100px，right：-定宽px
6：双飞翼布局
html代码
<header>header</header>
<section class="wrapper">
<section class="col main">
<section class="main-wrap">main</section>
</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
要点：（1）父元素BFC清除浮动（2）三个盒子全部左浮动（3）中间main盒子宽度100%，其父盒子左右margin为定宽（4）左盒子margin-left：-100%，右盒子margin-left：-定宽px
以下是与布局相关的知识点：
1：position定位
position共有以下五个值：
static：默认值，遵从正常的文本流
relative：相对定位，相对于自己本来的位置的定位，此时元素还正常的文档流之中，占用文档流
absolute：绝对定位，是相对于已经相对定位的父元素的绝对定位，已经脱离了正常的文档流，所以不占文档流
fixed：固定定位 ，已经脱离了正常的文档流，当页面中出现滚动条的时候，元素位置固定不变
sticky：粘性定位。相对定位和固定定位的混合应用，在跨越特定阈之前为相对定位，之后为固定定位。必须设置top,bottom,left,right中的一个
例如
#one{
position:sticky;
top:10px;
}//意思就是当top小于10的时候id为one的元素为相对定位，当大于10的时候元素就会变成是固定定位，脱离正常的文档流
2：display
display有以下几个常用值：
1：none：该元素不显示
2：inline-block：行内块级元素
3：block：块级元素
4：inline：：内联元素,为内联元素的时候不能设置高度，宽度，行高，边距等
5:table：将元素以块级表格来显示
3：flex布局**
flex布局是一种新的布局方法：块级布局一般注重垂直方向，行内布局一般注重水平方向，而flex布局既不注重垂直方向也不注重水平方向；实现空间自动分配，自动对齐；一般应用于简单的线性布局
属性
flex-container （设置给父元素的属性）
1： flex-direction用于指定布局的方向
row按照行排列
row-reverse按照行反向排列
column 按照列排列
column-reverse 按照列反向排列
如下例：
2:flex-wrap换行
flex-wrap:指定元素换行
flex-nowrap ：指定元素不换行
3：justify content主轴方向对齐方式
space-between：将元素多余的空间放在元素与元素之间
space-around:将多余的空间放在元素的周围
flex-start:：元素向起点靠拢
flex-end：元素向终点靠拢
center：元素向中间靠拢
3：align-items侧轴方向对齐方式
stretch:在子元素高度不写死的情况下，以最高的元素的高度对其
flex-start:按照顶部水平线对齐
flex-end：按照底部水平线对齐
center：垂直居中
baseline：与第一行文字的基线对齐
4：align-content多行/多列文本对齐方式
space-around：空间放置在两边
space-between：行与行之间的空隙均匀分配
flex-start：元素向侧轴起点靠拢
flex-end：元素向侧轴终点靠拢
stretch：轴线占满整个侧轴
flex-item （设置给子元素的属性）
举例：order：
流式布局的应用：手机页面布局，列表，居中
4：visibility=hidden，opacity=0；display：none；
opacity=0；将该元素隐藏起来，但是不会改变页面布局，如果给这个元素添加一些事件之后，还是可以继续触发改时间，比如点击事件，点击这块区域，还是能够触发
visibility=hidden，也是将元素隐藏起来，但是不会改变页面布局，但是元素的事件不能触发。不会销毁DOM，只会引起重绘而不会引起回流
display：none 将元素隐藏起来，会改变页面布局，就可以相当于是将这个元素删除，会引起回流
5：设置元素浮动后，该元素的display值是多少？
自动变成display:block
6：盒子模型
盒子模型是用来包装页面元素的矩形区域；包括标准的盒子模型和IE盒子模型
标准盒子模型其宽度和高度是其content内容的width以及height
IE盒子模型的宽度包括content的宽度+padding的宽度+border的宽度 height同理
这块我们就能想到box-sizing：content-box/border-box、padding-box
content-box 标准盒子模型
border-box:就是指定元素的宽度和高度计算的时候加上内边距和边框 也就是IE盒子模型
padding-box：就是计算宽度的时候等于content的宽度加上padding的宽度
