Four core concepts of CSS_html/css_WEB-ITnose-HTML Tutorial-php.cn

Four core concepts of CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:49:48

Original

1117 people have browsed it

CSS (Cascading Style Sheet), also known as cascading style sheet, is a set of formatting rules used for web page style design. By using CSS styles to format a page, you can separate the content of the page from its presentation. The content of the page is stored in the HTML document, while the CSS rules used to define the presentation are stored in another file or a certain 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 HTML document code more concise and shortens browser load times.
There are four core concepts of CSS: standard flow, box model, position, and float. They are the basis of CSS and the most commonly used attributes.
1. Standard flow
The standard flow is the arrangement of tags. If the order displayed on the page is consistent with the order in the code, it complies with the standard flow. For example:

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

Copy after login

In the code, red is in front and blue is in the back. When displayed on the page, the first line is "red" and the second line is "blue", which means red is in front and blue is in the back, so it conforms to the standard flow. of. If you add floating or positioning attributes to the above tags, it may deviate from the standard flow, such as

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

Copy after login

2. Box model

All objects on the web page can be regarded as a box, and designers can Control the properties of this box by creating definitions. These objects include: paragraphs, lists, titles, pictures and layers

, and this box is the box model (Box Model)

The box model is mainly composed of 4 parts. The outer parts are: content, padding, border, and margin. Generally speaking, the calculation of the width of the entire box on the page is:
Total width = left border, left border, left padding, right padding, right border, right border
However, different browsers have different interpretations of width, so to show the expected effect, actual measurements must be made and compatibility must be done.

	.example{		width:300px;		//设置盒子宽度		padding:10px;		//设置填充		border:5px solid #000;	//设置边框		margin:20px;		//设置边界	}

Copy after login

3. Position

This attribute determines how the element is positioned. There are about five values

Each Web pages can be seen as layers of pages stacked up

4. Float

is to float elements. It has four values: left right none inherit, light Just by looking at the name, you can understand that the original float was only used to achieve the effect of text wrapping around images, but now the application of float is more than this