一、元素的分类

1.内联元素:不独占一行，不能设置宽高，对其设置的margin，padding,不会影响垂直位置。

如<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>...

a：对内联元素设置padding属性top,left,bottom,right都会生效; 但是给内联元素设置padding-top属性最多只会撑高到浏览器顶部，padding-top高于到浏览器的距离，元素不会下移，因为对其设置的padding属性不会影响元素的行高，想让元素上下移动，可设置line-height，vertical-algin属性。

用途：当为行内元素添加背景时可以使用padding,但是背景色会覆盖周围元素。

b:对内联元素设置margin属性时，只有margin-left,margin-right会生效。

2.块级元素：独占一行，可以对其设置宽高。

如<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>...

a:对其设置margin，padding，都可以生效。

用途：margin调整元素间距离，padding给元素内留白，添加背景，（设置元素居中时可调整padding）

注意问题：块级元素使用margin时会出现垂直外边距（普通文档流中的块级元素才会出现，内联，浮动，定位过的不会出现）。

              利--》会使相邻元素间不会出现margin高度重叠相加，会取两个margin间距离最大的那个。

              弊--》设置的margin-top会向父元素一层层找有border,padding的，如果没有，则相对浏览器了。

用途：负margin,可用来写导航条，选项卡，margin-left：-（border的宽）px;可以使导航边框重叠不出现两个。

        让元素在某元素之上的某位置，用负margin，模仿了定位。

用法：margin-left和margin-top是元素相对于父元素或者相邻元素的外边距，而margin-right，margin-bottom则是相对于元素自身的外边距，所以当元素的margin-bottom为负值时，会使其位置下的元素上来。

3.内联块元素：不独占一行，还可以设置宽高。

如<img>、<input>...

用途：用于布局，模拟float，把每个元素都设为inline-block就使元素在一行显示。

注意问题：inline-block后相邻元素间有间距，除去间距，需要使父元素的font-size：0，子元素里重写font-size，

兼容：  就要使子元素{*display：inline;*zoom:1;} IE6和IE7不支持display:inline-block,可以设置display:inline，再设置zoom:1触发haslayout来解决。