Detailed explanation of advanced features such as priority and Stacking Context in CSS will give you a deeper understanding of CSS! !

Usually when we learn CSS, we feel that the syntax is easy to master, but in actual application, we encounter various "pits" that are difficult to fill. In order to avoid everyone being affected by With the same confusion and confusion, this article explains in detail advanced features such as priority and Stacking Context in CSS. Give you a deeper understanding of CSS.

CSS Priority

Priority is determined by the browser and applied to the element by judging which attribute values ​​are most relevant to the element. The priority is determined only by the matching rules composed of selectors. If you add a class (Class) to a P tag, some attributes in the Class will not change after running, and there will be a priority issue with the CSS selector.

Selector priority

Common selector types:

• Inline Style , such as ...;
• ID selectors, such as #id;
• Class selectors (Class), such as .class {...}, [href=''], :hover;
• tag selector (Tag), such as p,:before

The weight of each type of selector is different. The priority of each selector is determined by the weight.

• Inline style: 1,0,0,0
• ID selector: 1,0,0
• Class selector: 1,0
• Tag selector: 1

## Source priority order, as shown in the figure

##The style system starts from the rightmost selector to Left to match the rules. As long as there are other selectors to the left of the current selector, the style system will continue to move to the left until it finds an element that matches the rule, or exits due to a mismatch.

CSS

Priority rule:

Each selector has a weight, the greater the weight, the priority;

1. When the weights are equal, the style sheet settings that appear later are better than the style sheet settings that appear first;
2. The creator's rules are higher than the browser's: that is, the priority of the CSS style set by the web page writer Higher than the style set by the browser;
3. The inherited CSS style is not as good as the CSS style specified later;
4. In the same group of property settings, the priority of the rules marked with "!important" is the highest;
5. CSS Common Model

The Box Model is a thinking model used by CSS technology that is often used in web design.

Box model related CSS attributes element content (element content), width and height (Width/Height), padding (padding), border (border) and margins.

In CSS, width and height refer to the width and height of the content area (element). Increasing padding, borders, and margins will not affect the size of the content area, but it will increase the overall size of the element's box. Assume that the box has 10 pixels of margin and 5 pixels of padding on each side. If you want the element box to be 100 pixels, you need to set the width of the content to 70 pixels. The required attributes are as follows:

Basic attributes

Width/Height

• Padding
• Margin
• Boder
• Outline
• Offset attribute
• Top/Left/Bottom/Right
  The difference between .NET WinForm and .NET WinForm:
• By default, Width/Height does not include Padding
  • The order of the four values ​​​​of the Margin/Padding property is top right bottom left (clockwise)

Everything can be treated as a box model

##Vertical Margin merge

If

? Common sense should be 12 12= 24px, but the answer is still 12px. Because the vertical margins will overlap, the larger ones will be covered.

The Position attribute specifies the positioning type of the element. This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow. The following is the value range of the Position attribute:

• Static Normal flow layout (Normal flow), default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).
• Relative supports ordinary flow layout with offset attributes, generating relatively positioned elements that are positioned relative to their normal positions. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
• Absolute A layout that is absolutely positioned within a container element, generating an absolutely positioned element that is positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
• Fixed Absolutely positioned layout within the display range, generates absolutely positioned elements, and is positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

Float property

The float property defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.

Stacking context

The structure that provides z-index stack space characteristics and affects the rendering order of child elements is called stacking context.

The browser will assign a Stacking context to the DOM element that meets the following rules.

• root element (html)
• "Positioned" element (position: absolute or relative) and the specified z-index value is not auto
• flex item And specify elements with z-index value other than auto
• Elements with opacity less than 1
• Specify elements with transform value other than none
• Specify mix-blend-mode value with non-normal value Element
• Specify the element whose filter value is not none
• Specify the element whose isolation value is isolate
• Specify the element whose value is any attribute in the above list on the will-change attribute
• Specify the element whose -webkit-overflow-scrolling value is touch

z-index

Stacking order

• According to the DOM tree structure, elements with stacking context will form a tree structure.
• The elements in a stacking context will be stacked in order based on z-index. The one with the larger z-index comes first
• z-index Among the 0-level elements, the stacking order of elements with stacking context comes first

• When the above conditions cannot be distinguished, use the one in the DOM tree The order of determines the overlay order.

Performance

##Pixel rendering pipeline

Improving performance requires Each element in the construction pipeline needs to pay attention to:

Style
• Reduce the complexity of the style selector
  • Reduce the number of elements that need to perform style calculation
Layout
• Avoid triggering layout as much as possible
  • Almost all layout occurs within the scope of the entire document.
    • Use flexbox to replace the old layout model
    • Avoid the occurrence of forced synchronization layout events
    • Avoid rapid continuous layout

##Paint

• Modifying any property except transform and opacity will trigger drawing
  • Raise the drawing layer of moving or gradient elements
  • Reduce the drawing area
  • Simplify the complexity of drawing
CSS selector performance

The rightmost end of a selector is The key condition of this selector (Key Selector)

• Browsers match selectors from right to left, so more specific conditions should be placed on the right end as much as possible.
• Avoid using * rules
• The selector should be as short as possible
• Do not add a qualifier before the ID selector
• There is no need to use the Tag selector to qualify the Class Selector
• For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of Detailed explanation of advanced features such as priority and Stacking Context in CSS will give you a deeper understanding of CSS! !. For more information, please follow other related articles on the PHP Chinese website!