Make you completely clear the browser's rendering calculation process --CSS property values

Attribute value calculation process

definition: An element from all of the properties have no value, to all attributes have values, this calculation process, called the attribute value calculation process

Rendering a prerequisite for each element: All CSS properties for that element must have a value

A rendering of an element in turn, in accordance with the order of pages of the document tree directory structure

Introduction to procedures：

No property value -> OK declared value -> stacked conflict -> use inheritance -> use the default values ​​-> Each attribute has value

1. Determine the value of the statement: Reference stylesheet does not declare the conflict, directly as a CSS property value.
2. Stacked conflict: There are style sheets declared conflicts of use cascading rules determine the CSS property value.
3. Using inheritance: the value of the property is still not, if you can inherit, inherit the parent element.
4. Still on the property with no value, the default value

About a color element of succession

<style>
div{
    color:red;
}
</style>

<div>
<a href="">超链接</a>
<p>p</p>
</div>

You will find, a color element does not inherit the parent element, but the color, because the default style sheet browser already has the attribute value color, so color attributes have been identified attribute values ​​when determining the value statement .

CSS two special values:

• inherited: Manual (mandatory) inheritance, the parent element takes a value applied to the element.
• initial: initial value, set the element to default values.
  a color elements inherit solution：

<style>
a{
    color:inherited;/*强制继承*/
}/*此时根据层叠冲突可知该样式被浏览器选中，color会从父元素中继承属性值，相当于提前继承*/
</style>

initial use:

<style>
div{
    background:lightblue;/*亮蓝色*/
}
.mydiv{
    background:initial;/*透明色*/
}
</style>

<div class="mydiv">

</div>

At this time, the background color will change to the original browser transparent color.