CSS3--增强用户界面

淡淡的烟草味﹌ 2024-04-19 12:39 52阅读 0赞

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

# 常见的用户界面属性 #

**浏览器支持，如下图所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

## 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*/ 
    		}

![在这里插入图片描述][20190918141902374.png]  
**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- 前的数字为支持该前缀属性的第一个浏览器版本号  
![在这里插入图片描述][20190918192556196.png]  
**分类**：盒子模型分为标准盒模型和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）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

案例：

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3968ce68afe944768198a313971bf0aa.png
[20190918141902374.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ad84eb7f0f4b4c438485713ba3ab6b58.png
[20190918192556196.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5d95cc8fb3c842138698f66e70d4921e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b49a14c9b0ee4202ad5ef5a84d68932c.png