CSS3学习之User Interface

• CSS3 User Interface
• CSS3 Box Sizing

CSS3增加了几个用户界面相关的特性，下面表格中列举了这几个属性及浏览器兼容情况：

Property	Chrome	IE	Firefox	Safari	Opera
resize	4.0	Not supported	5.0 4.0 -moz-	4.0	15.0
outline-offset	4.0	Not supported	5.0 4.0 -moz-	4.0	9.5
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5
appearance	4.0 -webkit-	Not supported	2.0 -moz-	3.1 -webkit-	15.0 -webkit-

appearance在测试时表现很怪，w3schools上该属性页面标题改为 REMOVED FROM CSS3，不知何因

resize

resize 属性设置一个元素是否允许用户调整其大小，默认值是 none，表示不允许调整大小；其可取的值如下所示：

属性值	说明
none	默认值，不允许用户调整元素大小
both	允许用户同时调整元素的宽度和高度
horizontal	只允许用户调整元素的宽度
vertical	只允许用户调整元素的高度

注意：resize 属性只能用于元素的 overflow 属性不是 visible 的情况下

1) resize 属性设置为 horizontal 后，只允许用户调整元素的宽度

.resize-demo-1 {
    overflow: auto;
    resize: horizontal; 
}

Let the user resize the width of this div element.

2) resize 属性设置为 both 后，允许用户调整元素的宽度和高度

.resize-demo-2 {
    overflow: auto;
    resize: both;
}

Let the user resize the width and height of this div element.

3) 不再设置 overflow 属性时，overflow 属性取默认值 visible ，这时即使设置了 resize 属性，也没效果，元素仍然无法调整大小

.resize-demo-3 {
    resize: both;
}

Let the user resize the width and height of this div element, but overflow is visible.

outline-offset

An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.

关于 outline（轮廓） 的相关知识不是本文的重点，可以参考这里：CSS Outline

outline-offset 属性可以在元素边缘或边框与轮廓之间添加间距，接受一个长度值，默认值是0，表示元素边框与元素轮廓没有距离，即元素边框的边缘与轮廓是一致的。

轮廓与边框的不同之处有以下三点：

• 轮廓是围绕元素的一条线，位于边框边缘的外边
• 轮廓并不占用空间
• 轮廓并不一定是矩形的

从下面的示例可以看出，轮廓位于元素边框的外面，没有占用空间，而且 按照 outline-offset 属性的指示向外偏移了15px

.outline-offset-demo {
    padding: 10px;
    width: 300px; 
    height: 100px;
    border: 1px solid green;
    outline: 1px dashed red;
    outline-offset: 15px;
}

元素与轮廓间有15px的距离

box-sizing

box-sizing 属性允许我们将元素的边框（border）和内边距（padding）包含进元素总的宽（width）和高（height），该属性可以设置为以下两个值：

• content-box：默认值，元素的边框和内边距不计入元素的宽度和高度
• border-box：元素的边框和内边距计入元素的宽度和高度

下面用一个示例来说明两种情况的区别，其实非常简单：

<div class="box-sizing-box">box-sizing: content-box;</div>
<div class="box-sizing-box box-sizing-demo-1">box-sizing: border-box;</div>

.box-sizing-box {
    width: 300px;
    height: 100px;
    color: white;
    border: 10px solid blue;
    padding: 10px;
    background-color: red;
}
.box-sizing-demo-1 {
    box-sizing: border-box;
    background-color: green;
    margin-top: 4px;
}

box-sizing: content-box;

box-sizing: border-box;

上面的示例中两个元素都指定为300px * 100px的尺寸，但由于设置了不同的 box-sizing 属性值，产生了不一样的表现，下面分析一下原因。

第一个元素的 box-sizing 属性取的是默认值 content-box，元素的边框和内边距不计入元素的宽高，也就是说该元素的边框和内边距需要另外申请空间；因此第一个元素实际内容的尺寸是300px * 100px，加上边框和内边距后元素的真实尺寸是340px * 140px。

第二个元素由于 box-sizing 属性取的是默认值 border-box，元素的边框和内边距是要计入元素宽高的，也就是边框和内边距的尺寸也要从元素宽高里面出，那么其大小就固定是300px * 100px，但由于边框和内边距的存在，其内容区域实际上被压缩了，变成260px * 60px。

appearance

经测试，该属性大部分值都不起作用，原因不明；而且在Firefox下连 button 值也没效果，在 w3schools 上该属性页面的标题被改为 REMOVED FROM CSS3，不知道是什么情况，暂时不关心了

appearance 属性用来改变元素的默认表现样式，其默认值为 normal，也就是元素的常规样式，我们在页面上看到样子。

参考：CSS3 appearance Property

appearance 属性可设置的值如下表所示：

属性值	说明
normal	默认值，将元素呈现为常规元素
icon	将元素显示为图标（小图片）的样子
window	将元素显示为视口（viewport）的样子
button	将元素显示为按钮
menu	将元素渲染为供用户选择的选项集合
field	将元素显示为输入域

.appearance-demo {
    appearance: button;
    -webkit-appearance: button;
    -moz-appearance: button;
}

我是个段落

我是个DIV