Several core concepts of CSS

This article describes several core concepts in CSS, including the box model, position, and float. These are the foundation of CSS and the most common attributes. They seem independent but complement each other. In order to master them, it is necessary to write it out and discuss it. If there are any errors, please correct them.

Element type

HTML elements can be divided into two types:

Block level element (inline element) inline element (some people also call it an inline element)

The differences between the two are as follows:

A block-level element occupies only one row (that is, it cannot be displayed in the same row as other elements, unless you display and modify the display attribute of an element), and an inline element is displayed in one row. You can set the width and height attributes for block-level elements, but the inline element settings are invalid. The width of a block-level element is 100% by default, while that of an inline element is determined based on its own content or child element.

Common:

For details,

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

ForSetting the style above is effective because it is a block-level elementIt is useless to set the above style. To makeYou can also change the width and height by settingdisplay: block;To achieve the effect. When the value of display is set to block, the element is displayed in block-level form. When the value of display is set to inline, the element is displayed in the form of inline.

If you want to display elements in a row and set the width and height, you can set:

display: inline-block;

In my opinion, inline-block is used to make the element appear in an inline element, which can coexist with other elements in a row. In the internal structure, the element is made block-level element, which can change its width and height.

HTML code is executed sequentially. The pages displayed by an HTML code without any CSS style are arranged according to the order and type of the elements. Block-level elements are arranged from top to bottom, and inline elements are arranged from left to right. In this case, the distribution of elements is calledNormal streamThe position where the element appears should beNormal location(I am blind.) At the same timeAll elements occupy a space on the page.The space size is determined by the box model.

Box Model

Each element (including the inline element) displayed on the page can be considered as a box model ). See the following in Chrome DevTools:

The box model consists of four parts. From inside to outside are:

    content -> padding -> border -> margin

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

Total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

However, different browsers (You are not mistaken, that is, the different browsers) have different interpretations of the width. Browsers that comply with W3C standards think that the width of an element is only equal to the width of its content, and the rest should be calculated separately. Therefore, you define an element:

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

The final width should be:

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

In IE (lower than IE9), the final width is:

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

I personally think that Internet Explorer is more in line with human thinking. After all, padding is called the padding, and the border is regarded as an extra width. W3C added the box-sizing attribute in CSS3 to solve this problem. When we setbox-sizing: border-box;Border and padding are included in the width and height, which is the same as the standard before IE. Therefore, to avoid different css expressions in different browsers, you 'd better add:

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

There are two special cases:

No width -- absolute position (position: absolute;) element without width -- float Element

Their performance on the page isNo space occupied(Unlike a normal stream, it feels like floating on the upper layer of the page. Moving them does not affect the positioning of other elements ). This involves two other core concepts: position and float.

Position

The position attribute determines how elements are located. It has the following values:

Position Value	How to locate
Static	PositionDefault Value. The element is located at its normal location (as mentioned above), which is equivalent to no location. Element on the pageOccupyLocation.NoUse top right bottom left to move the element position.
Relative	Relative positioning: locates relative to the normal position of the element. Element on the pageOccupyLocation.YesUse top right bottom left to move the element position.
Absolute	Absolute positioning, relativeLast level Positioning is not staticParent element. Element on the pageNot occupiedLocation.YesUse top right bottom left to move the element position.
Fixed	Absolute positioning, relativeBrowser window. Like absolute, the rest is equivalent to a special absolute.
Inherit	Inherit the position attribute value from the parent element.

For the specific effect, refer to the w3school instance or write it yourself.

Each page can be seen as stacKed by a layer of pages, as shown in.

When the position is set to relative, the element is still in the normal stream, and the position is normal. You can move the element through left right and other methods. The location of other elements is affected.

When the position value of an element is absolute or fixed, three things will happen:

This element is moved to the Z axis by a layer, Elements are separated from normal streams, so they no longer occupy the space of the original layer.And overwrites the lower-layer elements. This element will Changed to block-level element, Which is equivalent to setting display: block;(Give an inline element, such , Set absolute and find that it can be set to width and height ). If the element is a block-level element, the width of the element changes from the original width: 100% (occupying a row) to auto.

As a result, when the position is set to absolute or fixed, there is no need to set display to block. If you do not want to overwrite the lower-layer elements, you can set the z-index value to achieve the effect.

Float

Float, as its name implies, is to float an element. Its value has four values: left right none inherit. You can understand the value simply by looking at the name. You don't need to talk about it any more.

The initial float is only used to implement Text surround Image. At present, float's application is far more than this, and our predecessors have written countless blogs to explain it in depth.

Shoru:
Experience Sharing: CSS float (clear) is easy to understand and can be viewed after reading this article.
Shen ru:
In-depth research, explanation and expansion of CSS float floating (I)
In-depth research, explanation and expansion of CSS float floating (2)
Essentially, this article explains the principle of float.

I will not write the principle out of work. I just want to talk about the several points of float:

Only floating around, not up or down. After the element is set to float, it will Exit from normal stream(And position: absolute;), It no longer occupies the space of the original layer, and will overwrite the elements of the next layer. Floating does not affect the previous sibling element of the element. After the element is floating, the next sibling element of the element will closely follow the element with no float set before the element (it is easy to understand, because the element is out of the normal stream, or is not in this layer, so the next element of it must fill in its position ). If the next sibling element of the element contains an inline element (usually text), it is displayed around the element to form an effect similar to "text around the image ".

If the next sibling element is set to float in the same direction, it will be immediately followed by the element. This element willChanged to block-level element, Which is equivalent to settingdisplay: block;(Andposition: absolute;).

There is another thing that is widely known --Clear floating. There are a variety of specific methods. You can refer to this article: I will not say much about the float we cleared together in those years.