CSS自学笔记(16):CSS3 用户界面

CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸、轮廓等等。

新增的部分属性的浏览器支持情况

属性 浏览器支持
resize IE Firefox Chrome Safari Opera
box-sizing IE Firefox(-moz-) Chrome Safari Opera
outline-offset IE 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; }
CSS自学笔记(16):CSS3 用户界面
border-box 怪异盒子属性,元素的宽度=width,即padding和border被包含在定义的width和height之内。 *{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
CSS自学笔记(16):CSS3 用户界面
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;}

CSS自学笔记(16):CSS3 用户界面

上一篇:OFBIZ bug_create-component ERROR


下一篇:tcp连接是基于socket通信的吗