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 规定是否可由用户对元素的尺寸进行调整。
