您好,登录后才能下订单哦!
也许你瞧不起以前的 css ,但是你不该再轻视眼下的 css 。近年来 css 的变量系统已逐步得到各大浏览器厂商支持,自定义选择器等强势袭来,嵌套系统/模块系统也在路上...为了更好的掌握 css 这门语言,很有必要把之前零零散散的 css 知识回炉重造下。
css 作为一门语言而,也有其继承原理,虽然简单,你却未必掌握。
初始值是指当属性没有指定值时的默认值,如这些语句的值都是默认值:
background-color: transparent
、
left: auto
、
float: none
、
width: auto
等。
css 的继承很简单,分为默认继承的和默认不继承的,但所有属性都可以通过设置
inherit
实现继承。
当没有指定值时,默认继承的属性取父元素的同属性的计算值(相当于设置了
inherit
),默认不继承的属性取属性的初始值(时相当于设置了
initial
)。
可以看到涉及到文本相关的属性,都是默认继承的,毕竟 css 设计之初就是为了更好的在网页上呈现文字。
需要注意的是,部分属性的默认值是会根据元素的
display
属性的值而计算的,比如
vertical-align
属性,如果是
display: inline
元素,则其计算值为基线对齐
vertical-align: baseline
,如果是
display: inline-block
元素,则其计算值为
vertical-align: bottom
。
css 为控制继承提供了四个特殊的通用属性值(属性
revert
只有很少的浏览器支持,所以实际上是三个),每个 css 属性都能使用这些值。
设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”。
将属性的初始值应用于元素。实际上,就是“重置为默认值”。
将属性重置为自然值,也就是如果属性是自然继承的那么就是
inherit
,否则和
initial
一样。
这些通用属性值可以有很多妙用,举个栗子:
inherit
实现如下图片倒影:div::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; bottom: -100%; background-image: inherit; // 背景图片继承,这一般人想不到吧... transform: rotateX(180deg); } web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
initial
重置
left
为默认值
auto
:
地址div { position: absolute; left: 20px; top: 20px; } div + div { left: initial; right: 20px; }
例子中
div
设置过了
left
,div2 的
right
若要生效,须将
left
重置为初始值
initial
(或者
unset
)。
unset
将属性重置为未设置之前的值:
地址例子中
p
标签的
color
是默认继承属性,所以此时
color: unset
相当于
color: inherit
。
p
标签的
border
属性是默认不继承属性,所以此时
border: unset
相当于
border: initial
。
.unset { border: unset; color: unset; } web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
css 的继承真的很简单,只需要记住那些默认继承的,剩下的都是默认不继承的。而默认继承的元素除了文本相关的哪些,只有
visibility、cursor
比较常用了,也是比较容易记得的。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。