CSS3 用户界面
CSS3 用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
在本章中，您将了解以下的用户界面属性：
- resize
- box-sizing
- outline-offset
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | Chrome | Edge | Firefox | Safri | Opera |
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
| outline-offset | 4.0 | 15.0 | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 调整尺寸(Resizing)
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。
CSS代码如下：
div {
resize:both;
overflow:auto;
}CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
规定两个并排的带边框方框：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}CSS3 外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
- 轮廓不占用空间
- 轮廓可能是非矩形
CSS 代码如下:
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}新的用户界面特性
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
| box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
| icon | 为创作者提供了将元素设置为图标等价物的能力。 | 3 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
| nav-index | 指定一个元素的Tab的顺序 | 3 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
| outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
| resize | 指定一个元素是否是由用户调整大小 | 3 |
resize 属性，规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 <textarea></textarea> 文本域标签。
可以说 <textarea> 标签自带 resize: both；所以可以通过设置 resize: none; 来禁止 <textarea> 的尺寸被拉伸。
但是，值得注意的是溢出形式的设置：
- 当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；
- 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；
- 当 overflow: auto; 时，仅尺寸小于内容显示时，才会出现滚动条，可以说，这是最美观的设置（<textarea> 也是自带此属性）；
outline-offset 属性用来设置轮廓（外边框）与边框（内边框）之间的间隔，或 “填充”，默认情况下，轮廓是紧贴着边框的，所以需要通过该属性来使它们分开。
outline 不会破坏元素宽高，同样的 outline-offset 设置的间隔，也不会影响元素的宽高。
box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。
content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。
（别的属性是越标准越好用，但这个属性却是反向向IE标准的）
而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。
例子：
<div class="clearfix">
<h3>想要实现的效果</h3>
<div class="container">
<div class="box left"></div>
<div class="box right"></div>
</div>
</div>
<hr />
<div class="clearfix">
<h3>默认标准盒模型，添加边框、填充后的效果</h3>
<div class="container">
<div class="box left content-box"></div>
<div class="box right content-box"></div>
</div>
<!-- 实现效果则需改 width = 400px - 5px*2 - 10px*2 = 370px -->
</div>
<hr />
<div class="clearfix">
<h3>设置border-box后，添加边框、填充后的效果</h3>
<div class="container">
<div class="box left border-box"></div>
<div class="box right border-box"></div>
</div>
</div>手机扫码阅读本文
本文来自互联网，本网站转载的目的在于传递更多信息以供访问者学习参考，所属内容只代表原作者的个人观点，不代表本网站的立场和价值判断，版权归原作者所有。如有侵犯您的版权，请联系我们，我们收到后会尽快核实并第一时间改正。
