ie不支持,谷歌火狐支持,safari9+支持,移动端高版本支持

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。

我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit!

我们CSS reset输入框的时候,是不是有类似这样的代码(实际可能是具体值,作用类似):

input, textarea {
color: inherit;
font-size: inherit;
font-family: inherit;
}

因为这类输入控件自身有内置的大小和字体,需要重置。

此时,大家就会发现,这些属性值都是inherit, 要是可以合并就好了!

哟哟哟,说到点子上了,CSS all属性就是用来合并的。

input, textarea {
all: inherit;
}

喔噢,三合一,顿时一阵春风拂面之感。但是,这里仅仅是展示作用,实际上是不会这么用的,因为,all:inherit会让背景色什么的,都继承父级,相信这不是你希望看到的。

    • initial

      initial是初始值的意思,也就是,article元素下面所有的第一级子元素都除了unicode-bididirection以外的CSS都使用初始值。

      例如,<h6><p>元素浏览器内置的display:block直接拜拜了,都变成了inline元素,因此在一行显示:

      font-size也使用了浏览器软件本身设置的大小16pxcolor颜色也变成了浏览器软件本身的黑色。例如,在浏览器设置中改变字号,从中变成大:

      会看到显示的文字内容也变大了:

      由于我们只是对相邻层级子元素进行了initial设置,因此,<li>元素不受影响,但是,由于在父元素不明的情况下,<li>元素的默认是打点,因此,这里从数字变成了点,list-style-typelist-style-position都变化了。

    • inherit

      inherit是继承的意思,也就是,article元素下面所有的相邻子元素都除了unicode-bididirection以外的CSS都继承了<article>元素的CSS。

      因此,<h6><p>元素还是块状的,background-color都是<article>元素的背景色,color颜色也跟<article>一样,是绿色(文本域的红色被干掉了)。

      不仅上面这些CSS,padding/margin也都继承了,只是默认是0, 看不出来,我们稍微修改下,例如给<article>元素来个margin值:

      结果,那些子元素都开花了:

    • unset

      unset是取消设置的意思,也就是,article元素下面所有的相邻子元素除了unicode-bididirection以外的CSS都干掉都不要,不要了那用什么呢?unset值的特性如下,当前元素浏览器或用户设置的CSS忽略,然后如果是具有继承特性的CSS,如color, 则使用继承值;如果是没有继承特性的CSS属性,如background-color, 则使用初始值。

      因此,<h6><p>元素的display属性值使用了initial初始值,因此变成了inline元素,两个同一行显示了;而这些元素的color颜色使用了inherit继承值,因此都是绿色,<textarea>的背景色background-color不具有继承特性,因此使用的是initial初始值,也就是transparent透明,因此,就是截图所示效果。

    demo:

    input输入框外面一个div,来个input{all:inherit;},貌似还真有这样的场景,输入框不需要border不需要background不需要padding不需要margin, 这样input继承div的所有的样式

来自:http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/

css3 all属性的更多相关文章

  1. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  2. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  3. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  4. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  5. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  6. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  7. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  8. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  10. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

随机推荐

  1. CodeForces 444C 节点更新求变化值的和

    http://vjudge.net/problem/viewProblem.action?id=51622 题目大意: 给定一列n个数字,最初赋予值1到n 两个操作:1.将区间[l,r]内的数改为x, ...

  2. HDU 2222 最简单的AC自动机套模板应用

    HDU 2222 题意:给出N(N<=10,000)个单词,每个单词长度不超过50.再给出一个字符串S,字符串长度不超过1,000,000.问有多少个单词出现在了字符串S中.(单词可能重复,单词 ...

  3. 反编译sencha toucha打包的apk文件,修改应用名称支持中文以及去除应用标题栏

    一.去除安卓应用标题栏 sencha touch打包android安装包,去掉标题栏titlebar的简单方法 (有更复杂更好的方法,参看"二.利用反编译修改apk的应用名称为中文" ...

  4. JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)

    有时候我们在前台需要对序号进行处理,我们需要将JS变量写到页面中进行显示. 第一种方式:后台处理 第二种方式:JS中定义全局变量,然后进行显示,可以书写一个JS函数对不同的需要进行不同的替换,也就可以 ...

  5. Python中排序的灵活使用

    Python中列表按指定标准排序实例 概述 本题需要先输入机器的数目和任务的数目. 在接下来的n行中每行分别包含机器的最大执行时间和机器所能执行任务的最大强度. 在接下来的n行中每行分别包含任务执行时 ...

  6. 51nod 1499 (最小割)

    题意 分析 将一些点分成两个集合,很明显的最小割问题 设一个S.T,和S相连的点表示在B集合中,和T相连的点表示在A集合中 因为原题是完美值最大,我们转换一下,变成损失的价值最小,那么就是最小割问题了 ...

  7. QT程序--小工具集合

    这是在大一第一学期时写的参加程序设计大赛的作品,当时参加的时候仅仅只有贪吃蛇,迷宫算法和文件加密这三个功能,而且当时的界面并没有进行任何美化,现在想起来有点可惜.然而这并不是一个只写一遍的软件,在后期 ...

  8. 洛谷 P1731 [NOI1999]生日蛋糕

    P1731 [NOI1999]生日蛋糕 题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M ...

  9. 【SQL Server 学习系列】-- ConnectionTimeout、CommandTimeout和BulkCopyTimeout

    1. SqlConnection.ConnectionTimeout获取在尝试建立连接时终止尝试并生成错误之前所等待的时间.单位:秒默认值:15秒设置为0时,表示无限制 2. SqlCommand.C ...

  10. Excel小tips - 如何设置表格输入数字后末尾自动添加%

    选中一列——鼠标右键——设置单元格格式——数字——自定义——0% 按照以上操作完成后,点击确定,就大功告成了.