Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the common core concepts of CSS have related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have some gains after reading this CSS common core concepts, let's take a look.

Several core concepts in CSS, including: box model, position, float and so on. These are the foundations of CSS and some of the most commonly used attributes, which seem independent but complement each other.

Element type

The elements of HTML can be divided into two types:

Block level element (block level element)

Inline element (inline element is also called inline element by some people)

The difference between the two is the following three points:

Block-level elements occupy a single line (that is, they cannot be displayed on the same line as other elements unless you explicitly modify the display attribute of the element), while inline elements are displayed on one line.

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

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

The most common block-level elements should be, inline elements have

Wait, you can Google the complete list of elements.

.example {

Width: 100px

Height: 100px

}

It is effective for us to set the above style, because it is a block-level element, but it is useless for setting the above style. If you want to change the width and height, you can set display: block; to achieve the effect. When the value of display is set to block, the element is rendered at the block level; when the value of display is set to inline, the element is rendered inline.

If you want the element to be displayed in the line while setting the width and height, you can set the following:

Display: inline-block

In my opinion, inline-block is to make an element inline, so that it can coexist with other elements in a line, while internally, it makes an element at the block level, which can change its width and height.

The HTML code is executed sequentially, and a copy of HTML code without any CSS style ends up rendering the page in the order and type in which the elements appear. Block-level elements are arranged from top to bottom, and inline elements are arranged from left to right. In this case without style, the distribution of elements is called normal flow, and the location of elements should be called normal position (which I made up), and all elements will occupy a space on the page, the size of which is determined by its box model.

Box model

Each element displayed on the page, including inline elements, can be thought of as a box, the box model (box model). Take a look at the screenshot in Chrome DevTools:

It is obvious that the box model consists of four parts. From the inside to the outside are:

Content-> padding-> border-> margin

In theory, 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

But different browsers (you're right, that's the different browser) have different interpretations of width. W3C-compliant browsers assume that the width of an element is only equal to the width of its content, and the rest is extra. So you specify an element:

.example {

Width: 200px

Padding: 10px

Border: 5px solid # 000

Margin: 20px

}

Then his final width should be:

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

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

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

Personally, I think IE is more in line with human thinking. After all, padding is called inner margin, and the border can't be counted as extra width. Finally, in order to solve this problem, the W3C added the attribute box-sizing to CSS3. When we set box-sizing: border-box;, border and padding are included in the width and height, the same as the previous IE standard. So, to prevent you from performing the same css differently in different browsers, it's best to add:

*, *: before, *: after {

-moz-box-sizing: border-box

-webkit-box-sizing: border-box

Box-sizing: border-box

}

There are also two special cases:

No width-absolute positioning (position: absolute;) element

No width-floating (float) element

None of them takes up space on the page (away from the normal flow, it feels like floating at the top of the page, and 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 the element will be positioned. There are about five values:

The specific effect can refer to the example of w3school, or write it yourself.

Each web page can be seen as stacked by one layer of pages, as shown in the following figure.

When position is set to relative, the element is still in the normal stream, the position is normal, and you can move the element through left right and so on. Affects the position of other elements.

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

Move the element one layer in the direction of the Z axis, the element is out of the normal flow, so it no longer occupies the space of the original layer, but also covers the elements of the lower layer.

This element becomes a block-level element, which is equivalent to setting display: block; for the element (for an inline element, for example, after setting absolute, you find that it can set width and height).

If the element is a block-level element, the width of the element changes from width: 100% (occupying a line) to auto.

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

Float

Float, as the name implies, is to float the element. There are four values for it: left right none inherit. You can understand it just by looking at the name, without saying much.

The original float was only used to achieve the effect of text wrapping around the picture, that's all. Now the application of float is more than that, and the predecessors have also written numerous blog posts to explain it.

Instead of playing tricks on the principles of writing, I will just talk about a few key points of float:

It only floats left and right, not up and down.

After the element sets float, it breaks away from the normal flow (like position: absolute;), no longer occupies the space of the original layer, and overwrites the elements of the next layer.

The float has no effect on the previous sibling of the element.

After floating, the next sibling element of the element immediately follows the element that did not have float set before it. (it's easy to understand, because the element is out of the normal stream, or is no longer at this level, so its next element certainly has to fill its position).

If there is an inline element (usually text) in the next sibling element of the element, it is displayed around that element, creating a similar "text around the picture" effect.

If the next sibling element also has float set in the same direction, it will be displayed immediately after that element.

The element becomes a block-level element, which is equivalent to setting display: block; for the element (same as position: absolute;).

There's another thing here, which is well known-- clearing floats.

This is the end of the article on "what are the common core concepts of CSS?" Thank you for reading! I believe you all have a certain understanding of "what are the common core concepts of CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.