css 中的 initial inherit unset 意思
写css时,在对属性进行选值,经常遇到unset , initial,inherit三个值。这几个值的含义。
1.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 的妙用,合理的运用 inherit 可以让我们的 CSS 代码更加符合 DRY(Don‘’t Repeat Yourself )原则。
2.initial 默认值
关键字用于设置 CSS 属性为它的默认值,可作用于任何 CSS 样式。(IE 不支持该关键字)unset 无设置(不设置)
名如其意,
unset
关键字我们可以简单理解为不设置。其实,它是关键字initial
和inherit
的组合。什么意思呢?也就是当我们给一个 CSS 属性设置了
unset
的话:- 如果该属性是默认继承属性,该值等同于
inherit
- 如果该属性是非继承属性,该值等同于
initial
举个例子,先列举一些 CSS 中默认继承父级样式的属性:
- 部分可继承样式:
font-size
,font-family
,color
,text-indent
- 部分不可继承样式:
border
,padding
,margin
,width
,height
使用
unset
继承父级样式:看看下面这个简单的结构:
1234<
div
class="father">
<
div
class="children">子级元素一</
div
>
<
div
class="children unset">子级元素二</
div
>
</
div
>
1234567891011121314.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;
。其他样式相同。假设样式结构如下:
1234<
div
class="container">
<
div
class="left">fixed-left</
div
>
<
div
class="right">fixed-right</
div
>
</
div
>
通常而言,样式如下:
123456789101112.
left
,
.
right
{
position
:
fixed
;
top
:
0
;
...
}
.
left
{
left
:
0
;
}
.
right
{
right
:
0
;
}
使用 unset 的方法:
1234567891011.
left
,
.
right
{
position
:
fixed
;
top
:
0
;
left
:
0
;
...
}
.
right
{
left
: unset;
right
:
0
;
}
- 如果该属性是默认继承属性,该值等同于
css 中的 initial inherit unset 意思的更多相关文章
- css样式关键字(initial,inherit,unset,revert,all)
关键字 在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始).inherit(继承).unset(未设置).revert(还原).而all的取值只能是以上这4个关键字 ...
- CSS 中的 initial、inherit、unset、revert
在css中,initial(初始).inherit(继承).unset(未设置).revert(还原)这四个关键字可以应用于所有的CSS属性. initial - 初始默认值.IE不支持 inheri ...
- CSS继承控制:inherit、initial和unset
CSS里有三种常用的属性值继承方式:inherit,initial和unset.我们用一个简单的例子来演示一下: <ul style="color: green;"> ...
- The inherit, initial, and unset values
The inherit, initial, and unset keywords are special values you can give to any CSS property. Tests ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- CSS中inherit指定继承的使用方法和auto的区别
CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...
- CSS中line-height继承问题
在CSS中,line-height属性用于设置多行元素的空间量,比如文本.对于块级元素,它指定元素行盒的最小高度.对于非替代的inline元素,它用于计算行盒的高度. 语法 /* Keyword va ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- 深入理解css中vertical-align属性
一.为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <m ...
随机推荐
- log4net.dll添加报错
描述: 新建项目Log4Net类库项目,添加log4net.dll,封装Log类对日志进行操作 新建webForm项目添加Log4Net类库生成的dll生成日志,页面报错,未能加载文件或程序集log4 ...
- 汇编语言程序环境搭建masm+debug64位 win10/7
介绍:MASM是Microsoft Macro Assembler 的缩写,是微软公司为x86 微处理器家族开发的汇编开发环境,拥有可视化的开发界面,使开发人员不必再使用DOS环境进行汇编的开发,编译 ...
- 【源代码R3】移植一份LARGE_INTEGER转时间的代码
本代码来自ReactOS-0.4.0\lib\rtl\time.c中的函数RtlTimeToTimeFields(IN PLARGE_INTEGER Time, OUT PTIME_FIELDS Ti ...
- 平均负载(Load average)
load average 的含义平均负载(load average)是指系统的运行队列的平均利用率,也可以认为是可运行进程的平均数. top命令中load average显示的是最近1分钟.5分钟和1 ...
- 关于v$rowcache
关于v$rowcache column parameter format a21column pct_succ_gets format 999.9column updates format 999,9 ...
- 10 套华丽的 CSS3 按钮推荐
在过去的Web开发中,通常使用Photoshop来设计按钮的样式.不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变.框阴影.文字阴影等效果.此类按钮最大的优势 ...
- Mysql常用函数汇总-经典实用
以下是对mysql中的常用函数进行了汇总介绍.需要的朋友可以过来参考下. 一.数学函数ABS(x) 返回x的绝对值BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制)CEILING(x ...
- Exchange 2010 服务器邮件传输配额设置详解
在企业的邮件系统管理中,传输邮件的大小配额关系到邮件队列.邮件传输速度以及关系到该附件是否能正常发送,直接关系到用户体验.为此,传输邮件大小的设置,也经常是企业邮件管理员比较迷惑的地方.如下: 1) ...
- July 28th 2017 Week 30th Friday
If equal affection cannot be, let the more loving be me. 如果没有相等的爱,那就让我爱多一点吧. There is seldom equal a ...
- 低版本兼容使用Fragment (转)
Fragment框架开发东西确实很方便,但是恼人的是从4.0才开始支持.以前的版本必须用兼容模式开发,本人在网上找了大量资料,终于找到些线索正常运行于2.1版本的安卓系统.现在浅说一下兼容版本使用Fr ...