谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS
题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线
谈谈一些有趣的CSS题目(十一)-- reset.css知多少
谈谈一些有趣的CSS题目(十二)-- 深入探讨 CSS 特性检测 @supports 与 Modernizr
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
所有题目汇总在我的 Github 。
正文从这里开始。
经常会碰到,问一个 CSS 属性,例如 position
有多少取值。
通常的回答是 static
、relative
、absolute
和 fixed
。当然,还有一个极少人了解的 sticky
。其实,除此之外, CSS 属性通常还可以设置下面几个值:
initial
inherit
unset
revert
1
2
3
4
5
6
7
8
|
{ position : initial; position : inherit; position : unset /* CSS Cascading and Inheritance Level 4 */ position : revert; } |
了解 CSS 样式的 initial(默认)和 inherit(继承)以及 unset 是熟练使用 CSS 的关键。(当然由于 revert 未列入规范,本文暂且不过多提及。)
initial
initial
关键字用于设置 CSS 属性为它的默认值,可作用于任何 CSS 样式。(IE 不支持该关键字)
inherit
每一个 CSS 属性都有一个特性就是,这个属性必然是默认继承的 (inherited: Yes
) 或者是默认不继承的 (inherited: no
)其中之一,我们可以在 MDN 上通过这个索引查找,判断一个属性的是否继承特性。
譬如,以 background-color
为例,由下图所示,表明它并不会继承父元素的 background-color
:
可继承属性
最后罗列一下默认为 inherited: Yes
的属性:
- 所有元素可继承:visibility 和 cursor
- 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 块状元素可继承:text-indent和text-align
- 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承:border-collapse
还有一些 inherit 的妙用可以看看这里:谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit,合理的运用 inherit 可以让我们的 CSS 代码更加符合 DRY(Don‘’t Repeat Yourself )原则。
unset
名如其意,unset
关键字我们可以简单理解为不设置。其实,它是关键字 initial
和 inherit
的组合。
什么意思呢?也就是当我们给一个 CSS 属性设置了 unset
的话:
- 如果该属性是默认继承属性,该值等同于
inherit
- 如果该属性是非继承属性,该值等同于
initial
举个例子,先列举一些 CSS 中默认继承父级样式的属性:
- 部分可继承样式:
font-size
,font-family
,color
,text-indent
- 部分不可继承样式:
border
,padding
,margin
,width
,height
使用 unset
继承父级样式:
看看下面这个简单的结构:
1
2
3
4
|
< div class="father"> < div class="children">子级元素一</ div > < div class="children unset">子级元素二</ div > </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.father { color : red ; border : 1px solid black ; } .children { color : green ; border : 1px solid blue ; } .unset { color : unset; border : unset; } |
由于
color
是可继承样式,设置了color: unset
的元素,最终表现为了父级的颜色red
。由于
border
是不可继承样式,设置了border: unset
的元素,最终表现为border: initial
,也就是默认 border 样式,无边框。
unset
的一些妙用
例如下面这种情况,在我们的页面上有两个结构类似的 position: fixed
定位元素。
区别是其中一个是 top:0; left: 0;
,另一个是 top:0; right: 0;
。其他样式相同。
假设样式结构如下:
1
2
3
4
|
< div class="container"> < div class="left">fixed-left</ div > < div class="right">fixed-right</ div > </ div > |
通常而言,样式如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
. left , . right { position : fixed ; top : 0 ; ... } . left { left : 0 ; } . right { right : 0 ; } |
使用 unset 的方法:
1
2
3
4
5
6
7
8
9
10
11
|
. left , . right { position : fixed ; top : 0 ; left : 0 ; ... } . right { left : unset; right : 0 ; } |
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
谈谈 CSS 关键字 initial、inherit 和 unset的更多相关文章
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css样式关键字(initial,inherit,unset,revert,all)
关键字 在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始).inherit(继承).unset(未设置).revert(还原).而all的取值只能是以上这4个关键字 ...
- 写了这么多年 CSS,initial 和 inherit 以及 unset 和 revert 还傻傻分不清楚?
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个稍微生僻的 sticky .其实 ...
- css 中的 initial inherit unset 意思
写css时,在对属性进行选值,经常遇到unset , initial,inherit三个值.这几个值的含义. 1.inherit 可继承性 继承的意思. 每一个 CSS 属性都有一个特性就是,这个属性 ...
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 从倒影说起,谈谈 CSS 继承 inherit(转)
从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...
- initial、inherit、unset、revert和all
前面的话 在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始).inherit(继承).unset(未设置).revert(还原).而all的取值只能是以上这4个关键 ...
- 谈谈一些有趣的CSS题目-- 从倒影说起,谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...
- CSS关键字
1.initial initial 关键字用于设置 CSS 属性为它的默认值. initial 关键字可用于任何 HTML 元素上的任何 CSS 属性. 版本: CSS3 JavaScript 语法: ...
随机推荐
- 《gdb调试之基础篇》
<gdb调试之基础篇> http://blog.csdn.net/miss_acha/article/details/42346543
- 测试php单例模式和静态访问,实例化访问的效率
// 测试的类class Memory { private static $a= null; public function __construct() { return self::$a; } pu ...
- 如何测试一台主机的IP和端口是否能连通,ping telnet
通过ping 判断一台主机是否开机. 通过:telnet 121.199.167.99 61616 判断一台主机的端口是否能连通. 本机------本地防火墙-------本地路由器-------- ...
- Spring boot 集成hessian - LocalDateTime序列化和反序列化
- 反序列化 import com.caucho.hessian.HessianException; import com.caucho.hessian.io.AbstractDeserializer ...
- C# 实现动态添加列,新增合计行,求和
DataTable da = CommonBLL.GetList("*", "sys_dict", "IfState=1 and DictTypeId ...
- Linux 基础——ls 命令
第二天,继续学习Linux命令... 一.查看文件和目录列表的命令 ls:显示当前目录下的文件和目录,但是不会显示隐藏的文件和目录. ls -a:显示当前目录下的所有文件和目录. ls -l:显示当前 ...
- jquery键盘常见事件
一.在看jquery的时候有几个常见的键盘事件,我写在这里: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来 ...
- Project interpreter not specified(eclipse+pydev) (转)
[小记] 最近因为想配置Android的开发环境,把原来的MyEclipse5.5删了,下载了最新的Eclipse3.7版本,因为之前在进行Python开 发,就下载了最新的Pydev2.4版本,安装 ...
- hihoCoder #1831 : 80 Days-RMQ (ACM/ICPC 2018亚洲区预选赛北京赛站网络赛)
水道题目,比赛时线段树写挫了,忘了RMQ这个东西了(捞) #1831 : 80 Days 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 80 Days is an int ...
- thinkphp之url的seo优化
1.网站url做seo优化的原因 SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”.SEO是指通过对网站进行站内优化(网站结构调整.网站内容建设 ...