Four concepts of CSS core (excerpt)

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:

1. 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.

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

3. 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> , the inline elements are there <span> <a> , and so on, the complete list of elements can be Google.

Specifically,

.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 style above. To make <span> it possible to change the width and height, you can set it up 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-blockIt seems to me that the element can be inline with other elements, and it will be in the same line as the other element, and it will change its width and height by making the element appear as a block-level element.

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:

content -> padding -> border -> margin

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

总宽度 = 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:

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

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

宽度 = 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 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 the following five kinds of values:

The specific effect can be referred to, 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:

1. 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.

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
   After that it can be set to a wide height).

3. 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.

The principle of float is explained in essence.

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

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

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 previous sibling element of the element.

4. 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).

5. 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."

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

7. 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. There are a variety of specific methods, you can see this: those years we have cleared the float, I will not say more.

After writing this article, there is a series of questions in my mind, if position and float are set at the same time what will happen? How is compatibility? Which property will be overwritten? Before the time to practice, another day to arrange a combination of ways to see exactly what effect ... If anyone has practiced it, you can tell me secretly ^_^

Geekplux
Article from: http://www.geekplux.com/2014/04/25/several_core_concepts_of_css.html

Mu Class Round Table

1. What CSS key concepts do you share with us?

2, if you have Help, send a bar!

Come and comment, welcome all kinds of spit groove, Mu class June at any time to chat with you, to help you on the headlines!

Related courses

Zhang Xinxu Teacher's "css in-depth understanding series"

1.CSS in-depth understanding of float float

http://www.imooc.com/learn/121

2.

http://www.imooc.com/learn/192

3.CSS in-depth understanding of the overflow (click to read)

4.CSS in-depth understanding of the Line-height (click to read)

Jevin Recommended:

Summary of 12 advanced CSS Tips

The most full HTML and CSS layout tips in history

Change and invariant in CSS design (click to read)

Mu class net

Weibo: @ mu class Network

Four concepts of CSS core (excerpt)