CSS3 邊框大小
box-sizing 屬性
允許以特定的方式定義符合某個區(qū)域的特定元素。
默認(rèn)值： ? ? ? ? content-box
JavaScript 語法： ? ? ? ? object.style.boxSizing="border-box"
語法
box-sizing: content-box|border-box|inherit;
content-box：寬度和高度分別套用到元素的內(nèi)容框。在寬度和高度之外繪製元素的內(nèi)邊距和邊框。
border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒。是說，為元素指定的任何內(nèi)邊距和邊框都會在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪製。透過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
inherit：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
如果在元素上設(shè)定了box-sizing: border-box; 則padding(內(nèi)邊距) 和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 現(xiàn)在是一樣大小的!</div>
<br>
<div class="div2">php中文網(wǎng)</div>
</body>
</html>
不使用CSS3 box-sizing 屬性
#預(yù)設(shè)情況下，元素的寬度與高階計算方式如下：
# width(寬) + padding(內(nèi)邊距) + border(邊框) = 元素實(shí)際寬度
height(高) + padding(內(nèi)邊距) + border(邊框) = 元素實(shí)際高度
<!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> 
