1、标准盒子的尺寸计算
盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框
盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子自身尺寸</title> 6 <style> 7 div.box1{ 8 width:200px; 9 height:200px; 10 padding:20px; 11 border:5px red solid; 12 } 13 /*盒子自身的宽度:200px + 20px*2 + 5px*2 = 250px*/ 14 /*盒子自身的高度:200px + 20px*2 + 5px*2 = 250px*/ 15 16 17 div.box2{ 18 width:200px; 19 height:200px; 20 padding:20px; 21 border:5px red solid; 22 margin:50px 100px; 23 margin-left:-100px;/*当左侧外边距变为负值:盒子的占位宽度:200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/ 24 } 25 /*盒子占位的宽度:200px + 20px*2 + 5px*2 + 100px*2= 450px*/ 26 /*盒子占位的高度:200px + 20px*2 + 5px*2 + 50*2 = 350px*/ 27 28 /* 当盒子的外边距为负值时，盒子占位的尺寸有可能小于盒子自身的尺寸*/ 29 </style> 30 </head> 31 <body> 32 <div class="box1"></div> 33 34 box2前面的文字 35 <div class="box2"></div> 36 box2后面的文字 37 </body> 38 </html>