box
Box
sizing
##size英['saɪzɪŋ] 美[ 'saɪzɪŋ]
css box-sizing property syntax
Function:The box-sizing attribute allows you to define specific elements that match a certain area in a specific way. For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This causes the browser to render a box with the specified width and height, and put the borders and padding into the box.
Syntax: box-sizing: content-box|border-box|inherit
Description: content-box This is provided by Width-height behavior specified by CSS2.1. The width and height are applied separately to the element's content box. Draws the element's padding and borders outside of its width and height. border-box The width and height set for an element determine the element's border box. That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively. inherit specifies that the value of the box-sizing property should be inherited from the parent element.
Note: Internet Explorer, Opera and Chrome support the box-sizing attribute. Firefox supports an alternative -moz-box-sizing property.
css box-sizing property example
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
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">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
</body>
</html>Click the "Run instance" button to view the online instance