A box – sizing: border – box

1. Basic cognition

The following DOM elements are 100px wide and high.

Now there is a requirement that the element be 100px width, height, and padding value be 10px, so it looks like this.

You can see that the two element is a circle larger than the one element because of the padding: 10px property on the two element, which changes the width and height of the two element.

So after adding box-sizing: border. See below.

So the width and height of three is 100px and the padding is 10px. That’s what you need.

2. Box-sizing: border-box

The basic layout of the DOM element before box-sizing: border-box is not set.

The content area width/heigth = specified width/height (e.g. 100px)

Set the basic layout of the DOM element after box-sizing: border-box.

That is, the width of the content area +padding+border = the total width (e.g. 100px). The padding and border properties actually split the width of the content area.

Again, take the previous properties. If you don’t have a good idea, look at the picture below.

3. Model structure

1.two(box-sizing: border-box)

Box-sizing: border-box

2. Box-sizing: border-box

Box-sizing: border-box

Most of the introduction of this paper is in the form of pictures to understand, only interspersed with some text description, not in accordance with the conventional form of description. Box-sizing: border-box (MDN) box-sizing: border-box (MDN)