CSS3 box-sizing property
Question
I don't understand how should I use box-sizing property. Because this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.container
{
width:10em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
</div>
</body>
</html>
is equivalent to this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.container
{
width:10em;
border:1em solid;
}
div.box
{
width:3em;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
</div>
</body>
</html>
So when should I use that property and that exactly that do? I used example from w3 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
5 answers
solution1
4 ACCPTED 2012-08-30 11:22:53
box-sizing: border-box is most useful when you can't specify an exact content width based on the margins, borders and padding of a box, because you don't know in advance (and can't control) what these values are.
In your first example, if you didn't know how much padding was in the box or how thick its borders were, making it use the border-box model allows you to just set width: 50% to ensure that the box will always take up 50% width of its container, regardless of borders and padding. In the second example, if you had set width: 50% that's the width of the content; the borders and padding would add to it, causing it to actually expand beyond 50% of the width of its container.
solution2
3 2012-08-30 11:23:23
in the first example you're setting width to 50% plus some border, but due to the presence of the property box-sizing:border-box; the whole width includes borders inside so the box is 50 % wide with borders (and optionally padding, if you have any)
and this is equivalent to the second example — without box-sizing:border-box; — in which the total width is 1em + 3em + 1em = 5em , that is 50% of 10em
solution3
3 2012-08-30 11:24:47
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
Note: Do not ever use http://www.w3schools.com/ for learning. For more details see w3fools.com
solution4
0 2012-08-30 11:49:00
Actually when we use padding in our div elements on vertical and horizontal basis its add the padding in total width and height.
like our div width is 100px and we give 5px padding from left and right side so div will calculate total of 100px + 5px + 5px = 120.
so if we use box-sizing property here so we will not need to adjust the width because it will not calculate the extra width for padding .
see the demo : - http://tinkerbin.com/JtOC6ZJr
solution5
-1 2012-09-08 10:24:23
One caveat while using the Flexible Box Model is that this module is still a draft and cross-browser support and implementation is still patchy. You can find a good post about the subject http://webdevhub.co.uk/css3-flexible-box-model/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.