Borderbox_javascript skills for getting started with bookers

In the course of learning Bootstrap, we encountered various strange pitfalls. If we had to make preparations before learning bootstrap, we could have avoided some pitfalls more or less. The following section describes the attributes of border-box. If you are interested in learning Bootstrap together, you may encounter various strange pitfalls during bootstrap learning. If you do well in preparation before learning Bootstrap, you can avoid them more or less. The following section describes the attributes of border-box.

In boostrap.css, the built-in css file boostrap.css contains the following code:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

This means that this attribute will be everywhere when writing code. So what the hell is this box-sizing: boder-box? Let's take a look at a common piece of code:

Run the code to conclude that the outer height is 702px, the width is 702px, the inner width is 500px, and the height is 500px. There should be no doubt here. Let's take a look at another piece of code:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
 
 
 

This code is actually the addition of the first two sections of code. It can be simply understood that the Code is now written in the Boostrap framework. The code running result is: the outer width is PX, the height is 500px, and the inner's width and height are 298px;

The reason for this is: box-sizing: border-box makes the element width and height not affected by padding and border. The code above, even if the outer has padding, border, however, neither padding nor border will affect the width and height of the outer. The width and height of the outer are still PX. But where does the padding and border go? Answer: go inside! Open the debugging tool of the browser and view the outer style details:

We can clearly see that padding and border are both valid, but they occupy the internal space of the outer, because padding: 100px occupies the high value of 200px width of the outer, border occupies the 2px width value, so the inner can only get the 298px width value.

If you have web development experience in ie, you will find that box-sizing: border-box is the weird mode of earlier ie versions.

The above section describes the border box-related knowledge of bootup. Have you learned it? If you have any questions, please leave a message for me. The editor will reply to you in time. At the same time, I would like to thank you for your support for the website!

The following describes how to understand box-sizing border-box.

-Webkit-box-sizing: border-box; the width and height set by p will contain the border and padding.

Box-sizing
Normal
Special