CSS布局

一栏布局
代码: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