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

栏目: 编程工具 · 发布时间: 5年前

指定值，计算值和实际值

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

指定值

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

计算值

指定值通过层叠被处理为计算值，例如，'em'和'ex'等相对单位被计算为像素或者绝对长度。计算一个值并不需要用户代理渲染文档
一个属性的计算值由属性定义中Computed Value行决定。当指定值为'inherit'时，计算值的定义见继承小节
即使属性不适用（于当前元素，定义在'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'的计算值是继承的，EM元素也将获得计算值'13pt'

如果用户代理没有可用的13pt字体，H1和EM的'font-size'的实际值可能是，例如，'12pt'

注意，继承遵循文档树并且不会被匿名框截断

非继承示例

<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 关键词明确的设定初始值

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

从问题到程序-用Python学编程和计算

裘宗燕 / 机械工业出版社 / 2017-6-1

本书是以Python为编程语言、面向计算机科学教育中的程序设计基础课程与编程初学者的入门教材和自学读物。本书以Python为工具，详细讨论了与编程有关的各方面问题，介绍了从初级到高级的许多重要编程技术。本书特别强调编程中的分析和思考、问题的严格化和逐步分解、语言结构的正确选择、程序结构的良好组织，以及程序的正确和安全。书中通过大量实例及其开发过程，展示了好程序的特征和正确的编程工作方法。此外，书中......一起来看看《从问题到程序-用Python学编程和计算》这本书的介绍吧!

码农工具