好程序员web前端训练共享之HTMLCSS学习笔记css3-多列

  好程序员web前端训练共享之HTMLCSS学习笔记css3-多列,多列布局相似报纸或杂志中的排版方法,首要用以操控大篇幅文本。
多列特点
1、column-count
特点规矩元素应该被分隔的列数
适用于:除table外的非替换块级元素, table cells, inline-block元素
2、column-gap
特点规矩列之间的距离巨细
3、column-rule
设置或检索目标的列与列之间的边框。复合特点。
column-rule-color规矩列之间规矩的色彩。
column-rule-style规矩列之间规矩的款式。
column-rule-width规矩列之间规矩的宽度。
4、column-fill
设置或检索目标一切列的高度是否一致
auto:列高度自适应内容
balance:一切列的高度以其中最高的一列一致
5、column-span
设置或检索目标元素是否横跨一切列。
none:不跨列
all:横跨一切列
6、column-width
设置或检索目标每列的宽度
7、columns
设置或检索目标的列数和每列的宽度。复合特点
<' column-width '> || <' column-count '>
注:Internet Explorer 10 和 Opera 支撑多列特点。 Firefox 需求前缀 -moz-。 Chrome 和 Safari 需求前缀 -webkit-。