Getting the CSS box model (four sixths)

Box model knowledge points

Be sure to pay attention to see, this is the front end of the interview will certainly encounter problems.

• box-sizing

  The main attribute CSS box model, in addition to inheriting two values:

  1. content-box

     Here historical reasons not elaborate, saying only that role.

     content-box element of the tag occupied by a physical pixel area calculating method is expressed as: padding, width and height of + + + border margins

  2. border-box

     The label border-box element occupies a physical pixel area calculating method is expressed as: width and height, padding, maximum border margins +

     Here that the width and height is width and height, or is a child of the tag CSS properties hold up to the size.

     Here are three other related properties

• Padding (padding)

  First, you think of a cube box, inside there is a small little box, then inside the box and outside the box is separated by a region within the margin for doing HTML tags concretization as follows:

  

  The red area is within the margin

• Borders (border)

  Frame is literally that HTML concretization follows:

  

  Which is the black border

• Margins (margin)

  Margin is the distance or pitch of notes between the parent tag label edges. Strictly speaking, regardless of the size of the label, but the impact on the visual location. HTML debugging concrete images to be pointed out as follows:

  

  One of the outermost yellow area is the margin of.

  Note: margin can be negative; the upper and lower margin inline tag is invalid.

---

If you do understand the above concept, the following explanation and illustration, specific details of said calculated size of the label, where noted, the label size is the physical size of the pixel , rather than that of the above physical pixel region .

The share is the actual size of the pixel values, and the area occupied by a margin is included in the margins.

Note that the calculation time, padding and border can have all four sides.
The official definition of border-box means the padding and border width and height are counted, ambiguous understanding, so you just wh value as the maximum value to the padding and border.

---

Tips

Border-box is strongly recommended to use in practice, the actual work or project, then customize good padding and border possibility to modify these two values much lower than the possibility to do so, it can border-box border-box to use it, * {box-sizing: border-box;}might be a good habit.

Otherwise UI throw you a pixel size of 80 * 80 style, you go to split it.

---

Source Related

CodePen

If the article a little help to you, I was very happy.
Like the article, then please pay attention to my regularly publish articles related technology, are full of dry goods.

---