CSS自学笔记（16）:CSS3 用户界面
浏览数：23 /
时间：2015年06月09日
CSS3中，也新增了一些关于用户界面的属性，这些属性可以重设元素或者盒子的尺寸、轮廓等等。
新增的部分属性的浏览器支持情况
| 属性 | 浏览器支持 | ||||
|---|---|---|---|---|---|
| resize | Firefox | Chrome | Safari | ||
| box-sizing | IE | Firefox(-moz-) | Chrome | Safari | Opera |
| outline-offset | Firefox | Chrome | Safari | Opera | |
注：
- 目前的主流浏览器对新增的属性的支持效果不是很理想，定义这些属性时要特别注意。
新增的属性以及描述：
| 属性 | 描述 |
|---|---|
| appearance | 改变元素的外观等 |
| box-sizing | 允许某一种方式定义适应某个区域的具体内容。 |
| icon | 为创作者提供使用图标化等价物来设置元素样式的能力(目前浏览器都不支持) |
| nav-down | 在使用 arrow-down 导航键时向何处导航。 |
| nav-index | 定义元素的 tab 键控制次序。 |
| nav-left | 在使用 arrow-left 导航键时向何处导航。 |
| nav-right | 在使用 arrow-right 导航键时向何处导航。 |
| nav-up | 在使用 arrow-up 导航键时向何处导航。 |
| outline-offset | 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 |
| resize | 是否可由用户对元素的尺寸进行调整。 |
定义resize属性后，元素的元素的大小就可以有用户进行调整，格式为：
resize: none|both|horizontal|vertical;
注：none是用户无法调整元素的大小，both是用户可以调整元素的高宽，horizontal是用户可以调整元素的宽度，vertical是用户可以调整元素的高度。
用户可以自己调整大小
box-sizing属性主要是为了解决在IE6以前版本的浏览器对盒子的高宽解析包括border和padding，而其他浏览器解析盒子的高宽时不包括border和padding的问题。
定义box-sizing格式：
box-sizing: content-box|border-box|inherit;
box-sizing各个属性值的意义：
| 值 | 描述 | 事例 |
|---|---|---|
| content-box | 标准盒子属性，元素的宽度=width + border + padding，即padding和border不被包含在定义的width和height之内。 | *{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; } |
| border-box | 怪异盒子属性，元素的宽度=width，即padding和border被包含在定义的width和height之内。 | *{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; } |
| inherit | 从父元素继承 box-sizing 属性的值。 |
border-box属性值的效果：
左半部分
右半部分
而同样的CSS样式代码，将box-sizing的属性定义为content-box的效果：
左半部分
右半部分
outline-offset是设置或检索对象外的线条轮廓偏移容器的值，格式为：
outline-offset: <length>|inherit;
<length>： 用长度值来定义轮廓偏移，且允许负值 。
inherit：从父元素继承 outline-offset 属性的值。
*{width:220px;padding:10px;outline:1px dashed #333;outline-offset:4px;border:3px solid #333;}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
