Four core concepts of CSS

CSS (cascading style Sheet) cascading style sheets, also known as cascading style sheets, are a set of formatting rules for Web-style design. By using CSS styles to format a page, you can separate the contents of the page from the representation. The page content is stored in an HTML document, and the CSS rules used to define the representation are stored in another file or part of an HTML document, usually the header section of the file. Separating content from presentation not only makes it easier to maintain the appearance of the site, but also makes the HTML document code more concise and shortens the browser's load time.
The core concepts of CSS are four: standard flow, box model, position, float, which are the basis of CSS and several of the most commonly used properties.
1. Standard Flow
The standard flow is the way the labels are arranged, and the order in which the pages are displayed is consistent with the standard flow in the code. For example:

<div>red</div><p>blue</blue>

        In the code, red is displayed on the page when the first line is "Red", and the second line "Blue" is red in front blue, so it conforms to the standard stream. If you add a floating or positional property to the label above, you may be out of standard flow, such as

<div style= "Float:right" >red</div><p>blue</p>

2. Box model

objects on a Web page can be thought of as a box, and designers can control the properties of the box by creating definitions. These objects include: paragraph, list, title, picture, and layer <div>, and this box is the box model

Box model mainly consists of 4 parts, from inside to outside are: content contents, padding fill, border border, margin boundary, generally speaking the entire box in the page occupies the width of the calculation is:
Total width = left border + Left box + left padding + right padding + right Border + right edge
But different browsers do not have the same interpretation of the width, so to show that the desired effect is actually measured to do a good job of compatibility.

. example{width:300px;//Set Box width padding:10px;//set fill border:5px solid #000;//Set Border margin:20px;//set bounds}

3. Positioning position

This property determines how the element is positioned, and it has a value of about five kinds.

Each page can be viewed as a stack of layers of pages.

4. Float float

floating is the element floating, its value of a total of four: Left right none inherit, see the name to understand the original float just to achieve the effect of text around the picture , and now the application of float more than this

Four core concepts of CSS