网页盒模型参数设置及计算

 

padding、margin、border值个数对应的控制边位置

•  1个值表示上、右、下、左 四个方向
• 2个值表示上下、左右四个方向
• 3个值表示上、左右、下四个方向，即第二个值表示左右两个方向的边距（一个盒子，左右等距的情况更多）
• 4个值分别表示上、右、下、左四个方向的边距

盒子可视区大小

例子：

div{

width:100px;

height:100px;

background-color:red;

border:10px solid black;

padding:10px 20pd 30pd;

margin:10px 20px;

}

 

 

真正盒子的宽高（不含margin，即有颜色区域宽高）

高度：border上10+padding上10+content100+padding下30+border下10=160

宽度：border左10+padding左20+content100+padding右20+border右20=160