css属性的继承、初识值、计算值、当前值、应用值

pkhope 发布于2019-08-29 13:19 / 1527人阅读

摘要：计算属性的计算值通常包括将相对值转换成绝对值如单位或百分比。返回的解析值可能是计算值或应用值。最后，计算布局尺寸比如或百分数换算为像素值，结果即应用值。继承当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。

css属性

我觉得大部分学习前端的人应该都没有按照教科书一般的来学习css，可能是类似搭积木一样，需要什么拿什么，所以可能最对一些基本的概念没有很好的理解，这里列出的是一些css属性的关键概念：

css属性初始值

css属性计算值

css属性应用值

css属性当前值

css属性继承

大部分css属性都可以有这个值：inherit 继承父级值：initial 初始值，
inherit 继承父级值

对于可继承属性而言，直接继承父级的属性，直接父级元素没有设置的话会一级级往上继承，如果都没有就是默认值；

对于非继承属性而已，这个还是要慎用，当然也可以用，可以继承父级元素的属性，但是父级元素可能没有这个属性，所以避免这种情况考虑使用initial初始值比较合理

初始值

在每个CSS属性定义的概述中已经给出的初始值针对不同的继承或非继承属性有着不同的含义.

对于继承属性, 初始值只能被用于没有指定值的根元素上【因为不是根元素都会继承其他的父元素指定值】.

对于非继承属性 ,初始值可以被用于任意没有指定值的元素上.

在CSS3中允许作者使用 initial 关键词明确的设定初始值.

计算值

一个CSS属性的计算值 (computed value) 通过以下方式从指定的值计算而来：

处理特殊的值 inherit 和 initial，以及
进行计算，以达到属性摘要中“计算值”行中描述的值。
计算属性的"计算值"通常包括将相对值转换成绝对值(如 em 单位或百分比)。

例如，如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的2倍).

然而，有些属性的百分比值会转换成百分比的计算值(这些元素的百分比相对于需要布局后才能知道的值，如 width, margin-right, text-indent, 和 top)。另外，line-height 属性值如是没有单位的数字，则该值就是其计算值。这些计算值中的相对值会在应用值确定后转换成绝对值。

计算值的最主要用处是继承 , 包括 inherit 关键字。

getComputedStyle() DOM API 返回的解析值, 可能是计算值或应用值。

应用值

CSS 属性的应用值（used value）是完成所有计算后最终使用的值，可以由 window.getComputedStyle 获取。尺寸 (例如 width, line-height) 单位为像素, 简写属性 (例如 background) 与组成属性相符 (例如 background-color，display) 与 position 、float相符，每个 CSS 属性都有值。

详情

计算出CSS属性的最终值有三个步骤。首先，指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。然后，按规范算出计算值computed value (例如， span 指定 position: absolute 后display 变为 block)。最后，计算布局(尺寸比如 auto 或百分数换算为像素值 )，结果即应用值used value。这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle 获得最终的应用值。

举例

没有明确的宽度。指定的宽度: auto (默认). 计算的宽度: auto. 应用的宽度: 998px (举例而言)。
明确的宽度: 50%. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 447px
明确的宽度: inherit. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 221px .

与计算值的区别

CSS 2.0 只定义了计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样 (引自 CSS 2.1 Changes: Specified, computed, and actual values):

实际值

一个CSS属性的实际值（actual value）是应用值（used value）被应用后的近似值。例如，一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可能被强制近似于边框的计算宽度值。

继承与非继承

每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

继承
当元素的一个继承属性（inherited property ）没有指定值时，则取父元素的同属性的计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。以下是继承的一些属性

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

非继承
当元素的一个非继承属性 (在Mozilla code 里有时称之为 reset property ) 没有指定值时，则取属性的初始值initial value （该值在该属性的概述里被指定）。
以下列出均为非继承

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

参考：http://www.w3.org/TR/CSS21/pr...
https://developer.mozilla.org...
http://www.cnphp.info/css-sty...

GPU云服务器云服务器获取CSS属性值 js会的属性值 php获取表的属性值获取属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112521.html

初识DOM

摘要：标识，就是将页面解析为一个文档。标识，就是中表示各个对象之间的关系。的标准由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。兄弟关系具有相同父级元素的两个或几个元素之间的兄弟关系。是返回值，表示定位元素的集合，是一个集合。如何使用JavaScript script元素元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在元素中。t...

史占广 2019-08-29 16:31 评论0 收藏0
初识DOM

摘要：标识，就是将页面解析为一个文档。标识，就是中表示各个对象之间的关系。的标准由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。兄弟关系具有相同父级元素的两个或几个元素之间的兄弟关系。是返回值，表示定位元素的集合，是一个集合。如何使用JavaScript script元素元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在元素中。t...

qpal 2019-08-02 16:31 评论0 收藏0
初识DOM

摘要：标识，就是将页面解析为一个文档。标识，就是中表示各个对象之间的关系。的标准由于的标准规范是由组织起草并定义的，所以对的定义是目前最权威的解释。兄弟关系具有相同父级元素的两个或几个元素之间的兄弟关系。是返回值，表示定位元素的集合，是一个集合。如何使用JavaScript script元素元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在元素中。t...

Coding01 2019-08-23 11:31 评论0 收藏0
前端菜鸟笔记 Day-3 CSS基础

摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。文章大纲来源：【Day 3】HTML复习 + CSS基础初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：CSS 简介样式解决了什么问题？ HTML...

mingzhong 2019-08-30 15:55 评论0 收藏0
前端菜鸟笔记 Day-3 CSS基础

摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。文章大纲来源：【Day 3】HTML复习 + CSS基础初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：CSS 简介样式解决了什么问题？ HTML...

DangoSky 2019-08-02 14:12 评论0 收藏0