column-fill：指定css如何填充列
column-gap：指定列之间的差距
column-rule：对于设置所有column-rule-*属性的简写属性
column-rule-color：指定列之间的颜色规则
column-rule-style：指定列之间的样式规则
column-rule-width：指定列之间的宽度规则
column-span：指定元素应该跨越多少列
column-width：指定列的宽度
columns缩写属性设置列宽和列数
break-inside: avoid //防止断裂
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
首先，css3的布局主要用到下面三个属性
column-count
column-gap
column-rule
其次，在兼容column的浏览器中可以实现瀑布流，代码如下
.demo{width: 500px
height: auto
-webkit-column-count:3
-moz-column-count:3
column-count:3
-webkit-column-gap:10px
-moz-column-gap:10px
column-gap:10px
column-rule:3px outset #ff0000
border: 1px solid #ddd
}
.demo div{
background: #336699
margin-bottom: 4px
color: #eee
padding: 10px
} <div class="demo">
<div>1这是测试用的文字，测试能不能实现瀑布流。</div>
<div>2这是测试用的文字，测试能不能实现瀑布流。</div>
<div>3这是测试用的文字，测试能不能实现瀑布流。</div>
<div>4这是测试用的文字，测试能不能实现瀑布流。</div>
<div>5这是测试用的文字，测试能不能实现瀑布流。</div>
<div>6这是测试用的文字，测试能不能实现瀑布流。</div>
<div>7这是测试用的文字，测试能不能实现瀑布流。</div>
<div>8这是测试用的文字，测试能不能实现瀑布流。</div>
<div>9这是测试用的文字，测试能不能实现瀑布流。</div>
<div>11这是测试用的文字，测试能不能实现瀑布流。</div>
<div>12这是测试用的文字，测试能不能实现瀑布流。</div>
<div>13这是测试用的文字，测试能不能实现瀑布流。</div>
<div>14这是测试用的文字，测试能不能实现瀑布流。</div>
<div>15这是测试用的文字，测试能不能实现瀑布流。</div>
<div>16这是测试用的文字，测试能不能实现瀑布流。</div>
<div>17这是测试用的文字，测试能不能实现瀑布流。</div>
<div>18这是测试用的文字，测试能不能实现瀑布流。</div>
<div>19这是测试用的文字，测试能不能实现瀑布流。</div>
</div>
</div>
