css3統一元素的寬和高，css3統一元素

css3統一元素的寬和高，css3統一元素

     通常我們設定元素的寬和高樣式經常會出現一些問題,比如以下css的設定：

比如以下的代碼：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>菜鳥教程(runoob.com)</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>

實際上我們期望的結果可能是這樣:

 

但是實際上是這樣的:

因為我們實際的寬度和高度是這樣計算出來的:

width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度

height(高) + padding(內邊距) + border(邊框) = 元素實際高度

 如果想要取得理想的效果可以針對每個div添加樣式  box-sizing:border-box,這樣width和height的值也就

包括border和padding的值了,即：