通常我們設置元素的寬和高樣式經常會出現一些問題,比如以下css的設置： 比如以下的代碼： 實際上我們期望的結果可能是這樣: 但是實際上是這樣的: 因為我們實際的寬度和高度是這樣計算出來的: width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度 height(高) ...
通常我們設置元素的寬和高樣式經常會出現一些問題,比如以下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的值了,即：
