Home > Article > Web Front-end > Boostrap entry preparation border box_javascript skills

Boostrap entry preparation border box_javascript skills

WBOYOriginal: 2016-05-16 15:01:282008browse

In the process of learning Bootstrap, I encountered all kinds of strange pitfalls. If you do the preparations before learning bootstrap, you can more or less avoid some pitfalls. Next, the editor will start to introduce to you the knowledge of border-box attribute.

In the css file that comes with Boostrap: boostrap.css, there is this 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 exactly is this box-sizing:boder-box? Let’s take a look at a very common piece of code first:

<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 and you will get: the height of the outer is 702px, the width is 702px, the width of the inner is 500px, the height is 500px; everyone should have no doubts here, let’s 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 pieces of code. It can be simply understood as starting to write the code in the Boosttrap framework. The result of running the code is: the outer width is 500px and the height is 500px; the inner Width and height are 298px;

The reason for this result is: box-sizing: border-box makes the width and height of the element not affected by padding and border. For example, in the above code, even if the outer has padding and border, padding and border are not affected. It will affect the width and height of the outer, which is still 500px; but where do the padding and border go? Answer: ran inside! Open the browser's debugging tool and see the outer style details:

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

If you have experience in web development under IE, you will find that box-sizing: border-box is a weird mode of lower versions of IE.

The above is the knowledge about the border box that the editor introduces to you to prepare for getting started with Boosttrap. Have you all learned it? If you have any questions, please leave me a message and the editor will reply to you in time. At the same time, thank you very much for your support of the Script House website!

Let me introduce to you the understanding of box-sizing border-box

-webkit-box-sizing: border-box; then the width and height set by the div will include the border 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" > 普通</div>
<div class="testdiv" style=" -webkit-box-sizing: border-box;">
特殊
</div>
</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Bootstrap imitates the effect of Chopsticks home page_javascript skillsNext article：Bootstrap imitates the effect of Chopsticks home page_javascript skills

See more

Boostrap entry preparation border box_javascript skills

Related articles