css盒子模型（一目了然）

盒子模型结构

盒子的总宽度=content+padding+border+margin
实例-尝试一下（【注】：以下示例均来自菜鸟教程）

   *{
   margin: 0 ; 
   padding: 0; /*对浏览器的默认值进行清零*/
   }

margin属性

   margin: 0 auto;	 /*可以使div容器自动水平居中*/
   margin-top: 5px; 上
   margin-right: 5px; 右
   margin-bottom: 5px; 下
   margin-left: 5px; 左

【注】：font-size：0（去掉两个水平图片之间的空隙，两个水平图片之间会有系统默认的空隙）

margin可以在垂直方向上合并，水平方向上不合并
取值大的一方，即为合并后的外边距大小

margin: top right bottom left; 顺时针

overflow属性

/*当内容溢出盒子框时，overflow属性取值*/
   overflow: hidden; /*超出部分不可见*/
   overflow: scroll; /*显示滚动条*/
   overflow: auto; /*如有超出部分，显示滚动条*/

点击查看overflow用法示例

borders属性

border-style：

none (无) dotted （虚线） dashed （虚线） solid （实线） double（双边框）
更多用法示例

border-color:
name - 指定颜色的名称，如 “blue”
RGB - 指定 RGB 值, 如 “rgb(255,255,0)”
Hex - 指定16进制值, 如 “#ffff00”
!( border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。)

border-width:
边框设置宽度有两种方法：可以指定长度值，比如 2px (单位为 px, pt, cm, em 等)，或使用 3 个关键字之一，分别是 thin 、medium（系统默认） 和 thick。
宽度示例

拓展