CSS3-多列布局+resize+box-sizing+outline讲解

css3多列

通过 CSS3，能够创建多个列来对文本进行布局 - 就像报纸那样

Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

涉及相关属性

column-count 分列的数量

column-gap 分列间的距离

column-width分列的宽度

column-span垮列的个数

column-rule 分列线的显示效果 没有顺序关系

column-rule-style 分列线的样式如 dotted dashed solid等

column-rule-color 分列线的颜色

column-rule-width 分列线的宽度

column-fill规定如何对列进行填充

balance

auto

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

resize

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

语法 

resize: none|both|horizontal|vertical; 

Firefox 4+、Chrome 以及 Safari 不支持 resize。

none 用户无法调整元素的尺寸。

both 用户可调整元素的高度和宽度。

horizontal 用户可调整元素的宽度。

vertical 用户可调整元素的高度。

如果想对textarea设置不可调整大小可以用这个。

box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素 

浏览器支持 

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 

Firefox 支持替代的 -moz-box-sizing 属性。 

Safari 支持替代的 -webkit-box-sizing 属性 

语法: 

box-sizing: content-box|border-box|inherit;

content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。这是盒模型的默认值。即可视区域等于border+padding+width或height

border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

outline

outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框 

边缘的外围偏移，可起到突出元素的作用 

浏览器支持 

所有主流浏览器都支持 outline 属性，除了 Internet Explorer。 

语法：outline：[outline-color] || [outline-style] || [outline-width] ||[outline-offset] | inherit

<outline-color>： 指定轮廓边框颜色。
<outline-style>： 指定轮廓边框轮廓。
<outline-width>： 指定轮廓边框宽度。
<outline-offset>： 指定轮廓边框偏移位置的数值。

outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。轮廓不占用空间

浏览器支持

所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。 

语法

outline-offset: length|inherit;

length 轮廓与边框边缘的距离。

inherit 规定应从父元素继承 outline-offset 属性的值。