css value

高洛峰
Release: 2017-02-15 13:12:53
Original
1214 people have browsed it

Source of CSS values

First of all, we know that although CSS has simple syntax, it is not written blindly. Its properties and values are officially defined, to be precise, they are defined by the browser manufacturer. of.

These given values are nothing more than the following sources:

  1. inherit means inheriting the value from the ancestor element. Every attribute has it.

  2. initial represents the default value of the user agent. Every attribute has it.

  3. Browser-specific values usually have prefixes such as -ms-, -webkit-, etc., and some values have no prefix.

  4. Values shared by browsers. Although they are shared, the implementation of each browser is not necessarily the same.

Therefore, it is certain that css compatibility issues are mostly caused by the inconsistency and evolution of css rendering implemented by browser manufacturers.

Values in CSS specifications

The value finally presented to the user goes through 4 steps: first the specified value (the "specified value"), and then the inherited value (the " computed value"), then converted into the used value (the "used value"), and finally the actual value (the "actual value") obtained due to the limitations of the browser itself.

That is,specifies Value-->Calculated value-->Used value-->Actual value

Specified value

There are three possibilities for specifying the value. One is the default value of the user agent. That is, initial, one is the value written by the artist in the program, and the other is the value that is explicitly specified for inheritance, that is, inherit.

Normally, neither inherit nor initial need to be explicitly specified. But in some cases these 2 values are very useful.

computed value

This is the value calculated by the rendering engine through parsing the CSS file and the inheritance relationship of the cascading rules before the document is formed.

used value

This is the value obtained after css is combined with html to form a document.

Understand that the difference between calculated values and used values is that the browser first parses the HTML and CSS files separately, and then merges them. Please refer to these 2 pictures for details.

webkit rendering process
css值

Geoko rendering process
css值

actual value

is the last browser available For example, all browsers cannot handle 7 decimal places, so the precision will be reduced.

These 4 values are derived from the specification. Other browser implementations may not work according to this 4-step process, but currently mainstream browsers follow this process.

Note that the cascade is different In inheritance. Cascading is for individual CSS properties, inheritance is for elements. Layering often comes with weighting issues.

Chrome Developer

css值

  1. Specify value (3 types)

  2. User agent default value (cannot be changed)

  3. The value with an underscore indicates that it is overridden by the cascading rule, that is, the style is overwritten by the weighted one.

  4. Click 4 to jump to the corresponding node and style view. The part below 4 indicates which element the style is inherited from. Usually you can see the ancestor DOM chain of the element from here.·

  5. ##The gray part

    can be changed, Indicates that the rule is not available and is evaluated at runtime.

Example:

I now specify the height of h1 as follows

css值

Look at the computed value and you can see that chrome retains it 4 digits after the decimal point:

css值

View the used value (the reason for looking in this box is that the box represents the formation of a document, which corresponds to the previous used value)

css值

The final actual value is here (view it directly on the page):

css值

You can see that if there is padding, the padding will form the document Then add it to the visual width and height when displayed on the browser. Of course, it is different if the box-sizing attribute is specified, but you can know that this happens in the last step.

Source of CSS values

First of all, we know that although CSS has simple syntax, it is not written blindly. Its attributes and values are Officially defined, to be precise, defined by the browser manufacturer.

These given values are nothing more than the following sources:

  1. inherit means inheriting the value from the ancestor element. Every attribute has it.

  2. initial represents the default value of the user agent. Every attribute has it.

  3. Browser-specific values usually have prefixes such as -ms-, -webkit-, etc., and some values have no prefix.

  4. Values shared by browsers. Although they are shared, the implementation of each browser is not necessarily the same.

Therefore, it is certain that css compatibility issues are mostly caused by the inconsistency and evolution of css rendering implemented by browser manufacturers.

Values in CSS specifications

The value finally presented to the user goes through 4 steps: first the specified value (the "specified value"), and then the inherited value (the " computed value"), then converted into the used value (the "used value"), and finally the actual value (the "actual value") obtained due to the limitations of the browser itself.

That is,specifies Value-->Calculated value-->Used value-->Actual value

Specified value

There are three possibilities for specifying the value. One is the default value of the user agent. That is, initial, one is the value written by the artist in the program, and the other is the value that is explicitly specified for inheritance, that is, inherit.

Normally, neither inherit nor initial need to be explicitly specified. But in some cases these 2 values are very useful.

computed value

This is the value calculated by the rendering engine through parsing the CSS file and the inheritance relationship of the cascading rules before the document is formed.

used value

This is the value obtained after css is combined with html to form a document.

Understand that the difference between calculated values and used values is that the browser first parses the HTML and CSS files separately, and then merges them. Please refer to these 2 pictures for details.

webkit rendering process
css值

Geoko rendering process
css值

actual value

is the last browser available For example, all browsers cannot handle 7 decimal places, so the precision will be reduced.

These 4 values are derived from the specification. Other browser implementations may not work according to this 4-step process, but currently mainstream browsers follow this process.

Note that the cascade is different In inheritance. Cascading is for individual CSS properties, inheritance is for elements. Layering often comes with weighting issues.

Chrome Developer

css值

  1. Specify value (3 types)

  2. User agent default value (cannot be changed)

  3. The value with an underscore indicates that it is overridden by the cascading rule, that is, the style is overwritten by the weighted one.

  4. Click 4 to jump to the corresponding node and style view. The part below 4 indicates which element the style is inherited from. Usually you can see the ancestor DOM chain of the element from here.·

  5. ##The gray part

    can be changed, Indicates that the rule is not available and is evaluated at runtime.

Example:

I now specify the height of h1 as follows

css值

Look at the computed value and you can see that chrome retains it 4 digits after the decimal point:

css值

View the used value (the reason for looking in this box is that the box represents the formation of a document, which corresponds to the previous used value)

css值

The final actual value is here (view it directly on the page):

css值

You can see that if there is padding, the padding will form the document Then add it to the visual width and height when displayed on the browser. Of course, it is different if the box-sizing attribute is specified, but you can know that this happens in the last step.

For more css value related articles, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!