The core concept of CSS

This article will describe some of the most important concepts in CSS, including: Box model, position, float, and so on. These are the basis of CSS and the most commonly used properties, 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:

Block-level elements will have a single row (that is, they cannot be displayed in the same row as other elements unless you explicitly modify the display property of the element) and inline elements are displayed in one line.

Block-level elements can set the width, height property, and inline element settings are not valid.

The width of block-level elements defaults to 100%, while inline elements determine their widths based on their own content or child elements.

The most common block-level elements should be <div>, inline elements have <span> <a> , and so on, the complete list of elements can be Google a bit.

Specifically,

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

We set the above style for <div>, which is effective because it is a block-level element, and it is useless to set the above style to <span>. To make <span> can also change the width of the height, can be set by 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, you can set:

Display:inline-block;

Inline-block, in my opinion, is to allow elements to be in an inline element, to coexist with other elements and within a line, and to change the width of the element to a block-level element internally.

HTML code is executed sequentially, and an HTML code without any CSS style ultimately renders a page that is arranged according to 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. In this non-styled case, the distribution of the element is called the normal flow, the position of the element should be called the normal position (which I am blind), and all elements 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, including inline elements, can be viewed as a box, the box model. See the Chrome DevTools:

It can be obvious that the box model consists of 4 parts. From inside to outside are:

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-right + margin-right

But different browsers (you're not wrong, that's the one that's different) the interpretation of the width is not the same. The Web browser thinks that the width of an element is 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 his final width should be:

Widths = width (200px) + padding (10px * 2) + border (5px * 2) + margin (20px * 2) =  270px;

In IE (below IE9), the final width is:

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 this problem, the CSS3 added box-sizing this attribute. When we set 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 the following five kinds of values:

The specific effect can refer to the W3school instance, or write it yourself to understand.

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

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:

The element is shifted in the direction of the Z-axis, the element is out of the normal flow, so it no longer occupies the original layer of space, but also covers the underlying elements.

The element becomes a block-level element, which is equivalent to setting a display:block for the element; (to an inline element, such as <span>, after setting absolute, it can be set to a wide height).

If the element is a block-level element, the width of the element is changed from the original width:100% (occupy one row) to auto.

Thus, when the position is set to absolute or fixed, there is no need to set display to block. And if 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, it is the element floating, its value a total of four: Left right none inherit, the light to see the name to understand, no need to say.

The initial float was just for the effect of wrapping text around a picture, that's all. And now the application of float has more than this, the predecessors have written countless blog to explain it in layman's words.

I will not swim write the principle, just say a few points of float on the line:

Only left and right floating, not up and down floating.

After the element is set to float, it is detached from the normal stream (and Position:absolute; Same), no longer occupy the original layer of space, but also cover the next layer of elements.

Floating does not have any effect on the previous sibling element of the element.

After the float, the next sibling element of the element clings to the element before it is set to float (it is well understood, because the element is out of the ordinary stream, or is not in this layer, so its next element will of course fill its position).

If the element's next sibling element has an inline element (usually text), it is displayed around the element, creating an effect similar to "text around a picture."

Next sibling element If float is also set in the same direction, it will be displayed immediately after the element.

The element becomes a block-level element, which is equivalent to setting the Display:block for the element; (and Position:absolute; Same).

Here's another thing that's well-known--clear the float. There are a variety of specific methods, you can see this: those years we have cleared the float, I will not say more.