一、分栏。
* column-count：auto | 整数；---控制栏数* column-width：length；---每栏的宽度
* column-gap : length ;---两栏之间的间距
* column-rule : 宽度，线型，颜色；---栏与栏的间隔线
* 类似border，solid | dotted | dashed 实线 | 点线 | 虚线
* column-width和column-count可以让一个元素进行多列布局
* column-gap和column-rule就处在相邻两列之间
* column-span : all / none ; 是否跨栏显示
二、弹性布局（box-flex）。
* 优点：
* 1 适应性强，在做不同屏幕分辨率的界面时非常实用
* 2 可以随意按照宽度、比例划分元素的宽高
* 3 可以轻松改变元素的显示顺序
* 4 弹性布局实现快捷，易维护
1).display : box； 将一个元素的子元素以弹性布局进行布局box-orient：horizontal | vertical | inherit 子元素的排列方式
横向 竖向 继承
box-direction：normal | reverse | inherit 子元素的排列顺序
正常 反向 继承
box-align：start | end | center 子元素的对齐方式
靠左 靠右 居中
box-pack：start | end | center 子元素的对齐方式
顶部 底部 居中
2).box-flex：number ; 子元素如何分配剩余空间
box-flex：在默认情况下，盒子并不具有弹性。如果对box-flex的属性值进行了设置，则变得富有弹性
html,body{height:100%;margin:0px;}需要添加高度控制，否则无法撑满整个屏幕
3).属性
box-ordinal-group：number ; 子元素显示顺序（在子元素设置）
display : box ; 将一个元素的子元素以弹性布局进行布局
box-orient：子元素的排列方式（横向或者竖向
box-direction：子元素的排列顺序
box-align：子元素的对齐方式
box-pack：子元素的对齐方式
box-flex：子元素如何分配剩余空间（在子元素设置）
三、响应式布局。
* 1、优势与不足
1).优势
多终端视觉和操作体验风格统一
兼容当前及未来新设备
节约了开发成本，维护成本也降低很多
2).不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多
代码累赘，会出现隐藏无用的元素，加载时间加长
在设计的初期就要考虑的页面如何在多终端显示，兼容各种设备工作量大
* 2、响应式实现方式
1).css3-media Query(媒体查询、媒介查询)
1、定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式设计的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
2、css语法
1).内嵌样式的语法：
@media mediatype and|not|only (media feature) { ... }
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
示例：
<style>
@media all and (min-width:500px) { … }
</style>
2).外联css语法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
示例：
<link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" />
3).1、媒体类型：mediatype
all 用于所有设备
screen 用于电脑屏幕，平板电脑，智能手机等
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
aural 用于语音和声音合成器
braille 应用于盲文触摸式反馈设备
embossed 用于打印的盲人印刷设备
handheld 用于掌上设备或更小的装置，如PDA和小型电话
projection 用于投影设备
tty 用于固定的字符网格，如电报和对字符有限制的便携设备
tv 用于电视和网络电视
2、关键字：and|not|only
and 用来连接条件，然后括号里就是一个媒体特征查询语句
not 用来排除某种媒体类型，即用于排除符合表达式的设备
only 用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器
示例：
@media screen and (min-width: 500px) and (max-width : 800px)
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="red.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width:240px)" href="w240.css" type="text/css" />
3、媒体特征：media feature
max-width:500px
min-width:500px
@media screen and (min-width: 320px) and (max-width : 500px)
4、分辨率精细的终端查询：device-pixel-ratio
如：iphone4以上的retina屏的像素比是2
@media only screen and (min-device-pixel-ratio: 2)
2).JavaScript
3).第三方开源框架 Bootstrap