html+css 盒子模型

盒子模型，针对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不在计算范围内。