盒子模型,针对html 的每个元素
- 盒子壁 :border
- 内边距 :padding
内容 :height+width
padding : top right bottom left ( 四个值 顺时针 )
padding : top (right left )bottom (三个值)
padding : (top bottom) (right left ) (两个值)
padding : (top bottom right left ) (一个值)
小测试:求盒模型的真实高度和宽度(看到的图形的高和宽)
div{
width: 100px;
height: 100px;
border:10px solid black;
padding: 10px 20px 30px;
margin :10px 20px;
}
realWidth=100px+20px(border)+40px(padding)=160px;
realHeight=100px+20px(border)+(10px+30px)(padding)=160px
margin不在计算范围内。