CSS2.1 属性赋值，层叠（Cascading）和继承

女爷i 2022-10-01 10:57 4阅读 0赞

## 指定值，计算值和实际值 ##

*  一旦用户代理已经解析了文档并构造好了[文档树][Link 1]，它就必须给树中的每个元素上适用于目标[媒体类型][Link 2]的每个属性赋值
 *  属性的最终值是4步计算的结果：先通过指定来确定值（“指定值（specified value）”），接着处理得到一个用于继承的值（“计算值（computed value）”），然后如果有必要的话转化为一个绝对值（“应用值（used value）”），最后根据本地环境限制进行转换（“实际值（actual value）”）

### 指定值 ###

*  用户代理必须先根据下列机制（按优先顺序）给每个属性赋值一个指定值：
    
    1.  如果[层叠][Link 3]产生了一个值，就使用它
        
        > 样式表如果**指定**了
    2.  否则，如果属性是[继承的][Link 4]并且该元素不是文档树的根元素，使用其父元素的计算值
    3.  否则，使用属性的初始值，每个属性的初始值都在属性定义中指出了

### 计算值 ###

*  指定值通过层叠被处理为计算值，例如，'em'和'ex'等相对单位被计算为像素或者绝对长度。计算一个值并不需要用户代理渲染文档
 *  一个属性的计算值由属性定义中Computed Value行决定。当指定值为'inherit'时，计算值的定义见[继承][Link 4]小节
 *  即使属性不适用（于当前元素，定义在['Applies To'][Applies To]行），其计算值也存在。然而，有些属性可能根据属性是否适用于该元素来定义元素属性的计算值

### 应用值 ###

*  处理计算值时，尽可能不要格式化文档。然而，有些值只能在文档布局完成时确定。例如，如果一个元素的宽度是其包含块的特定百分比，在包含块的宽度确定之前无法确定这个宽度。
 *  应用值是把计算值**剩余的**依赖（值）都处理成绝对值后的（计算）结果

### 实际值 ###

*  原则上，应用值应该用于渲染，但用户代理可能无法在给定的环境中利用该值。例如，用户代理或许只能用整数像素宽度渲染边框，因此不得不对宽度的计算值做近似处理，实际值是经过近似处理后的应用值

### getComputedStyle() ###

*  有时候不同浏览器中使用 `window.getComputedStyle` 返回的值可能不一样，就是因为有的返回了计算值，有的返回应用值。
 *  在 Firefox 中，把 `window.getComputedStyle` 返回的值叫做 resolved value，这个值有时是计算值有时是应用值，因属性而异。Chrome 也类似，但有时就会遇到跟 Firefox 返回值不一样的情况。
    
    > 比如给一个元素 `line-height: normal`，然后用 `window.getComputedStyle` 获取它的行高，Chrome 返回计算值 `normal`，Firefox 返回的是具体的应用值比如 `16px`。（根据规范，`line-height: normal` 的计算值还是 `normal`，应用值在 `1.0-1.2` 之间。）

## 继承与初始 ##

### 继承属性与非继承属性 ###

**inherit关键字**

*  每个属性都可以指定`inherit`层叠值

*  如果属性值是**继承的**，那么继承的就是父级的**计算值**，来自父级的计算值同时作为子级**指定值和计算值**
    
    > 直接父级元素没有设置的话会一级级往上继承，如果都没有就继承根元素的初始值
 *  如果属性值是**非继承**，**强行**指定`inherit`关键字就会继承**指定值**，来自父级的指定值作为子级的**指定值**
 *  如果`inherit`值设置在根元素上，该属性会被赋值为其初始值
 *  区别继承与非继承，可继承不可继承，所有的css属性都是**可继承的**，只是他们默认是非继承的

**继承属性示例**

*  给出如下样式表和文档片段：
    
        body { font-size: 10pt }h1 { font-size: 130% }复制代码
    
        <BODY>  <H1>A <EM>large</EM> heading</H1></BODY>复制代码
 *  font-size是继承属性，子级继承父级的计算值
 *  H1元素的'font-size'属性将获得**计算值**'13pt'（130%乘以父元素的值10pt）
 *  因为['font-size'][font-size]的计算值是继承的，EM元素也将获得计算值'13pt'
    
    > 如果用户代理没有可用的13pt字体，H1和EM的['font-size'][font-size]的实际值可能是，例如，'12pt'
    
    > 注意，继承遵循文档树并且不会被[匿名框][Link 5]截断

**非继承示例**

*      <body>  
          <div id="root">  
             <div id="box1">    
             </div>  
          </div>
        </body>复制代码
    
        html,body{ 
          width:800px;    height:800px;  
        }  
        #root{ 
          width:50%;    height:50%;    background-color: greenyellow;  
        }  
        #box1 { 
          width:inherit;    height:inherit;    background-color: pink;  
        }复制代码
 *  width,height是非继承属性，子级继承父级的指定值
 *  box1的width,height将获得**指定值**`50%`，**计算值**为200px（50%乘以父元素的宽度）
    
    > 作为对比，如果继承的是父级的计算值，那么box1的width,height应该是400px

### 继承属性 ###

*  azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, orphans, pitch-range, pitch, quotes, richness, speak-header, speaknumeral, speak-punctuation, speak, speechrate, stress, voice-family, volume, whitespace, widows,
 *  **文本相关属性**：font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height，text-align，text-indent，text-transform，word-spacing
 *  **列表相关属性**：list-style-image, list-style-position,list-style-type, list-style
 *  **常用属性**：color，cursor，visibility
 *  继承计算值

### 非继承属性 ###

*  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
 *  继承指定值

### 特例 ###

*  `line-height`是继承属性，因此给line-height设置百分比，子元素继承的是**计算值**。但是当指定值是<number>时，子元素会继承**指定值**
 *  `text-indent` 是继承属性，`text-indent` 可以接受一个百分比值，用来乘以包含块宽度。子元素从父元素继承时，得到的也是百分比值，即**指定值**。

### 初始值（Initial） ###

*  对于继承属性, 初始值 只能 被用于没有指定值的根元素上
    
    > 因为不是根元素都会继承其他的父元素指定值
    
    > 对于继承属性，初始值仅对没有指定值的根元素有意义，其他所有元素继承属性都是继承自根元素的
 *  对于非继承属性 ,初始值可以被用于 任意 没有指定值的元素上
 *  在CSS3中允许作者使用 initial 关键词明确的设定初始值

转载于:https://juejin.im/post/5cef47a05188250fa047522a

[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Fconform.html%23doctree
[Link 2]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Fmedia.html
[Link 3]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Fcascade.html%23cascade
[Link 4]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Fcascade.html%23inheritance
[Applies To]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Fabout.html%23applies-to
[font-size]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Ffonts.html%23propdef-font-size
[Link 5]: https://link.juejin.im?target=http%3A%2F%2Fwww.ayqy.net%2Fdoc%2Fcss2-1%2Fvisuren.html%23box-gen