常用的布局

1. 双飞翼布局 和 圣杯布局
2.  CSS3 弹性布局（ flex   布局）
3.  CSS3 响应式设计
4.  flex   布局
5. 固定宽度布局
6. 流流体布局
7. 分栏布局

分栏

column-count：auto | 整数；---控制栏数

column-width： auto | length；---每栏的宽度

column-gap : length ;---两栏之间的间距

column-rule : 宽度，线型，颜色；---栏与栏的间隔线

类似border，solid | dotted | dashed   实线 | 点线 | 虚线

column-width和column-count可以让一个元素进行多列布局

column-gap和column-rule就处在相邻两列之间

双飞翼布局 和 圣杯布局

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。

         双飞翼布局的实现

• left、center、right三种都设置左浮动
• 设置center宽度为100%
• 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
• 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

响应式布局

一个网站能够兼容多个终端

1. 优势
   • 多终端视觉和操作体验风格统一
   • 兼容当前及未来新设备
   • 节约了开发成本，维护成本也降低很多
2. 不足
   • 兼容性：低版本浏览器兼容性有问题
   • 移动带宽流量：相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多
   • 代码累赘，会出现隐藏无用的元素，加载时间加长
   • 在设计的初期就要考虑的页面如何在多终端显示，兼容各种设备工作量大

响应式实现

1. CSS3-media Query（媒体查询）
2.  javascript
3.  第三方开源框架
   • Bootstrap

and   用来连接条件，然后括号里就是一个媒体特征查询语句

not   用来排除某种媒体类型，即用于排除符合表达式的设备

only   用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器