【前言】在 CSS3 中,增加了一些新的用户界面特性来调整元素尺寸、框尺寸、外边框等,本节来依次介绍下。
【内容】
主要介绍以下的用户界面属性
浏览器支持,如下图所示
resize属性规定用户是否可以调整元素尺寸,常用属性值如下
注意:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll
resize开发严谨兼容写法:
在日常开发里,如果代码严谨要求度较高,最好依次加上浏览器兼容前缀,例如通过resize属性,让文本域可以沿水平方向拖大。代码为:
resize常见应用场景:
去除文本域textarea自带样式
语法:outline:none;
box-sizing 属性允许以确切的方式定义适应某个区域的具体内容,通俗理解就是定义盒子模型。
浏览器兼容:
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
box-sizing属性
分类:盒子模型分为标准盒模型和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
案例:设置普通元素轮廓线
由效果图可以得出外轮廓线不占用网页布局空间。
案例:设置表单元素轮廓线正确写法
这里需要结合CSS3的焦点聚焦选择器:focus
:focus 选择器用于选取获得焦点的元素,接收键盘事件或其他用户输入的元素都允许 :focus 选择器
重点属性outline-offset:
简介:outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓