Before, I encountered various strange pitfalls when learning Bootstrap. If I do my preparatory work before learning bootstrap, I can avoid some pitfalls to a greater or lesser extent. Below, the editor will introduce you to the knowledge of the border-box attribute.
In Boostrap's own css file: boostrap.css, there is a piece of code:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }This means that when writing code, this property will be everywhere. So what the hell is this box-sizing:boder-box? Let's first look at a very ordinary piece of code:
<div> <div></div> </div>
Run the code to find out: the outer height is 702px, the inner width is 500px, and the height is 500px; everyone should have no doubts here, let's take a look at another piece of code now:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } <div> <div></div> </div>This code is actually the addition of the first two codes. It can be simply understood that now you start writing code in Boostrap's framework. The result of the code running is: the width of the outer is 500px and the height of the inner is 298px;
The reason for this result is: box-sizing: border-box so that the width and height of elements will not be affected by padding and border. For example, in the above code, even if the outer has padding and border, padding and border will not affect the width and height of the outer, and the width and height of the outer is still 500px; but where did padding and border go? Answer: Go inside! Open the browser's debugging tool and see the style details of the outer:
We can clearly see that padding and border are both valid, but they occupy the inner space of the outer. Since padding:100px occupies the 200px width and height value of the outer, and border occupies the 2px width and height value of the inner, so the inner can only obtain the 298px width and height value of the outer.
If you have experience in web development under ie, you will find that box-sizing:border-box is the weird mode of the lower version of ie.
The above is the relevant knowledge about Boostrap preparation for border box introduced to you by the editor. Have you learned it? If you have any questions, please leave me a message and the editor will reply to everyone in time. At the same time, I would like to thank everyone for their support for Wulin.com website!
Below is a brief introduction to the understanding of box-sizing border-box
-webkit-box-sizing: border-box; then the width and height set by the div will include borders and padding
<!DOCTYPE html><html><head><title>box-sizing</title><style type="text/css">.testdiv{padding: 10px;;width:100px;border: 10px solid}</style></head><body ><div > Normal</div><div style=" -webkit-box-sizing: border-box;">Special</div></body></html>