CSS3--增强用户界面

在CSS3中，增加了一些新用户界面特性来调整元素尺寸、框尺寸、外边框等（关键词：box-sizing、resize、outline-width、outline-style、outline-color、outline）

常见的用户界面属性

浏览器支持，如下图所示：

resize属性

resize属性规定用户是否可以调整元素尺寸，常用属性值如下：

1. none: 用户无法调整元素的尺寸
2. inherit: 继承父元素的resize属性值
3. both: 用户可调整元素的高度和宽度
4. horizontal: 用户仅仅可以调整元素的宽度
5. vertical: 用户仅仅可以调整元素的高度

注意：如果希望此属性除textarea以外的元素生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

resize开发严谨兼容写法：
在日常开发里，如果代码严谨要求度较高，最好依次加上浏览器兼容前缀，例如通过resize属性，让文本域可以沿水平方向拖大。代码为：

	textarea{
        resize:horizontal; /*默认写法*/
        -webkit-resize:horizontal; /*chrome、Safari、移动端浏览器*/
        -moz-resize:horizontal; /*火狐Firefox*/
        -o-resize:horizontal; /*欧朋Opera浏览器*/
        -ms-resize:horizontal;  /*IE浏览器*/
      }

resize案例：

<div class="demo">该div区域可以由用户自由调节尺寸</div>

	.demo{
			width: 200px;
			height: 200px;
			border: 1px solid gray;
			overflow: auto;
			/*overflow可以取值为hidden,auto,scroll*/
			resize: both;
			/*仅可调整宽度horizontal	仅可调整高度vertical*/ 
		}

resize常见应用场景：
除去文本域的自带样式，语法：outline:none;

box-sizing属性

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容，通俗理解就是定义盒子模型。常用属性值如下：

1. content-box：标准盒模型，默认值，这是 CSS2.1 指定的宽度和高度的行为
   元素实际宽度=内容宽度+padding+border
2. border-box：怪异盒模型，也叫IE盒模型，这是CSS3指定的宽度和高度的行为
   元素实际高度=指定的高度（padding和border计算在内）
3. inherit：从父元素继承

浏览器兼容：
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

分类：盒子模型分为标准盒模型和IE怪异盒模型
区别：标准盒模型的width和height就是content的宽高；而IE盒模型的width和height则是由content+padding+border组成。
开发写法：为了兼容不同的浏览器，我们通常使用box-sizing来将标准盒模型变为IE盒模型（反之也可以，只要统一标准就行）

outline属性

简介：
在一个声明中设置所有的轮廓属性，外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，属于一种动态样式，对于表单元素只有元素获取到焦点或被激活时呈现，如果在其他元素中设置，一般可起到突出元素的作用。
语法：

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
注意：外轮廓线不占用网页布局空间，此时再次聚焦时，输入框边框外侧10px出现轮廓线

outline外轮廓线集成属性（类似于border）

案例：

• 设置表单元素轮廓线正确写法 （需要结合CSS3的焦点聚焦选择器:focus）
• :focus 选择器用于选取获得焦点的元素，接收键盘事件或其他用户输入的元素都允许 :focus 选择器

	input[name="userName"]:focus{
        outline: 1px solid #ccc;
      }

重点属性outline-offset：
简介： outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
属性值：

1. length：轮廓与边框边缘的距离
2. inherit：规定应从父元素继承outline-offset属性的值