CSS3多列布局

2019-03-31 本文已影响0人 Xara_

columns属性是一个复合属性——列宽（column-width）和列数（column-count），可以同时定义多列的列数和每列的列宽。
columns: <column-width> || <column-count>

auto：默认值，如果值为auto或者没有显示设置值时，元素多列的列宽将有其他属性来决定。
<length>：使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能时正值，不能为负值。
column-width单独使用时，当容器超出列宽时，会以多列显示，反之容器宽度小与设置的列宽时，容器将只显示为一列。

auto：默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。
<integer>：正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
列数=（容器宽度-间距）/列间距
浏览器对所求列数的值是去余取整，且如果元素设置了列数，不管元素容器的宽度是多少或者间距多少，总是显示固定的列数。

column-gap属性类似于盒模型中的margin一样，主要用来设置元素分列的列间距，其只能设置列与列之间的间距。
column-gap: normal | <length>

normal：默认值，主要通过浏览器默认设置时行解析，一般情况下，normal值相当于1em。
<length>：由浮点数字和单位标识符组成的长度值，主要用来设置列与列之间的距离，常用px、em单位的任何整数值，其值不能为负值。
column-gap可以用来改变相邻列之间距离，但在多列元素同时设置了column-width时，column-gap与column-width等参数之和大于多列元素总宽度时，会导致列被撑破，并将以当前列数减1的列数显示，此时列宽自动调节到适当的列宽。

column-rule属性主要是用来定义列与列之间的边框宽度、边框样式和边框颜色，有些类似于常用的border属性，但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>

column-rule-width：类似于border-width属性，主要用来定义列边框的宽度，其默认值为medium，该属性接受任意浮点数，但不接受负值。像border-width属性一样，可以使用款见此medium、thick和thin。
column-rule-style：此值类似于border-style属性，主要用来定义列边框样式，其默认值为none。该属性值与border-style属性值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color：此值类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。该属性接受所有的颜色。如果不希望显示颜色，也可以将其值设置为transparent（透明色）。
column-rule-width增大并不会影响列的布局，其不占有任何空间位置。
column-rule在Z轴上是介于background和content之间，当column-rule-width宽度增加到超过列与列的间距时，列边框就会自动消失。

column-span属性主要用来定义一个分列元素中的子元素能跨多少列，有时需要一段内容或一个标题不进行分列，也就是横跨所有列，就可以用该属性实现。
column-span: none | all