Four core concepts of CSS and four core concepts of CSS
Cascading Style Sheet (CSS) is a set of format setting rules used for webpage Style design. By setting the page format with CSS Styles, you can separate the content and representation of the page. The page content is stored in the HTML document, while the CSS rules used to define the representation are stored in another file or a part of the HTML document, usually the file header. 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 loading time of the browser.
CSS has four core concepts: Standard stream, box model, position, and float. They are the basis of CSS and the most common attributes.
1. Standard stream
The standard stream is the way tags are arranged, and the order displayed on the page is consistent with the order in the code. For example:
<div>red</div><p>blue</blue>
In the Code, when red is in the front blue, the first line "red" is displayed on the page, and the second line "blue" is consistent with the red is in the front blue, therefore, it conforms to the standard stream. If the above tag is added with a floating or positioning attribute, it may be out of the standard stream, such
<div style="float:right">red</div><p>blue</p>
2. Box Model
Objects on the web page can be regarded as a box. Designers can create definitions to control the properties of the box. These objects include paragraphs, lists, titles, images, and layers. The Box is the Box Model)
The box model consists of four parts: content, padding, border, and margin border. Generally, the width of the entire box on the page is calculated as follows:
Total width = left border + Left Border + Left fill + right fill + Right Border
However, different browsers have different interpretations of the width, so it is necessary to measure the expected effect to ensure compatibility.
. Example {width: 300px; // set the box width padding: 10px; // set the padding border: 5px solid #000; // set the border margin: 20px; // set the border}
3. Locate position
This attribute determines how elements are located. There are about five values.
Every web page can be seen as stacKed by pages
4. Floating float
Float is to float the elements. There are four values: left right none inherit. The first float is just used to realize the effect of text wrapping, at present, float's application is no longer