18多列布局，css的hack，网格布局

18多列布局，css的hack，网格布局

1.多列布局

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

01设置列的宽度

        column-width: 具体值 / auto
        具体值是直接设置元素的宽度
        auto 是 根据页面宽度，自定义列宽

02设置列数

        column-count：num
        num 是具体的数字正整数，值范围是[1-10]
    以上两个属性合写
        columns: width count;

03设置列间距

        column-gap: normal 或者具体的数值
        normal 是默认值，它的大小是 1em

04设置两列之间的边框

        column-rule 具体设置规则和 css中的border一致

05设置标题跨列

        column-span
        只具有两个值
        1. none 表示不跨列
        2. all 表示跨所有列

            /* 分列的宽度 */
            column-width: 180px;
            /* 分列的列数 */
            column-count: 3;
            /* 合写 */
            columns: 180px 3;
            /* 设置列间距 */
            column-gap: 20px;
            /* 设置标题跨列 */
            column-span: all;

2.css的hack

css hack：

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

    <!--[if lte IE9]>
        <style>
            .wp{
                background:#04be02;
            }
        </style>
    <![endif]-->

    <!--[if lte IE8]>
        <style>
            .wp{
                background:#ff0;
            }
        </style> 
    <![endif]-->

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生效

3.网格布局

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

1.声明网格布局的环境

    display: grid; (最常用)
    displat: inline-grid;

2.设置列

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

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

        也可以 宽度 + fr 组合

3.设置行

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

4.行 列 合写

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

5.设置列间距

        column-gap

6.设置行间距

        row-gap

7.合写间距

        gap:row column;

如：

.grid{
            /* 创建网格布局 */
            display: grid;
            height: 400px;
            border: 1px #f00 solid;
            /* 设置列 */
            grid-template-columns:1fr 1fr 1fr;
            grid-template-columns:100px 200px auto;
            grid-template-columns:100px 100px 1fr 3fr;
            /* 设置行 */
            grid-template-rows: 100px 100px auto;

            width: 600px;
            margin: 20px auto;
            /* 行 列 合写 */
            grid-template:auto auto auto/1fr 1fr 1fr;
            /* 列间距 */
            column-gap: 20px;
            /* 行间距 */
            row-gap: 20px;
            /* 合写间距 */
            grid-gap: 40px 20px;

            
        }

8.指定开始行

    grid-row-start:1; 从第一行开始跨行

9.指定结束行

    grid-row-end:span 3; 到第三行结束，合并3行

10.指定开始列

    grid-column-start:1; 从第一列开始跨列

11.指定结束列

    grid-column-end:span 3; 到第三列结束，合并3列

        .row-span{
            grid-row-start: 1;
            grid-row-end:span 3;
        }
        .col-span{
            grid-column-start: 1;
            grid-column-end:span 3;
        }