The box-sizing attribute
allows specific elements to be defined in a specific way to match a certain area.
Default value: Content-box
JavaScript syntax: object.style.boxSizing="border-box"
Syntax
box-sizing: content-box|border-box|inherit;
content-box: Width and height are applied to the element's content box respectively. Draws the element's padding and borders outside of its width and height.
border-box: The width and height set for the element determine the border box of the element. 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 attribute should be inherited from the parent element.
If box-sizing: border-box; is set on the element, padding (padding) and border (border) are also included in width and height:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网</div>
</body>
</html>
Do not use the CSS3 box-sizing property
By default, the width and height of an element are calculated as follows:
width(width) + padding(padding) + border(border) = actual width of element
height(height) + padding(padding) + border(border) = actual height of element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html> 