In the css file: that comes with Boostrap, there is a piece of code like this:
* {
-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 class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> <div class="inner" style="width:100%; height:100%; background-color:pink;"></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 questions 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 class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; ">
<div class="inner" style="width:100%; height:100%; background-color:pink;"></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: I ran 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 outer 200px width and height value, and border occupies the 2px width and height value, the inner can only obtain the 298px width and height value.
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. Thank you very much for your support for my 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 class="testdiv" > ordinary</div>
<div class="testdiv" style=" -webkit-box-sizing: border-box;">
special
</div>
</body>
</html>