CSS3 多列与媒体查询

1、column-count
    说明：
    属性规定元素应该被分隔的列数
    适用于：除table外的非替换块级元素, table-cells, inline-block元素

2、column-gap
    说明：
    属性规定列之间的间隔大小

3、column-rule    
    说明：
    设置或检索对象的列与列之间的边框。复合属性。
    column-rule-color规定列之间规则的颜色。
           column-rule-style规定列之间规则的样式。
          column-rule-width规定列之间规则的宽度。

4、column-fill
    说明：
    设置或检索对象所有列的高度是否统一
    auto：列高度自适应内容
    balance：所有列的高度以其中最高的一列统一(默认值)

5、column-span
    说明：
    设置或检索对象元素是否横跨所有列。
    none：不跨列
    all：横跨所有列

6、column-width
    说明：
    设置或检索对象每列的宽度

7、columns
    说明：
    设置或检索对象的列数和每列的宽度。复合属性
    <' column-width '> || <' column-count '>
例：columns:100px 3;注释：
 Internet Explorer 10 和 Opera 支持多列属性。
 Firefox 需要前缀 -moz-。
 Chrome 和 Safari 需要前缀 -webkit-。

break-inside:avoid避免中断
描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。
 

---

什么是媒体查询
    媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

1、媒体查询操作方式
    实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询语法
    @media screen  and  (min-width:320px)  and (max-width:750px){ 
    body { background-color:blue;}
 }
only有时在支持媒体查询的浏览器中没有区别
在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用
如果不带only，在不支持媒体查询的浏览器中，将被解析为screen，将会被应用到屏幕类型设备上
    设备类型（默认为all）
        all
            所有设备
        aural
            听觉设备
        braille
            点字触觉设备
        handled
            便携设备，如手机、平板电脑
        screen
            显示器、笔记本、移动端等设备
        tv
            电视机等设备类型
        print
            打印预览图等
        tty
            如打字机或终端等设备
        projection
            投影设备
        embossed
            盲文打印机
    screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。
    主断点
        目前常用断点值是：320px、480px、768px和1024px