下面是css中的盒模型，每一个标签都是一个盒模型
这个盒模型里面，最里面是内容区，内容区的外面是填充(padding), 填充的外面是边距(margin), 填充和边距之间是边框(border)。通过这个盒模型，我们可以发现，填充将内容和边框隔开，边框将填充和边距隔开，边距将一个元素和另一个元素隔开。边距和填充很难区分开，一般只有在设置背景色和边框后，才能区别两者。
margin padding
px em 百分比
其中，px是精确值，而em是相对于字号，百分比很特殊，它是相对于父元素的宽度，即如果某一个元素的样式中padding(或者margin)为2%，而他的父元素宽度为100px。那么它的padding(或者margin)的实际值为2px。并且margin的值可以为负值，而padding不行，padding的值要么为0， 要么为正。
使用margin和padding要注意:
1 对于行内元素，margin和padding只能在行内元素的左右增加空格，但是不会影响行内元素的高度:
<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> span { margin: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<span>hijklmn</span>abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body> </html>
运行结果:
蓝色背景的文本margin值为20px，但是我们可以看到，它只是左右增加了空格，虽然它的上下边距也增加了(由于背景不能延伸到边距，因此我们看不到效果，在padding里面会很明显),但是它所处行的高度(行高)却没有改变。
<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> span { padding: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<span>hijklmn</span>abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body> </html>
运行结果:
蓝色文本的padding值为20px，它只是在该文本的左右增加了空格，虽然它的上下padding也增加了(背景色可以延伸到padding里面)，但是却对行高没有影响。从这个结果里面，我们也可以发现，蓝色文本的背景色在第一行的上面，在第三行的下面，这是因为浏览器在渲染元素的时候，下面的元素总出现在上面元素的上方。
但是，对于img元素例外，当为img元素设置margin和padding时，上下左右的值都会起作用，但还是不会改变行的高度:
<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> img { margin: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<img src = "menubg.gif" />abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body> </html>
运行结果:
从结果中我们看到，设置的margin在图片的上下左右都起了作用。
下面是设置padding的情况:
<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> img { padding: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<img src = "menubg.gif" />abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body> </html>
运行结果(IE8):
运行结果(火狐):
火狐和IE8的结果不一样，在IE8里面没有什么影响，在火狐里面有正确的结果。
有时候，你如果想把行内元素的top/bottom padding或者top/bottom margin用上，可以利用display:inline-block。这样元素依然保持在行内，但却被当成块级元素看待。
2 边距冲突
所谓边距冲突，是当一个元素的下边距和另一个元素的上边距相遇时，值较小的边距会被忽略，只有值大的起作用。
边框
border
border-style border-color border-width
每一个都对应有上下左右四个值，其中border-style的值有none solid groove ridge double hidden dotted dashed insert outset。
高度和宽度
width 和height
px em 百分比
width和height只的是内容区的高度和宽度。em只的是相对于字号，而百分比相对于父元素的高度和宽度值。如果内容区的内容超出搞度和宽度，内容就会溢出。
浮动
float
right left none
使用浮动时要注意:
1 浮动元素被当做块级元素来看待，并且没有边距冲突的问题
2 当包围浮动元素的内容有背景和边框时，他们会出现在浮动元素的下方，而不是碰到浮动元素时终止:
从图中可以看到，背景和图片都出现在了浮动元素的下方。要想不出现正中情况，有两种解决方法：
第一种是对包围浮动元素的元素设置overflow:hidden属性即可(在IE8上好像不管用需要再添加一条规则 zoom: 1)；
第二种是设置浮动元素的边框，使其足够宽，并且让其颜色和网页背景色一样。
3 要给浮动元素声明宽度，这是为了避免碰到浮动文本元素的时，使其宽度为0
4 利用负边距，元素可以浮动到父元素外面
5 当浮动元素比父元素宽时，浮动元素浮动的时候将超出父元素。如一个段落里面包含一张图片，图片设置为向左浮动，若图片宽度大于段落宽度，图片将超出段落
清除浮动
clear
left right both none
清除浮动的意思是让一个元素的那个方向没有浮动元素。比如给一个标题设置样式h1 {clear:left},这就是说，让h1的左边没有浮动元素，但是右边可以有。
清除浮动的原理是增加该元素的边距值，已使其落入浮动元素下方。