分栏和flex弹性布局、响应式布局、媒体查询、图标字体

1.多列（分栏）

​ 1）column-count 规定元素应该被分隔的列数（栏数）。
​ column-count: number|auto;
​ 2）column-gap 设置栏间距。
​ column-gap: length|normal;
​ 3）column-rule 设置栏间分隔线。
​ a)column-rule-style：设置线型。
​ none 没有分隔线
​ hidden 隐藏线
​ dotted 点线
​ dashed 虚线
​ solid 实线
​ double 双线
​ groove 3D沟槽效果
​ ridge 3D脊状效果
​ inset 3D左上角阴影效果
​ outset 3D右下角阴影效果

        注意：
            3D线型在分栏中没有3D效果，当实线处理了。
    b)column-rule-width：设置线宽。
    c)column-rule-color：设置分隔线颜色。

    简洁（复合）写法：
        column-rule:width style color;

4）column-width 设置栏宽。

​ column-width: length|auto;
​ 5）columns：是column-width 和 column-count 的简写方式。
​ columns: width count;

2.flex弹性布局

常用的属性：
​ 1）flex-direction（应用于父元素）
​ flex-direction 指定子元素在父容器中的位置。

        语法：
            flex-direction: row | row-reverse | column | column-reverse

        参数：
            row ：横向从左到右排列（左对齐），默认的排列方式。
            row-reverse ：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
            column ：纵向排列
            column-reverse ：反转纵向排列，从后往前排，最后一项排在最上面。

2）justify-content（应用于父元素）
​ 把弹性项沿着弹性容器的主轴线对齐。

        语法：
            justify-content: flex-start | flex-end | center | space-between | space-around