谈谈 CSS 关键字 initial、inherit 和 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值。
通常的回答是 static
、relative
、absolute
和 fixed
。当然,还有一个极少人了解的 sticky
。其实,除此之外, CSS 属性通常还可以设置下面几个值:
- initial
- inherit
- unset
- revert
{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 上通过这个索引查找,判断一个属性的是否继承特性。
可继承属性
最后罗列一下默认为 inherited: Yes 的属性:
- 字体系列属性
font
: 组合字体
font-family
: 规定元素的字体系列
font-weight
: 设置字体的粗细
font-size
: 设置字体的尺寸
font-style
: 定义字体的风格
font-variant
: 偏大或偏小的字体 - 文本系列属性
text-indent
: 文本缩进
text-align
: 文本水平对刘
line-height
: 行高
word-spacing
: 增加或减少单词间的空白
letter-spacing
:增加或减少字符间的空白
text-transform
: 控制文本大小写
direction
: 规定文本的书写方向
color
: 文本颜色 - 元素可见性
visibility
- 表格布局属性
caption-side
定位表格标题位置
border-collapse
合并表格边框
border-spacing
设置相邻单元格的边框间的距离
empty-cells
单元格的边框的出现与消失
table-layout
表格的宽度由什么决定<automatic.fixed.inherit> - 列表布局属性
list-style-type
文字前面的小点点样式
list-style-position
小点点位置
list-style
以上的属性可通过这属性集合 - 引用
quotes
设置嵌套引用的引号类型 - 光标属性
cursor
: 箭头可以变成需要的形状
unset
名如其意,unset 关键字我们可以简单理解为不设置。其实,它是关键字 initial
和inherit
的组合。
什么意思呢?也就是当我们给一个 CSS 属性设置了 unset 的话:
- 如果该属性是默认继承属性,该值等同于 inherit
- 如果该属性是非继承属性,该值等同于 initial
举个例子,根据上面列举的 CSS 中默认继承父级样式的属性,选取一个,再选取一个不可继承样式:
- 选取一个可继承样式: color
- 选取一个不可继承样式: border
看看下面这个简单的结构:
<div class="father"><div class="children">子级元素一</div><div class="children unset">子级元素二</div>
</div>
<style type="text/css">
.father {color: red;border: 1px solid black;
}
.children {color: green;border: 1px solid blue;
}
.unset {color: unset;border: unset;
}
</style>
展示结果:
- 由于 color 是可继承样式,设置了 color: unset 的元素,最终表现为了父级的颜色 red。
- 由于 border 是不可继承样式,设置了 border: unset 的元素,最终表现为 border: initial ,也就是默认 border 样式,无边框。
谈谈 CSS 关键字 initial、inherit 和 unset相关推荐
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS 关键字 initial、inherit 和 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...
- CSS样式关键字initial、inherit、unset、revert和all
在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始).inherit(继承).unset(未设置).revert(还原).而all的取值只能是以上这4个关键字.本文将 ...
- CSS 中的 initial、inherit、unset、revert、all
在css中,initial(初始).inherit(继承).unset(未设置).revert(还原)这四个关键字可以应用于所有的CSS属性 initial - 初始默认值.(IE不支持) inher ...
- [css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解
[css] 说下你对css样式的这几个属性值initial.inherit.unset.revert的理解 initial(初始).inherit(继承).unset(未设置).revert(还原) ...
- initial、inherit、unset、revert和all
前面的话 在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始).inherit(继承).unset(未设置).revert(还原).而all的取值只能是以上这4个关键 ...
- initial、inherit、unset、revert和all的区别
initial 表示元素属性的初始默认值(该默认值由官方CSS规范定义) 示例 <p><span>This text is red.</span><em> ...
- CSS关键字 unset
CSS关键字 unset 可以分为两种情况: 如果这个属性本来有从父级继承的值(这个属性默认可以继承,且父级有定义),则将该属性重新设置为继承的值,换句话说,这种情况下(继承属性)它的行为类似于inh ...
- inital,inherit,unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed . 当然,还有一个极少人了解的 sticky 其 ...
最新文章
- 提高Python运行效率的6大技巧!
- 深度解析HashMap
- matlab中怎么求矩阵的特征值和特征向量
- 弹性地基梁板实用计算_强夯地基承载力原理及测试方法
- python学习之路基础篇(第八篇)
- Linus:我们都老了,但Linux维护后继无人
- 爬table数据_爬取NBA球员薪资数据【Python数据分析百例连载】
- ssh全屏退出的办法
- 项目管理(二)责任划分
- 广州科二化龙考场_广州市机动车驾驶人化龙考场交通路线攻略
- T141基于51单片机出租车计费器公里计数,Proteus设计,keil程序、课题设计
- 计算机专业轻薄本还是游戏本,十大精品笔记本电脑(高端轻薄本和高端游戏本)...
- 文件上传到云服务器对象存储oos流程
- AipOcr百度文字识别API Key和Secret Key申请及应用例子说明
- 看《大话西游》,你哭了么
- Mac Eclips安装Activiti Designer插件
- AliExpress绑定万事达虚拟信用卡(Mastercard)测试实操教程
- velocity 将字符串切割按每隔3位加逗号,map集合遍历,字符串拼接,
- proc oracle12c,Oracle12cRAC安装遭遇CLSRSC-507: The root script cannot proceed on this node
- TA-Lib介绍安装及使用教程