CSS3 邊框大小
box-sizing 屬性
允許以特定的方式定義匹配某個區(qū)域的特定元素。
默認值： ? ? ? ? content-box
JavaScript 語法： ? ? ? ? object.style.boxSizing="border-box"
語法
box-sizing: content-box|border-box|inherit;
content-box：寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
border-box：為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit：規(guī)定應從父元素繼承 box-sizing 屬性的值。
如果在元素上設置了 box-sizing: border-box; 則 padding(內邊距) 和 border(邊框) 也包含在 width 和 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>不使用 CSS3 box-sizing 屬性
默認情況下，元素的寬度與高端計算方式如下：
width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度
height(高) + padding(內邊距) + border(邊框) = 元素實際高度
<!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>
