web前端入门到实战:你真的了解CSS继承吗?看完必跪-创新互联
也许你瞧不起以前的 css ,但是你不该再轻视眼下的 css 。近年来 css 的变量系统已逐步得到各大浏览器厂商支持,自定义选择器等强势袭来,嵌套系统/模块系统也在路上...为了更好的掌握 css 这门语言,很有必要把之前零零散散的 css 知识回炉重造下。
10年积累的网站建设、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有陆港免费网站建设让你可以放心的选择与我们合作。css 作为一门语言而,也有其继承原理,虽然简单,你却未必掌握。
属性的是否默认继承
初始值是指当属性没有指定值时的默认值,如这些语句的值都是默认值:
background-color: transparent
、
left: auto
、
float: none
、
width: auto
等。
css 的继承很简单,分为默认继承的和默认不继承的,但所有属性都可以通过设置
inherit
实现继承。
当没有指定值时,默认继承的属性取父元素的同属性的计算值(相当于设置了
inherit
),默认不继承的属性取属性的初始值(时相当于设置了
initial
)。
默认继承的 ("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
默认不继承的("Inherited: No") 的属性:
- 文本属性默认不继承:vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
- 盒子属性默认不继承:display、width、height、padding、margin、border、min-width、min-height、max-width、max-height、overflow、clip
- 背景属性默认不继承:background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性默认不继承:float、clear、position、top、right、bottom、left、z-index
- 内容属性默认不继承:content、counter-reset、counter-increment
- 轮廓属性默认不继承:outline-style、outline-width、outline-color、outline
- 页面属性默认不继承:size、page-break-before、page-break-after
- 声音属性默认不继承:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
可以看到涉及到文本相关的属性,都是默认继承的,毕竟 css 设计之初就是为了更好的在网页上呈现文字。
需要注意的是,部分属性的默认值是会根据元素的
display
属性的值而计算的,比如
vertical-align
属性,如果是
display: inline
元素,则其计算值为基线对齐
vertical-align: baseline
,如果是
display: inline-block
元素,则其计算值为
vertical-align: bottom
。
通用属性值 initial、inherit 和 unset
css 为控制继承提供了四个特殊的通用属性值(属性
revert
只有很少的浏览器支持,所以实际上是三个),每个 css 属性都能使用这些值。
- inherit
设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”。
- initial
将属性的初始值应用于元素。实际上,就是“重置为默认值”。
- unset
将属性重置为自然值,也就是如果属性是自然继承的那么就是
inherit
,否则和
initial
一样。
实例
这些通用属性值可以有很多妙用,举个栗子:
- 利用
inherit
实现如下图片倒影:
网页名称:web前端入门到实战:你真的了解CSS继承吗?看完必跪-创新互联
本文来源:http://myzitong.com/article/edohg.html