CSS3 新用户界面属性

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

1. resize
2. box-sizing
3. outline-offset

CSS3 Resizing

默认值：none
继承：no
JavaScript 语法：object.style.resize=“both”

语法：resize: none|both|horizontal|vertical

none 用户无法调整元素的尺寸
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度
vertical 用户可调整元素的高度

CSS3 Box Sizing

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)

不使用 CSS3 box-sizing 属性:

默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)

默认值 content-box
继承性 no
JavaScript 语法： object.style.boxSizing=“border-box”

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

content-box: 这是由 CSS2.1 规定的宽度高度行为
宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
border-box ：为元素设定的宽度和高度决定了元素的边框盒
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit: 规定应从父元素继承 box-sizing 属性的值

CSS3 Outline Offset

属性定义及使用说明

outline-offset属性设置轮廓框架在 border 边缘外的偏移
Outlines在两个方面不同于边框：

1. Outlines 不占用空间
2. Outlines 可能非矩形

默认值：0
继承：no
JavaScript 语法：object.style.outlineOffset=“15px”*

语法：outline-offset: length|inherit:

length 轮廓与边框边缘的距离
inherit 规定应从父元素继承 outline-offset 属性的值