CSS3 Notes "Update not timed"

Box-sizing

value	Description
Content-box	This is the width height behavior specified by the CSS2.1. The width and height are applied to the element's content box, respectively. Draws the inner margin and border of the element outside the width and height.
Border-box	The width and height set for the element determines the bounding box of the element. That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and padding from the set width and height.
Inherit	Specifies that the value of the Box-sizing property should be inherited from the parent element.

"As a processing when there is border or padding control size, when the value is Content-box, the width, height size is the size of the content does not include border and padding, when the value is Border-box, Set the width and height to include the size of the border. "CSS3 Gradient" uses the characteristics of CSS3 to make gradients, including linear gradients, radians gradients, etc. see the article http://www.w3cplus.com/content/css3-gradient CSS hack

	IE6	IE7	IE8	IE9	IE10	Modern browsers
*
+
-
!important
\9
/
\9\0

CSS Selector Precedence

Preference for selectors

Explain:

1. The weighted value of the inline style sheet is up to 1000;

2. The value of the ID selector is 100

3. The class selector has a weight value of 10

4. The weight value of the HTML tag Selector is 1

CSS Precedence Rules:

A selector has a weighted value, the greater the weight the higher the priority;

B when the authority value is equal, the style sheet setting appears better than the style sheet setting that appears first;

C Creator's rule is higher than the viewer: that is, the CSS style set by the page writer has precedence over the style set by the browser;

The CSS style inherited by D is not as good as the CSS style later specified;

E the "!important" rule has the highest priority in the same set of property settings;

The order in which Internet Explorer downloads or renders may be as follows:

The order of IE download is from top to bottom;

The execution of JavaScript functions will block the download of IE;

The order of IE rendering is also from top to bottom;

The download and rendering of IE is carried out at the same time;

When you render to a portion of a page, all of its parts are already downloaded (but not all associated elements have been downloaded.) ）

During the download process, if you encounter a tag embedded in the file, and the file is semantically explanatory (for example: JS script, CSS style), then the download process of IE will enable a separate connection to download. And after the download to parse, if JS, CSS, if there is a redefinition, the function defined later will overwrite the previously defined function.

During parsing, the download of all elements down the page is stopped. The style sheet file is special, and after its download is complete, it is parsed with all previously downloaded style sheets, and after parsing is completed, all previous elements (including previously rendered) are re-styled. and continue to render in this way until the entire page rendering is complete.

Firefox handles downloading and rendering in roughly the same order, but with some nuances, such as the rendering of an IFRAME.

CSS Selector Match

Below this chestnut, CSS selector How does it work?

span {font-size:16px;}

If you do not know the matching rules, the possible understanding is to match left-to-right: first find. Mod-nav, then step-by-step matching H3, span, in this process if the traversal to the leaf node does not match the need to backtrack, continue to look for the next branch.

In fact, the CSS selector reads in the right-to- left order.

Or the above selector, its reading order becomes: First find all the span, along the parent element of the span to find H3, halfway to find the matching rule of the node to join the result set, if not until the root element HTML does not match, the path is no longer traversed, Repeat this process starting with the next span (if there are multiple right-most nodes as span).

Under a CSS rule (such as. Mod-nav H3 span), a rule-compliant index tree is formed, and the tree-top-to-bottom node is the node that matches the right-to-left selector in the rule. The specific process of indexing tree traversal can be seen in a large video of the winter.

Why are right-to-left rules more efficient than left-to-right?

If the structure of the DOM is as follows, the matching rule is. Mod-nav H3 span.

If you match from left to right, the process is: start with the. Mod-nav, traverse the child node header and child node Div, and then traverse each child node. In the branch of the right Div, the last traversal to the leaf node A, found that does not conform to the rules, need to go back to the UL node, and then traverse the next li-a, if there are 1000 Li, then this 1000 times of traversal and backtracking will lose a lot of performance.

Then look at the right-to-left match: First find all the right node span, for each span, look up the node H3, from the H3 to look up the Class=mod-nav node, and finally find the root element HTML to end the traversal of this branch.

Obviously, the performance of the two matching rules varies greatly. The difference is because right-to-left matching filters out a large number of non-conforming right-most nodes (leaf nodes) in the first step, while the performance of left-to-right matching rules is wasted on failed lookups.

Of course this is the obvious case, if there are multiple non-qualifying spans on the leaves, the right-to-left rule will also take some detours (then you need to optimize the CSS selector). But on average, it's more efficient, because most of the time, a node in a DOM tree that matches the matching criteria (such as. Mod-nav H3 span) is far less than a node that does not meet the criteria.

The sizzle engine, which was used by jquery from version 1.3, performs a significant improvement in performance by matching the CSS selector's match rules (right-to-left) to find and match DOM elements (of course, many optimizations).

CSS rendering

CSS3 Notes "Update not timed"