Go deep into CSS to reduce "pitfalls" and css for Web Development

Go deep into CSS to reduce "pitfalls" and css for Web Development

Problem:How can I receive the push articles from your public account platform?

Answer:You only need to click the blue text below the title[Web Front-end development]Follow up.

When we are learning CSS, we feel that the syntax is easy to grasp, but in actual application, we encounter a variety of "pitfalls" that are hard to fill. To avoid the same confusion and puzzles, this article describes in detail the advanced features such as priority and Stacking Context in CSS. This gives you a better understanding of CSS.

CSS priority

The priority is that the browser determines which attribute values are most relevant to the element and applies them to the element. Priority is only determined by matching rules composed of selector. If a Class is added to a P label, some attributes in the Class are not changed after the operation, and the CSS selector has a priority problem.

Priority

Common selector types:

• Inline Style, such as <span>... </span>;

• ID selectors, for example, # ID;

• Class selector (Class), such as. class {...}, [href = ''],: hover;

• Tag, such as div,: before

The weights of each type of selector are different. The priority of each selector is determined by the weights,

• Inline style: 1, 0, 0

• ID selector: 1, 0, 0

• Class selector: 1, 0

• Tag selector: 1

 

Source priority order,

The style system matches the rule from the rightmost character to the left. As long as there are other delimiters on the left of the current selector, the style system will continue to move to the left until the elements matching the rule are found or exit because they do not match.

CSSPriority rules:

1. Each selector has a weight value. The larger the weight, the higher the priority;

2. When the weights are equal, the subsequent style sheet settings are superior to those that appear first;

3. The Creator's rule is higher than the viewer: that is, the priority of the CSS style set by the webpage writer is higher than that set by the browser;

4. The inherited CSS style is not as good as the later specified CSS style;

5. "!" Is marked in the same group of attribute settings. The important rule has the highest priority;

Common CSS Models

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

Element content, Width and Height (Width/Height), padding, border (border), and margin (margin) related to the box model ).

In CSS, width and height indicate the width and height of the content area (element. Adding the padding, border, and margin does not affect the size of the content area, but increases the total size of the element box. Assume that each side of the box has a margin of 10 pixels and a margin of 5 pixels. If you want the element box to reach 100 pixels, you need to set the content width to 70 pixels. The required attributes are as follows:

 

Basic Attributes

• Width/Height

• Padding

• Margin

• Boder

• Outline

• Offset Property

  • Top/Left/Bottom/Right

• Differences from. NET WinForm:

  • By default, Width/Height does not contain Padding.

  • The order of the four values of the Margin/Padding attribute is top right bottom left (clockwise)

 

Everything can be regarded as a Box Model

 

Vertical Margin merge

If the vertical margin of <p> is 12px, what is the vertical distance between the two <p>? Generally speaking, it should be 12 + 12 = 24px, but the answer is still 12px. Because vertical margin overlaps and large margin overwrites.

 

The Position attribute specifies the positioning type of the element. This attribute defines the positioning mechanism used to establish the element layout. Any element can be located, but an absolute or fixed element will generate a block-level box regardless of the element type. The relative positioning element is offset from its default position in the normal stream. The Posistion attribute values are as follows:

• • Static Normal flow, default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ).

  • Relative supports the normal stream layout of the Offset attribute to generate Relative positioning elements and locate them Relative to their normal position. Therefore, "left: 20" adds 20 pixels to the LEFT position of the element.

  • Absolute is an Absolute positioning layout in the container element to generate an Absolute positioning element, which is located relative to the first parent element other than static positioning. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes.

  • Fixed is an absolute positioning layout within the display range, generating absolute positioning elements, which are located relative to the browser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes.

 

Float attributes

The float attribute defines the direction in which the element floats. In the past, this attribute was always applied to the image, so that the text is centered around the image. However, in CSS, any element can float. A floating element generates a block-level box, regardless of its own elements.

 

Stacking context

A structure that provides the z-index stack space characteristics and affects the Rendering sequence of sub-elements. It is called stacking context.

 

The browser will assign a Stacking context to the dom elements that comply with the following rules.

• Root element (html)

• Position: absolute or relative element with the specified z-index value not auto

• Flex item and the z-index value is not auto

• Elements whose opacity is less than 1

• Specifies the element whose transform value is not none.

• Elements whose mix-blend-mode value is not normal

• Elements whose filter value is not none

• Elements whose isolation value is isolate

• Specify the value as an element of any attribute in the above list on the will-change attribute.

• Specifies the-webkit-overflow-scrolling value as the touch element.

Z-index

 

Stacking order

• Based on the DOM tree structure, elements with stacking context form a tree structure.

• Elements in a stacking context determine the order of superposition Based on z-index. Top of the z-index

• In the z-index 0 level element, elements with stacking context are first overlapped.

• When the preceding conditions are not time-specific, the sequence in the DOM tree is used to determine the order of superposition.

 

 

Performance

 

Pixel rendering pipeline

To improve performance, you need to pay attention to each element in the pipeline:

• Style

  • Reduce style selector complexity

  • Reduce the number of elements that require style Calculation

• Layout

  • Almost all la s occur throughout the document.

  • Use flexbox to replace the old layout model

  • Avoid force synchronization layout events

  • Avoid fast and continuous Layout

  • Avoid triggering layout as much as possible

• Paint

  • In addition to transform and opacity, modifying any attribute triggers plotting.

  • Enhances the painting layer of a moving or gradient element.

  • Reduce the drawing Area

  • Simplify the rendering complexity

CSS selector Performance

• The rightmost side of a Selector is the Key Selector)

• The browser matches the selector from the right to the left. Therefore, you should place more specific conditions on the right side as much as possible.

• Avoid using * Rules

• Selector as short as possible

• Do not add a qualifier before the ID Separator

• It is not necessary to use the Tag separator to limit the Class selector.

Link: http://slides.com/colinhan/deck-2-3#/5

Follow us