一个盒子模型设置width，height，border，padding，magin后它在一个网页中最终占用多少空间？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> body{ margin: 0px; } #div1{ width: 300px; height: 300px; background: blue; border-width: 50px; border-style:solid; border-color: yellow; padding: 50px; margin: 50px; } </style> </head> <body> <div id="div1"> 盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试 盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试 盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试 盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试 盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试 盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试 </div> </body> </html>
效果如下图所示：
由此可见，一个盒子模型占用的空间为：(width+padding-right+padding-left+margin-right+margin-left)*(height+padding-top+padding-bottom+margin-top+margin-bootom)。
