定宽+水平居中实现单列布局
一栏布局
代码:http://js.jirengu.com/zosis/1/edit?html,output
一栏布局另一种写法
代码：http://js.jirengu.com/kebip/1/edit
定宽+水平居中实现单列布局（通栏)
一栏布局通栏
代码：http://js.jirengu.com/hiyil/1/edit
浮动实现两栏布局（左侧固定宽度，右侧自适应）
左侧固定宽度，右侧自适应
代码：http://js.jirengu.com/tasov/edit?html,output
display:inline-block实现两栏布局（左侧，右侧都是固定宽度）
左侧，右侧都是固定宽度
代码 ：http://js.jirengu.com/wayax/1/edit?html,css,output
浮动实现两栏布局（右侧固定宽度，左侧自适应）
image.png
代码 ：http://js.jirengu.com/hojej/1/edit?html,css,output
浮动实现三栏布局
三栏布局
代码：http://js.jirengu.com/wopaz/1/edit?html,css
注意 不可以改变内容区的dom顺序，不然浮动元素会被挤到下面
改变内容区div的后果
position实现两栏布局
image.png
image.png
代码：http://js.jirengu.com/kagid/1/edit?html,css,output
水平等距布局
水平等距布局
代码：http://js.jirengu.com/pufek/edit?html,output
圣杯布局
1.是三列布局，两边固定宽度，中间自适应
2.中间内容元素在 dom 元素次序中优先位置
缺点：
1..mian的最小宽度不能小于.aside的宽度
2.屏幕变小样式错乱
d
代码：http://js.jirengu.com/poya/1/edit?html,output
双飞翼布局
1.是三列布局，两边固定宽度，中间自适应
2.中间内容元素在 dom 元素次序中优先位置
3,与圣杯布局相比，多加一个div，但不用相对布局
image.png
代码：http://js.jirengu.com/topev/1/edit
column文字多列布局
image.png
image.png
代码：http://js.jirengu.com/nazoh/2/edit?html,js,output
流式布局
弹性布局flex
grid布局
移动端布局
“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
1.设置 meta ，如
<meta name="viewport" content="width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
2.适配
媒体查询 or 动态 rem
image.png
image.png
