盒子模型

• 盒子模型的简介
  内容区（content）
  内边距（padding）
  边框（border）
  外边距（margin）
  
  一、div块元素
• 边框
  要为一个元素设置边框必须指定三个样式
  border-width：边框的宽度
  border-color：边框颜色
  border-style：边框的样式
  　　可选值：
  　　none，默认值，没有边框
  　　solid，实线
  　　dotted，点状边框
  　　dashed，虚线
  　　double，双线
  width和height只是内容区的大小，而不是盒子的整个大小。
  盒子可见框的大小由内容区、内边距和边框共同决定。
  使用border-width可以分别指定四个边框的宽度。
  规律（适用于width、color、style）：
  如果设置四个值，上右下左，顺时针方向设置。
  如果设置三个值，上　左右　下。
  如果设置两个值，上下　左右。
  css中还提供了四个border-xxx-width、border-xxx-color、border-xxx-style，xxx可能是top　right　bottom　left。

　　border-width:10px　20px　30px　40px;

边框的简写样式，可以同时设置四个边框的样式、颜色、宽度、并且没有任何顺序要求，但是border一指定就是四个边同时指定，不能分别指定。
border-xxx可以单独设置四个边的样式。

• 内边距
  盒子的内容区与盒子边框之间的距离。
  通过padding-xxx可进行设置内边距。
  内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
  盒子可见框的宽度　=　border-left-width　+　padding-left　+　width　+　padding-right　+　border-right-width
  规律：
  如果设置四个值，上右下左，顺时针方向设置。
  如果设置三个值，上　左右　下。
  如果设置两个值，上下　左右。
• 外边距
  盒子与其他盒子之间的距离，不会影响可见框的大小，而是影响盒子的位置。盒子有四个方向的外边距：
  margin-xxx由于页面中的元素都是靠左上摆放，当设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置。如果外边距设置的是负值，则元素会向反方向移动。
  如果只指定，左外边距或右外边距的magin为auto则会将外边距设置为最大值。垂直方向外边距如果设置为auto，则外边距默认就是0。如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中。
  规律：
  如果设置四个值，上右下左，顺时针方向设置。
  如果设置三个值，上　左右　下。
  如果设置两个值，上下　左右。
  垂直外边距的重叠
  在网页中相邻的垂直方向的外边距会发生外边距的重叠。
  所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。
  如果父子元素的垂直外边距相邻，子元素的外边距会设置给父元素。
  可以通过border和padding的应用改善重叠。
• 浏览器默认样式
  浏览器为了在页面中没有样式时，也可以让页面有一个比较好的显示效果，所以为很多元素都设置了一些默认的margin和padding，而它的这些默认样式，在正常情况下我们是不需要使用的，所以我们往往在编写样式之前需要将浏览器中默认的margin和padding统统去掉。
  清除浏览器默认样式

　　*{
　	　margin:0;
　	　padding:0;
　		}

二、span内联元素

内联元素不能设置width和height，不支持垂直方向外边距。

内联元素可以设置内边距、边框，但是垂直方向设置不会影响布局。

内联元素支持水平方向外边距，但是水平方向设置外边距不会重叠而是求和。