CSS3 布局

1、多列布局 columns

语法：columns：<column-width> || <column-count>

注：<column-width>：列宽，主要用来定义多列中每列的宽度，column-width: auto | <length>（由数值和长度单位组成，不过其值只能是正值，不              能为负值）。

  <column-count>： 列数，主要用来定义多列中的列数，column-count：auto | <integer>（此值为正整数值，主要用来定义元素的列数，取值为大              于0的整数，负值无效）。

2、列间距 column-gap

语法：column-gap: normal || <length>

注：normal：默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。

  <length>：此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

3、列表边框 column-rule

定义：用来定义列与列之间的边框宽度、边框样式和边框颜色。column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位     置。

语法：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

注：column-rule-width：用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负

               值。可以使用关键词：medium、thick和thin。

   column-rule-style：用来定义列边框样式，其默认值为“none”。属性值包括none、hidden、dotted、dashed、solid、

                double、groove、ridge、inset、outset。

   column-rule-color：用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color

                接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)

4、跨列设置 column-span

语法：column-span: none | all

注：none：此值为column-span的默认值，表示不跨越任何列。

  all：这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

5、盒子模型

定义：box-sizing属性定义盒元素尺寸的计算方法。

语法：box-sizing : content-box padding-box border-box inherit ;

注：content-box：默认值，计算方法为width/height=content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内。

           element width/height = border + padding + content width / height

  padding-box：计算方法为width/height=content+padding，表示指定的宽度和高度包含内边距和内容区域，边框宽度不包含在内。

  border-box：计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这里的内容宽度或高度包

          含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。

  inherit：表示继承父元素中box-sizing属性的值。

6、伸缩布局

定义： 布局 ---> display: flex;

     方向 ---> flex-direction: row(横)||column(竖);

     上下 ---> align-items: flex-start||center||flex-end;

     左右 ---> justify-content: 同上 设置主轴; align-items:设置副轴

     倒序 ---> row-reverse

     兼容加-webkit-前缀