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

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

查看所有标签

猜你喜欢:

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

码农书籍

运营实战指南

韩利 / 电子工业出版社 / 2016-9-1 / 49

《运营实战指南》架构清晰，前8章主要通过故事形式深入浅出理解运营，将运营基础知识和概念融入到故事中。第9章讲解运营核心方法论，从目标、关键驱动元素、试错调优、高效运行4部分来完整讲解一个运营项目从0到1的过程。第10章、11章、12章深入讲解了运营人拿业绩最核心的知识点：用户、内容和文案。其中数据分析、活动运营等内容以案例形式穿插在各个章节中。最后两章，主谈运营人在日常生活中如何历练以及一个运营人......一起来看看《运营实战指南》这本书的介绍吧!

码农工具