About CSS cascading, CSS inheritance, CSS Box model overview

First, CSS Cascade

In the process of writing to CSS by the front-end programmer, the CSS selector is used to select an element and render the current element in style, so each selector has its own parsing rules. The CSS cascade we are discussing today is that the browser overlays the source of multiple styles and ultimately resolves them to render effects, which we call CSS cascading.

1) source of CSS Styles

CSS has a "cascade" concept because there are multiple style sources. In fact, CSS style source has 5, developers can only touch the back of 3.

The first three programmers are accustomed to call it: "Inline style sheet", "internal style sheet", "external style sheet", these three style sheets are also the CSS style that our programmers come into contact with, this is not a long introduction.

Let's take a look at the next two: "Browser default Style" and "Use for custom styles". A: Browser default style:

When you do not set any style for HTML, displayed in the browser, the B tag will show bold, the EM tag has italic, the H1-h6 font size has the default ... This is the browser's default style.

Because the browser comes with a default style, if the HTML does not have a style set for the label, the browser will display it in its own style. However, the default browser style is the lowest, and once the label style has been set elsewhere, the default browser style will be eliminated.

Note that the default styles for different browsers are not the same in some places. For example, when we write CSS, we will first set the * {margin:0; padding:0;}, because there is a browser compatibility issue. Altogether, all make 0, so that each browser is unified.

A: User-like customization:

In some news sites, you often see a shortcut menu that lets you set the font size, such as the settings in Sohu News. These are the users can modify according to their own wishes.

In fact, the browser also has such settings, such as the Chrome browser, we can set the font size and font

2) CSS weighting rules

Each selector has some CSS rules, which may not be contradictory, naturally these rules will be effective at the same time, but some rules are conflicting, for this need to be specific for each rule, in the event of a conflict must elect a rule of the highest specificity to apply.

The specifics of a CSS rule can be expressed in 4 integers, such as 0,0,0,0. The calculation rules are as follows:

1. For each ID selector in the rule, the weight value is expressed as 0,1,0,0

2. For each class selector and attribute selector and pseudo-class in the rule, the weight value is expressed as 0,0,1,0

3. For each element name or pseudo-element in the rule, the weight value is expressed as 0,0,0,1

4, for the wildcard character, the weight value is expressed as 0,0,0,0.

5, for the inline rule, the weight value is expressed as 1,0,0,0

The final result is the weight of the rule. A comparison of two weight values, similar to the string size, is compared from left to right, with the higher weight of the first number of large rules. Cases:

The weight values of the two rules in the example above are 0,0,0,2 and 0,0,0,1, and obviously the first style wins, so the final word is blue.

Note that the weight value of the wildcard 0,0,0,0 does not seem to work, actually.

CSS also has a!important to change the specifics of CSS rules. In fact, when parsing the weights of CSS rules, it is the rule with!important and the rule without this tag to use the above method to calculate the weights respectively, and choose the rule with the highest weight value. When the merge is final, the rule with the!important tag with any weight value wins.

3) CSS Settings rules

Because the styles come from different sources, when the browser loads the style, it needs to calculate the final style value in order to show the correct interface effect-the browser will generate the final style values in both overlay and overlay ways.

According to the left side of the description arrow is the CSS external style and CSS internal style of the P/span label style rendering, the right side of the arrow is the browser of CSS style rules parsing. Browser to CSS parsing rules at a glance.

Second, CSS Inheritance

To understand CSS inheritance, we must first talk about the document tree, for example:

The nesting rules of each element in the HTML structure are the specialized skills that our front-end programmers have to master, so as long as the elements are nested, that inevitably creates a relationship between the parent element and the child element, which means that we set the parent's CSS style, the ancestor (parent) and the following child (subordinate) have this property. There are certain properties in CSS, such as color, font-size, font-family, Text-align, and so on, which are passed to the child element or even passed to the grandchild element when the parent element is set, and then these child/grandchild elements are rendered in the style. This is the inheritance mechanism of CSS.

The display on the browser is as follows:

Note: After setting the Font-size, color property to the body, the Div, p, and span tags nested inside the body are also applied to this attribute, so this is the case that the inheritance property of the CSS is passed to the child element and the sun element. This is the CSS inheritance mechanism.

Three, CSS box model

1) Brief Description:

The box model is the cornerstone of the CSS layout, which specifies how the page elements are displayed and how the elements relate to each other. CSS defines that all elements can have a box-like shape and a flat space. That includes the content area, padding (padding), border, border (margin), which is the box model. The following is a legend of the box model:

2) box model composition and principle:

The CSS box model is from the inside to the element contents (content), the inner Edge (Padding-top, Padding-right, Padding-bottom, Padding-left), the border (Border-top, Border-right, Border-bottom, Border-left) and margins (Marging-top, Margin-right, Margin-bottom, Margin-left).

The padding, borders, and margins can be applied to all edges of an element or to individual edges. Also, margins can be negative, and in many cases negative margins are used.

1, the inner part of the element box is the actual content, the content is directly surrounded by the padding (padding), the inner margin renders the element's background (background), the edge of the padding is a border (border), outside the border is margin (margin), the margin is transparent by default, So it does not obscure any subsequent elements (in fact, the margin of the element is the padding of its parent element). The background of an element is applied to an area composed of content and padding, and borders.

2, the padding, borders, and margins are optional, and the default value is zero. However, many elements will have margins and padding set by the user-agent style sheet. You can override these browser styles by setting the margin and padding of the elements to zero. This can be done separately, or all elements can be set using the Universal selector (*):

3. In CSS, width and height are the widths and heights of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

3) box Model application:

CSS box model is to let us fully understand the positioning function of the DIV+CSS model, that is, the use of the box model to replace the layout of the traditional table layout, so the box model is in the Learning Div+css layout method must learn a model, This model allows you to understand how the relative position of the div and Div in a Web page is laid out.

As shown in the example project:

Summary: The above article is a CSS stack, CSS inheritance and CSS box model three knowledge module overview.

Source: Qian Feng HTML5

About CSS cascading, CSS inheritance, CSS Box model overview