多列布局、css的hack、网格布局

多列布局

css3 中最新给出多列布局方案，他是css布局的一个新的扩展

设置列宽
column-width: 具体值 / auto
具体值是直接设置元素的宽度
auto 是根据页面宽度，自定义列宽
设置列数
column-count：num
num是具体的正整数，范围是[1,10]
以上两个属性合写
columns：width count;

设置列间距
column-gap: normal 或者具体的数值
normal 是默认值, 他的大小是 1em
设置两列之间的边框
column-rule 具体设置规则和 css中的border一致
设置标题跨列
column-span
只具有两个值
1. none 表示不跨列
2. all 表示跨所有列

css的hack

css hack: 由于不同的浏览器厂商，比如 ie ，火狐， 谷歌 ，safari(苹果) ，他们生产浏览器的时候，会有不同的渲染解决方案。还有不同版本的浏览器也可能对相同的css设置渲染不同的效果，例如 IE6 7 8 9。css hack 是浏览器厂商给自己的浏览器专门制定的一套特殊的css指令。可以理解为css hack的目的就是解决不同的浏览器的css兼容问题，当然也可以使用css hack为不同的浏览器制定不同的css

    ie的条件注释
    [if IE]: 只要是ie浏览器都可以生效
    [if lte IE 6]: 浏览器的版本小于等于ie6的时候生效
    [if lt IE 6]: 浏览器的版本小于ie6的时候生效
    [if gte IE 6]: 浏览器的版本大于等于ie6的时候生效
    [if gt IE 6]: 浏览器的版本大于ie6的时候生效
    [if IE 6]: 浏览器的版本等于ie6的时候生效
    [endif]: 条件注释的结束指令
    [if ! IE 6]: 浏览器的版本不是ie6的时候生效

    特殊符号 hack
    * 在IE10 及其以上生效
    - 减号，只对ie6 生效
    + 加号，对ie7 生效
    _ 下划线，只对ie6 ie7生效
    \9 对 IE6 7 8 9 10都生效
    \0 对 IE8 9 10 都生效
    \9\0 只对IE9 10生效

网格布局

网格布局，是css3新出的一种布局方式，常用的适用案例为 九宫格布局

    声明网格布局环境
    display:grid; (最常用)
    display:inline-grid

    设置列
    grid-template-columns
        值是 fr，1fr就代表一个比例划分
        有几列就可以设置几个fr，每一个fr所占据的 宽度比例为1fr，如果需要
        设置其他比例的宽度，则可以设置整倍fr
        如下列：
        grid-template-column：1fr 2fr 3fr
        设置了当前网格为3列，第一列的宽度为1fr，第二列的宽度是第一列的2倍，
        第三列宽度是第一列的3倍
        有几个fr值，就有几列

        还可以直接设置 具体宽度
        grid-template-columns: 100px 100px 200px
        还可以设置 宽度+auto auto 是除了具体宽度列数之外的 自适应宽度

        也可以 宽度 + fr 组合

    设置行
    grid-template-rows
        他的值是行高，有几个值，就设置几个行高
        grid-template-rows: 200px 200px 200px;
        以上案例的含义是，设置了三行，第一行行高是100px，第二行行高是200px，
        第三行行高是300px
        如果总行高小于父级grid的高度，则父级剩余的高度会被剩余的子元素平分

    行 列 合写
    grid-template:行 /列
    grid-template:100px auto auto/1fr 1fr 1fr;

    设置列间距
        column-gap：具体数值
    设置行间距
        row-gap：具体数值
    合写间距：
        gap: row column;

    指定开始行
    grid-row-start:1; 从第一行开始跨行
    指定结束行
    grid-row-end:span 3;到第3行结束，合并3行

    指定开始列
    grid-column-start:1; 从第一列开始跨列
    指定结束列
    grid-column-end:span 3;到第3列结束，合并3列