CSS style layer and rendering Engine Association

first, CSS Style layer Association1, ie low version of the non-famous compatibility issues

1, not do not support display:inline-block;

The style of the Inline-block in the CSS2.1 version is positioned as: causes the element to produce a containing block at the level of the line, which can be set to a height within the block level, and the layout is calculated by itself in the inline box.

　　

　IE 5.5, 6, 7, 8 (Q) Several low-version IE browser support Inline-block, and the CSS2.1 version of the specification effect is different, accurate is that support is not complete.

The effect of the inline element set to Inline-block in a low version of IE is simply to set this property value directly or use the trigger Haslayout property such as Zoom:1.

Block element support for Inline-block is incomplete, if you want to achieve a similar effect, you need to set to Display:inline first, and then use zoom:1 and so on to trigger the Haslayout property.

Then there is the code for compatibility:

Display:inline-block;

*display:inline;

*zoom:1;

2. The z-index problem in position positioning

In IE, the z-index level of the anchored element is relative to the respective parent container, which causes the z-index to behave incorrectly.

The workaround is to define the Z-index for its parent element and, in some cases, to define position:relative.

2. Clear Html,js, CSS layering

Often divides the webpage into the structure layer, the expression layer, and the behavior layer, the HTML, JS, the CSS manages separately. Without careful thought, the boundaries of the three are vague.

In the process of rendering the page in the browser, HTML can generate the DOM tree, JS can be executed by the engine, CSS can also generate Cssom (CSS object model) tree. The DOM and CSSOM combine to generate a render tree.

"Block-level elements have Div, UL, p, etc., inline elements have a, span, input, etc.", the box model of these elements are defined by the CSS style range, from the browser's default style settings.

3. Type of box model

　　<p> This is an ordinary line of text, here is a <em>em</em> tag. </p>

This HTML code involves 4 kinds of boxes:
1, the first is the P label containing box, this box contains the other boxes; (Block-level box)

2, then is the inline boxes, such as labeling, (inline box)

Inline boxes does not make the content appear as blocks, but is lined up, if the external label with inline attributes (span,a, etc.), is an inline boxes, and if it is a bare text, it belongs to the anonymous inline boxes.

3, line boxes, see the mark:

In containing boxes, a line boxes is composed of an inline boxes for each row. (Line box)

4. Content area, see callout:

The content area is a box that is not visible around the text. The size of the content area is related to the font-size size.

Contentarea is a box that surrounds the text and is highly determined by font-size and font-family. In the chrome controller, you use your mouse to aspire to an inline element that displays the height value.

4. The height of the inline box model is obtained

The line box model, the corresponding style is "line-height". (The picture also belongs to the inline boxes, but its height is more ferocious than the line-height effect, so its inline boxes height equals its own height, no reaction to line-height), inline The height of the boxes is directly controlled by the Line-height (which is why the line-height text is pulled or overlapped), and the true height is the line boxes consisting of a large number of inline boxes per row (equal to the highest internal inline Box's height), and these line boxes are stacked vertically to form the height of the containing box, which is the height of the div or P tag we've seen.

The height of the inline box is determined by line-height, with half of the line-height on top of the content area and the other half below. Line-height is calculated from the horizontal perpendicular bisector of the content area.

5. Application of vertical-align attribute

Several values for vertical alignment: Top,middle,baseline,bottom.

　　

6. IE Browser Haslayout properties

Layout is a private concept inside the Ie/win that determines how an element displays and constrains what it contains, how it interacts with other elements, how it responds to and transmits application events, user events, and so on;

7. BFC model of the browser

There is a BFC concept in the HASLAYOUT,W3C specification relative to IE.

BFC (block formatting context) literal translation is "chunk-level formatting context". It is a separate rendering area that only block-level box participates in, which specifies how the internal block-level box is laid out and irrelevant to the outside of the area.

Second, WebKit rendering engine

1. Page style CSS Source

1, the web Developer wrote 2, the reader set the style 3, the browser's built-in default style. The priority used is decremented.

In the development process there may be a lot of unnecessary, redundant CSS reset code, can be omitted.

2. Include block model in page rendering

When WebKit calculates the position and size of the element's box, it needs to calculate the relative position of the element and the other rectangular region, which is called the containing block of the element.

--the containing block of the root element is called the initial containment block, and the size is the viewable area (viewport)

The--position property is a static or relative element whose containing block is the content area of the recent Ancestor's box model.

The--position property is fixed, so the containing block of the element is detached from the HTML document and fixed at a specific location in the viewable area.

The--position property is absolute and is determined by the most recent ancestor with attributes of absolute, relative, or fiexd.

3, the mobile side of the three viewport viewport

The mobile end can be divided into visual viewport, layout viewport and ideal viewport. Through meta notes, media queries, JS interface can be obtained or set. Is that the response involves the foundation.

4. Positioning scheme in Layout calculation

Set by the position and float properties, there are three positioning schemes:

1, static, relative normal: Based on the position of the object in the document, that is, the position of the object in the rendering tree and its position in the DOM tree is similar, and according to its box type and size layout, the other boxes will float around it.

2. Float float: The object is laid out according to normal flow, then moves to the left or right as far as possible.

3, Absolute, fixed absolute: the position of the out-of-document stream object in the rendering tree differs from its position in the DOM tree. element does not participate in the normal stream. Dimensions are relative to the container. In fixed positioning, the container is the visible area.

Float:left, right, none, inherit

Position:absolute, fixed, relative, static, inherit

5. Parsing of CSS selectors

Selector parsing is generally right-to-left, with too long nested styles that can lose performance.

CSS style layer and rendering Engine Association