盒模型的实际尺寸
按照下面代碼制作頁面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>盒子的真實尺寸</title><style type="text/css">.box01{width:50px;height:50px;background-color:gold;}.box02{width:50px;height:50px;background-color:gold;border:50pxsolid #000}.box03{width:50px;height:50px;background-color:gold;border:50pxsolid #000;padding: 50px;}</style> </head> <body><div class="box01">1</div><br /><div class="box02">2</div><br /><div class="box03">3</div> </body> </html>頁面顯示效果如下：
通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
轉載于:https://www.cnblogs.com/jyue/p/10502365.html
總結
- 上一篇： JavaEE XML的读写（利用JDom
- 下一篇： SQL语句复习【专题八】