Some of the core concepts of CSS

This article will describe some of the core concepts of CSS, including: Box model, position, float and so on. These are the basis of CSS and the most frequently used attributes, which appear to be independent but mutually reinforcing. In order to master them, it is necessary to write to discuss, if there is a mistake to welcome correct.

Element type

The elements of HTML can be divided into two types:

• Block-level elements (block levels Element)
• Inline elements (inline element Some people also call it inline elements)

The difference between the two lies in the following three points:

1. A block-level element will have a single row (that is, it cannot be displayed in the same row as other elements unless you show the display property of the altered element), and inline elements are displayed on one line.
2. Block-level elements can set the width, height property, and inline element settings are not valid.
3. The width of block-level elements is 100%, while inline elements determine their widths based on their own content or child elements.

Common:

Say it in detail,

.example{    width: 100px;    height: 100px;}

We <div> have the effect of setting the above style, because it is a block-level element, and it <span> is useless to set the above style. To be <span> able to change the width and height, it can be set display: block; to achieve the effect. When the value of display is set to block, the element is rendered in block-level form, and when the display value is set to inline, the element is rendered inline.

If you want the element to be displayed in line, and can be set to a wide height, can be set:

displayinline-block;

Inline-block, in my opinion, is to allow elements to be in an inline element, to be able to coexist with other elements in a row, and internally to have elements that are block-level elements that can change their width and height.

HTML code is run sequentially, and a page with no CSS-style HTML code is finally rendered based on the order and type in which the elements appear. Block-level elements are arranged from top to bottom, and encountered inline elements are arranged from left to right. Such a non-style case, the distribution of elements is called normal flow , the position of the element should be called normal position (this is I blind), at the same time all elements will occupy a space on the page, the size of the space is determined by its box model.

Box model

Each element displayed on the page (with inline elements) can be viewed as a box, the box model. See the Chrome DevTools:

It is clear that the box model consists of 4 parts. From inside to outside each is:

    Margin, border, padding, content

The width (height and so on) of an element should be calculated as such:

Total width = margin- left + border-left + padding- left + width + padding- right + border-ri Ght + margin- Right

But different browsers (you have not guessed wrong, that is, the unique browser) on the width of the interpretation is not the same. The Web browser thinks that the width of an element is only equal to the width of its content, and the rest is counted as an extra. So you specify an element:

.example{    width: 200px;    padding: 10px;    border: 5px solid #000;    margin: 20px;}

Then he should finally be the width of:

* 2) + border (5px * 2) + margin (20px * 2) = 270px;

And in IE (below IE9), the width is finally:

Widths = width (200px) + margin (20px * 2) = 240px;

I personally think that IE is more in line with human thinking, after all, padding called the inner margin, the border is counted as an extra width also say not go down. Finally, in order to solve the problem, the CSS3 added box-sizing this attribute. When we set it up box-sizing: border-box; , border and padding are included in the wide-height range, and the standard before IE is the same. Therefore, in order to avoid the same CSS in different browser performance different, it is best to add:

*, *:before, *:after{  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}

There are two special cases here:

• No width-absolute positioning (position:absolute;) element
• No width-floating (float) element

Their performance on the page does not occupy space (out of the normal stream, feeling like floating on the top of the page, moving them does not affect the positioning of other elements). This involves two other core concepts position and float.

Position

Position This property determines how the element will be positioned. It has a value of about five of the following:

Position Value	How to locate
Static	The default value of the position. The element will be positioned to its normal position (as mentioned above), which in fact is equivalent to no positioning. The element occupies a position on the page. You cannot use the top right bottom to move an element position.
Relative	Relative positioning, relative to the normal position of the element to be positioned. The element occupies the position in the page. can use top right bottom to move element position.
Absolute	Absolute positioning, relative to the recent level of positioning is not static parent element to be positioned. The element does not occupy the position on the page. can use top right bottom to move element position.
Fixed	Absolute positioning, which is positioned relative to the browser form . The rest, like absolute, is equivalent to a special absolute.
Inherit	Inherits the value of the Position property from the parent element.

The detailed effect can take the example of W3school, or write it yourself to be clear.

Each page can be viewed as a stack of layers of pages, such as what you see.

When the position is set to relative, the element is still in the normal flow, and the position is the regular position, and you can move the element by left right. Affects the location of other elements.

There are three things that happen when an element's position value is absolute or fixed:

1. The element is shifted in the direction of the Z-axis, the element is removed from the normal flow, so no longer occupy the original layer of space , but also cover the underlying elements.
2. The element becomes a block-level element , which is equivalent to setting the element display: block; (to an inline element, such as <span> setting absolute and finding it capable of setting the width height).
3. Assuming that the element is a block-level element, the width of the element is changed from the original width:100% (occupy one line) to auto.

From this view, when the position is set to absolute or fixed, it is not necessary to set display to block. And assuming you don't want to overwrite the underlying elements, you can set the Z-index value to achieve the effect.

Float

Float as the name implies, is the element floating, its value of a common four: left right none inherit, the light to see the name to understand, needless to say.

The initial float was only used to achieve text around picturesEffect, that's all. And now the application of the float has more than this, the predecessors have written countless blog in layman's interpretation of it.

Shallow as:
Experience Sharing: CSS Floating (float,clear) Popular commentary is not long, easy to understand, to read this article and then back to look at this article.
Deep as:
The deep research, concrete explanation and development of CSS float float (i.)
The deep research, concrete explanation and development of CSS float float (ii.)
The principle of float is explained in essence.

I don't swim write the principle, just say a few points of float:

1. There are only left and right floats, not up and down.
2. After the element is set to float, it will break out of the normal stream (and the position: absolute; same), no longer occupy the original layer of space, and will cover the next layer of elements.
3. Floating does not have any effect on the element's previous sibling element.
4. After the float, the next sibling element of the element clings to the element before it is set to float (it is very well understood that the next element of the element will, of course, fill its position because it is out of the ordinary stream, or is not in this layer).
5. Assuming that the element has an inline element (typically text) in the next sibling element, it will be displayed around the element, creating an effect similar to "wrap text around a picture"

1. The next sibling element assumes that float is also set in the same direction, and then it is displayed immediately after the element.
2. The element becomes a block-level element , which is equivalent to setting the element display: block; (and the position: absolute; same).

Here's another thing that's well-known-- clear the float . Detailed methods are various, can see this: those years we have cleared the float, I will not say more.