Css3 uniform element width and height, CSS 3 Uniform Element

Css3 uniform element width and height, CSS 3 Uniform Element

We usually encounter some problems when setting the width and height of elements, such as the following css settings:

For example, the following code:

<! DOCTYPE html> 
In fact, the expected result may be as follows:

 
But it is actually like this:

Because the actual width and height are calculated as follows:
Width (width) + padding (padding) + border (border) = actual element width
Height (height) + padding (padding) + border (border) = actual height of the element
If you want to achieve the desired effect, you can add the style box-sizing: border-box for each div, so that the values of width and height are
Includes the border and padding values, namely: