In-depth understanding of CSS Series (i): Understanding CSS Box Models

Contact the front end has several years, but, to tell the truth, for CSS the understanding really is not to compliment, I believe many colleagues also have similar feelings! What is this for? Because we all think CSS too simple, there is no need to study deeply, if so? In fact, it is only the Tucson of their own drawings. If it's really that simple, why do you often encounter some strange style problems and toss them for a long time? is because of the impossible, after all, or the foundation is not solid AH! Recently intends to study in depth CSS , in order to encounter problems, only to know how to start, so quickly to the remedy. "In-depth understanding" is only relative to my personal, ha, if there is a great God does not feel deep enough, please do not like to spray. This is the first in-depth understanding CSS , the main introduction CSS的盒子模型 .

What is a box model

Speaking of the box model, as the front-end development of our, I believe we have learned. Here is an explanation of the MDN official website:

In a document, each element is represented as a rectangular box. Determine the size of these boxes, properties---like its color, background, border aspect---and position is the target of the render engine.
In CSS中 , use a standard box model to describe each of these rectangular boxes. This model describes the content of the space occupied by the element. Each box has four edges: margin edge, Border edge, padding edge, and content edge.

The official language is always so obscure, so I'll use Chrome's console to illustrate it:

The outermost orange is the margin area (), the margin area yellow is the border area (), and border area then the green is the inner margin area (), the innermost padding area green is the content area ( content area ).

The role of the box model

Well, the concept of the box model seems to have nothing to say, just the picture above. Let's take a look at how the box model affects our layout. To raise a chestnut, if you want to set the size of an element to be 200px , if you write the following code:

<style>  .box {    width: 200px;    height: 100px;    padding: 20px;  }</style><div class="box">  盒子模型</div>

As a result, when you examine the element, you find that the size of the element becomes 240px , instead of 200px .

What is this for? Because by default, setting width , and height so on is the content area, so set width: 200px only the width of the content area, plus the left and right padding size, resulting in the overall size of the element becomes larger. This is different from our understanding of the box in the real world. For example, you we say that the size of the house, and not only refers to the usable area, but also include wall thickness, balcony, elevator and other space.

Box models and Box-sizing

In order to correspond with the CSS real world, box-sizing this time will be used to play. box-sizingis used to set width , height the object of the action. There are three values, each of which is content-box ,, paading-box border-box , and the default value is content-box . Someone might ask, why not margin-box ? Specific reasons do not know, you can refer to the Zhang Xinxu teacher in the "CSS World" in the book mentioned two reasons:

• margin-boxNot much value in itself
• marginconflicts with the specifications. Because the margin specification says " margin The background is always transparent", if you come to a margin-box , then background what?

As for why there is no margin-box simple mention, interested friends can check it out for themselves.

Best practices

For the convenience of layout, some experts recommend that we set all the elements to box-sizing: border-box , for specific reasons can refer to this article: International box-sizing Awareness Day

If you do not consider the lower version of the browser, you can use the following code:

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

Later, there were also expert suggestions for the inherited method, as follows:

html {  box-sizing: border-box;}*,*::before,*::after {  box-sizing: inherit;}

This method is called the best practice, for specific reasons not to say, refer here: Inheriting box-sizing Probably slightly Better best-practice# inheriting box-sizing Probably Slightly Better Best-practice

Since it is the expert recommendation, we can later put the second method of the section code into the reset.css inside.

Well, first write so much, too long without the words, feel write a word also very painful ah.
This is the first in-depth understanding of CSS, to tell the truth, I also admit to write a bit not in-depth, this can not blame me, because too long has not written blog, it is really hard to meditate to write well, then a simple knowledge point as the beginning of it.

A question of welcome in the discussion of the Exchange ha ~

In-depth understanding of CSS Series (i): Understanding CSS Box Models