css3.0学习用户界面 User-interface

<网f站o学a习s制p作.cn>
原载于:转www.载for网站制作学习asp必.cn究
第四节 用户界面 User-interface

1.box-sizing

语法：
box-sizing:content-box|border-box|inherit
相关属性:无

取值：
content-box:此值维持css2.1盒模型的组成模式，border|padding|content{element width=border+padding+content}
border-box:此值改变css2.1盒模型组成模式，content|border|padding{element width=content}www-fo-a-sp.cn

说明：
改变容器的盒模型组成方式
引擎类型：Box-sizing
Gecko:-moz-box-sizing
Webkit:-webkit-box-sizing
Presto:-o-box-sizing/box-sizing
Internet Explorer:-ms-box-sizing

兼容性：
IE8,Firefox2.0,Firefox3.0,Firefox3.5,chrome1.0,chrome2.0，opera9.63,Safari3.1,Safari4支持

代码示例：
<div style="width:38em;border:0.8em solid rgb(170, 170, 170);height:42px;">
<div style="box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-icab-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:50%;border:0.8em ridge #FBFBF9;float:left;">这里是盒子宽度的一半。</div>
<div style="box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-icab-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:50%;border:0.8em ridge #FBFBF9;float:left;">这里是盒子宽度的另一半。</div>
</div>




2.resize

语法：
resize:none|both|horizontal|vertical|inherit
相关属性:N/A

取值：
none:UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸
both:UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度
horizontal:UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度
vertical:UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度www-fo-a-sp.cn
inherit:默认继承

说明：
使元素的区域可伸缩，调节元素尺寸大小，适用于任意获得"overflow"条件的容器

兼容性：
chrome1.0,chrome2.0，Safari3.1,Safari4支持

代码示例：
<div style="width:300px;height:80px;padding:16px;border:1px solid;resize:both;overflow: auto;">Safari、Chrome允许元素的缩放的,但尚未完全支持，目前只允许双向调整。CSS3允许你将这个属性应用到任意元素，这将使缩放这个功能拥有跨浏览器的支持。</div>www-fo-a-sp.cn




3.out-line

语法：
outline:[outline-color]|[outline-style]|[outline-width]|[outline-offset]|inherit
相关属性:outline-style,outline-width,outline-offset,outline-color

取值：
<outline-color>:指定轮廓边框颜色，参见outline-color
<outline-style>:指定轮廓边框轮廓，参见outline-style
<outline-width>:指定轮廓边框宽度，参见outline-width
<outline-offset>:指定轮廓边框偏移位置的数值，参见outline-offset
inherit:默认

说明：
outline(轮廓)是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用
outline属性可设置元素周围的轮廓线，轮廓线不会占据空间，也不一定是矩形www-fo-a-sp.cn
outline属性是一个简写属性，用于设置元素周围的轮廓线

兼容性：
IE8,Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持www-fo-a-sp.cn

代码示例：
<div style="width: 160px;padding: 10px;height: 30px;border: 2px solid black;outline-color:#897048;outline-style:groove;outline-width:2px;outline-offset: 5px;">这绘制的是一个轮廓边框</div>
原载于:网f站o学a习s制p作.cn
http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E