CSS自学笔记(16):CSS3 用户界面
CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸、轮廓等等。
新增的部分属性的浏览器支持情况
属性 | 浏览器支持 | ||||
---|---|---|---|---|---|
resize | Firefox | Chrome | Safari | ||
box-sizing | IE | Firefox(-moz-) | Chrome | Safari | Opera |
outline-offset | 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;}
CSS自学笔记(16):CSS3 用户界面的更多相关文章
- CSS自学笔记(10):CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- CSS自学笔记(13):CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- CSS自学笔记(15):CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性 浏览器支持 column ...
- CSS自学笔记(14):CSS3动画效果
在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...
- CSS自学笔记(12):CSS3文字特效
在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...
- CSS自学笔记(11):CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- CSS自学笔记(9):CSS拓展(二)
CSS图片 当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我 ...
- CSS自学笔记(3):CSS选择器
CSS中提供了非常丰富的选择器,但是由于浏览器的支持情况,很多选择器很少用到. 1.基础选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; ...
随机推荐
- R - 一只小蜜蜂...(第二季水)
Description 有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. ...
- ajax全局函数运用
- java.io.IOException: open failed: ENOENT (No such file or directory)open failed: EISDIR (Is a directory)
这一类的错误,原因一般有两点: 1.没有给相应读写文件权限 2.给了权限,但是文件的路径写的不对,比如少了“/”,这样就会报错了. Caused by: android.system.ErrnoExc ...
- HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>
网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...
- Flask把变量注册到模板中
使用python的Flask框架时,参考<Flask Web开发>一书时,发现书中可以在全局使用Permission.FOLLOW变量. 但是自己在尝试是,确提示变量没有定义.经过搜索,找 ...
- python学习day1
python简单介绍: Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为ABC 语言的一种 ...
- 在WPF中自定义你的绘制(一)
原文:在WPF中自定义你的绘制(一) 在WPF中自定义你的绘制(一) ...
- linux swap 分区调控(swap分区 lvm管理)
注:linux swap分区 采用lvm管理,调控可以采用下面的方法 一.查看 swap lv [root@testdb ~]# vgdisplay -v Finding all volume ...
- 纯CSS美化的checkbox 和 radio
html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...
- GetModuleHandle,AfxGetInstanceHandle使用区别
当一个文件被映射到调用进程的地址空间时,GetModuleHandle函数得到其中某一模块的句柄. 使用GetModuleHandle函数格式:HMODULE GetModuleHandle( LPC ...