1,多列布局--columns:
column-width:列宽,如200px
column-count:列数,如5
column-gap:列之间的间距,如50px
column-rule:列之间的边框宽度,边框样式,边框颜色,如3px solid green,如下表
column-span:标题可以跨多列,设为all,默认值为none
属性值 属性值说明 column-rule-width 类似于border-width属性,主要用来定义列边框的宽度,其默认值为“medium”,column-rule-width属性接受任意浮点数,但不接收负值。但也像border-width属性一样,可以使用关键词:medium、thick和thin。 column-rule-style 类似于border-style属性,主要用来定义列边框样式,其默认值为“none”。column-rule-style属性值与border-style属值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent(透明色)
2,盒子模型--box-sizing:content-box(W3C盒子模型) | border-box(IE6以下模型) | inherit(跟随父元素模型)
W3C盒子模型:
外盒尺寸计算(元素空间尺寸) element空间高度=内容高度+内距+边框+外距 element空间宽度=内容宽度+内距+边框+外距 内盒尺寸计算(元素大小) element高度=内容高度+内距+边框(height为内容高度) element宽度=内容宽度+内距+边框(width为内容宽度)
IE传统下盒模型(IE6以下,不包含IE6版本或”QuirksMode下IE5.5+”)
外盒尺寸计算(元素空间尺寸) element空间高度=内容高度+外距(height包含了元素内容宽度、边框、内距) element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边框、内距) 内盒尺寸计算(元素大小) element高度=内容高度(height包含了元素内容宽度、边框、内距) element宽度=内容宽度(width包含了元素内容宽度、边框、内距)
3,伸缩布局--Flexbox:
#test{ display: -webkit-flex; display: flex; /*创建flex容器,其子元素为伸缩布局*/ -webkit-flex-direction: column; flex-direction: column; /*改为列显示(垂直排),默认为行显示(row水平排)*/ -webkit-align-items: flex-start; align-items: flex-start;/*将元素移动到顶部(视布局而定,此处是列),行显示的话是justify-content设置为flex-start*/ }
align-items | justify-content:左上(flex-start),右上(flex-end),水平垂直居中(center),