CSS自学笔记（16）:CSS3 用户界面

CSS3中，也新增了一些关于用户界面的属性，这些属性可以重设元素或者盒子的尺寸、轮廓等等。

新增的部分属性的浏览器支持情况

属性	浏览器支持
resize	IE	Firefox	Chrome	Safari	~~Opera~~
box-sizing	IE	Firefox(-moz-)	Chrome	Safari	Opera
outline-offset	IE	Firefox	Chrome	Safari	Opera

注：

目前的主流浏览器对新增的属性的支持效果不是很理想，定义这些属性时要特别注意。

新增的属性以及描述：

属性	描述
appearance	改变元素的外观等
box-sizing	允许某一种方式定义适应某个区域的具体内容。
icon	为创作者提供使用图标化等价物来设置元素样式的能力(目前浏览器都不支持)
nav-down	在使用 arrow-down 导航键时向何处导航。
nav-index	定义元素的 tab 键控制次序。
nav-left	在使用 arrow-left 导航键时向何处导航。
nav-right	在使用 arrow-right 导航键时向何处导航。
nav-up	在使用 arrow-up 导航键时向何处导航。
outline-offset	对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize	是否可由用户对元素的尺寸进行调整。

定义resize属性后，元素的元素的大小就可以有用户进行调整，格式为：

  resize: none|both|horizontal|vertical;

注：none是用户无法调整元素的大小，both是用户可以调整元素的高宽，horizontal是用户可以调整元素的宽度，vertical是用户可以调整元素的高度。

用户可以自己调整大小

box-sizing属性主要是为了解决在IE6以前版本的浏览器对盒子的高宽解析包括border和padding，而其他浏览器解析盒子的高宽时不包括border和padding的问题。

定义box-sizing格式：

    box-sizing: content-box|border-box|inherit;

box-sizing各个属性值的意义：

值	描述	事例
content-box	标准盒子属性，元素的宽度=width + border + padding，即padding和border不被包含在定义的width和height之内。	*{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
border-box	怪异盒子属性，元素的宽度=width，即padding和border被包含在定义的width和height之内。	*{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
inherit	从父元素继承 box-sizing 属性的值。

border-box属性值的效果：

左半部分

右半部分

而同样的CSS样式代码，将box-sizing的属性定义为content-box的效果：

左半部分

右半部分

outline-offset是设置或检索对象外的线条轮廓偏移容器的值，格式为：

    outline-offset: <length>|inherit;

<length>：用长度值来定义轮廓偏移，且允许负值。

inherit：从父元素继承 outline-offset 属性的值。

    *{width:220px;padding:10px;outline:1px dashed #333;outline-offset:4px;border:3px solid #333;}

转载于:https://www.cnblogs.com/lonzhe/p/3935112.html

CSS自学笔记（16）:CSS3 用户界面相关推荐

CSS自学笔记（15）:CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性浏览器支持 column ...
CSS自学笔记（9）:CSS拓展（二）
CSS图片当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我 ...
狂神css视频笔记16课
16 - 圆角边框及阴影和经验分享第一点:圆角边框的格则第二点:画圆圈第三点:好玩的图形这个是可以玩一玩的. 第四点:头像头像一般都是圆乎乎的. 这是一个正方形的图片. 用这个玩意比用PS更 ...
CSS 自学笔记（三）
一. CSS的三大特性 1. 层叠性:主要解决样式冲突问题. 样式冲突:执行就近原则,也可以看作会覆盖. 2. 继承性:子标签会继承父标签里的某些样式如文本颜色,字号,跟文字相关的. 行高的继承:行 ...
HTML+CSS自学笔记
type= " text/css " rel= "stylesheet" href= "lounge.css" media="sc ...
老男孩python全栈开发视频教程_老男孩Python全栈开发（92天全）视频教程自学笔记16...
day16课程内容: 装饰器: def outer(): x=10 def inner(): print(x) return inner outer()() #inner 是局部变量,10 闭包:如果 ...
HTML+CSS个人笔记
HTML+CSS个人笔记 HTML(Hyper Text Markup Language) 浏览器什么是浏览器内核? 浏览器所采用的渲染引擎("Rendering Engine" ...
爆肝！css复习笔记（有目录！）
爆肝!css复习笔记 1.基础选择器:标签选择器.类选择器.id 选择器和通配符选择器 2.css字体属性 font-family font-size字体大小 font-weight字体的粗细 fon ...
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结弹性 ...

CSS自学笔记（16）:CSS3 用户界面

CSS自学笔记（16）:CSS3 用户界面相关推荐

最新文章

热门文章