CSS - 盒子模型

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

内容：（content）盒子里面的东西；

填充：(padding)怕盒子的内嵌泡沫；

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

可以简写为{ padding: 20px 10px 15px 30px;}(顺时针 上 右 下 左）
上下一致 左右一致：{padding:20px 20px;}
若四方填充为相同的格式{padding:20px;}

边框：(border)盒子本身

1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）

li{
    border-bottom:1px dotted #ccc;   
    width:200px;
    height:30px;
}

可以简写为{ border: style color width; }(不计顺序）

边界：(margin)盒子的叠放边界

在网页上内容常指文字、图片等元素，但也可以是小盒子（div嵌套）