CSS盒模型

margin属性
padding属性
border属性
display属性
标准模式与怪异模式
盒模型指在css布局中，html中的每个元素在浏览器中的解析都可以被看作一个盒子，拥有盒子一样的外形和平面空间。
盒模型的平面图片如下图所示：

图片1.png
图片2.png

margin

语法：margin-top|right|bottom|left: length;
每个块元素有上、右、下、左四个方位的外边距，可以分别用四种属性
来声明。
margin-top:10px;/设置上边距10px/
margin-right:10px;/设置右边距10px/
margin-bottom:10px;/设置底边距10px/
margin-left:10px;/设置左边距10px/

margin的几种不同写法

1. .main{margin:10px 20px 10px 20px;}这四个值分别设置类名为main的模块上、右、下、左四个方位外边距的值。
2. .main{margin:10px 20px;}这两个值分别设定类名为main的模块的上下、左右的外边距
   3）.main{margin:10px 20px 10px;}第一个值设定上外边距，第二个值设定左右外边距，第三个值设定下外边距
   4）.main{margin:10px;}如果就一个值的话，就设定了四个方向的外边距都10px
3. .main{ margin:20px auto;}这样设值的意思是上下两个方位的外边距为20px，左右两个方位的外边距自动适应居中
   竖向margin的叠加
   margin横向是加法，但在竖向却会产生叠加的现象,并会取上下间
   距的其大者生效。
   IE6下的横向双倍margin bug
   IE6会在特定的条件下，将设置的横向margin值变成双倍。条件：
   1.元素必须浮动（float）;
   2.元素必须具有横向margin，margin-left、margin-right
   3.元素必须块元素
   4.浏览器必须是ie6

padding

相对于外边距而言，元素也应该具有内边距。
padding-top|left|bottom|right:length;
padding属性定义元素边框与元素内容之间的空白区域。
padding的几种写法和margin是一样的。

border

元素的边框是围绕元素内容和内边距的一条线或多条线
语法：border-top | right | bottom | left :
border-width | border-style | border-color;
border简写属性，用于把边框的所有属性设置到一个声明中。
border: 1px solid red; border-left: 1px solid #000;
solid 实线 dotted 虚线 dashed 虚线
———— ...................... -------------

display

规定元素应该声称的框的类型
语法：display:block|none|inline|inline-block|table
block:该元素以块属性显示
none:该元素隐藏，不会被显示
inline:以行内属性显示
inline-block:行内块元素
table:以表格的表现来显示,经常对应table-cell使用