CSS3 多列

1多列

创建多个列来对文本进行布局 - 就像报纸那样

1-1 创建多列

column-count 属性规定元素应该被分隔的列数

.div1 {

  height: 500px;

  width: 500px;

  margin: 50px

}

.div2 { column-count: 3 }

p { text-indent: 2em }

运行效果：

1-2 规定列之间的间隔

column-gap 属性规定列之间的间隔

.div2 {

  column-count: 3;

  column-gap: 50px

}

运行效果

1-3 列规则

column-rule 属性设置列之间的宽度、样式和颜色规则

.div2 {

column-count: 3;

column-rule: 5px solid #F00

}

运行效果：

1-4 新的多列属性

column-count 规定元素应该被分隔的列数。

column-gap 规定列之间的间隔。

column-rule 设置所有 column-rule-* 属性的简写属性。

column-rule-color 规定列之间规则的颜色。

column-rule-style 规定列之间规则的样式。

column-rule-width 规定列之间规则的宽度。

column-span 规定元素应该横跨的列数。

column-width 规定列的宽度。

columns 规定设置 column-width 和 column-count 的简写属性。

2 用户界面

2-1 resize

resize 属性规定是否可由用户调整元素尺寸。

.div1 {

  width: 300px;

  border: 3px solid;

  resize: both;

  overflow: auto

}

运行效果：

2-2 box-sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

.div2 {

  width: 500px;

  border: 5px solid

}

p {

  box-sizing: border-box;

  float: left;

  width: 50%;

  border: 5px solid red

}

运行效果

2-3 outline-offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

  一，轮廓不占用空间

  二，轮廓可能是非矩形

.div2 {

  width: 300px;

  height: 200px;

  border: 3px solid;

  padding: 20px;

  margin: 20px;

  outline: 2px solid red;

  outline-offset: 15px

}

运行效果：

2-4 新的用户界面属性

appearance 允许您将元素设置为标准用户界面元素的外观 

box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 

nav-down 规定在使用 arrow-down 导航键时向何处导航。 

nav-index 设置元素的 tab 键控制次序。 

nav-left 规定在使用 arrow-left 导航键时向何处导航。 

nav-right 规定在使用 arrow-right 导航键时向何处导航。 

nav-up 规定在使用 arrow-up 导航键时向何处导航。 

outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 

resize 规定是否可由用户对元素的尺寸进行调整。