1.display的属性特点：
（1）none：隐藏元素并脱离文档流，不占据任何空间；visibility:hidden:隐藏元素。但该元素还占据空间，会影响到布局；
（2）block：块级元素中为display的默认值，独占一行，若干同级元素会从上到下排列（float除外），可以设置宽高内外边距，支持margin:auto；默认宽度为100%，元素前后带有换行符，可以容纳其他的块级元素和行内元素；
（3）liline：内联元素中为display的默认值，不会独占一行，只是会占据自身的宽度和高度的空间，若干同级元素会从左到右排列，不可以设置宽高，宽度由字体大小决定，高度由内容的长度来决定，内联元素只能设置左右margin和左右的padding，可以通过设置左右的padding来改变行内元素的宽度，内联元素不能包含块级元素，如：<a>,<img>等
（4）inline-block:不支持强制换行，宽度和高度由内容撑开，支持宽高，margin，padding，但不支持margin：auto，内联块元素居中可以使得父元素居中；即使margin和padding都设置为0，换行依然会产生空白字符，解决办法：设置父元素字体大小为0px；ie6,7只支持inline元素设置为inline-block，其他类型元素均不支持；
（5）table-cell：可以让元素以表格单元格的形式呈现，也就是说table-cell类型的元素具备td元素的特点；可以实现图片居中（可以使用display:table-cell和vertical-align:center来实现大小不固定的图片的垂直居中效果，但是table-cell在父元素中设置，vertical-align:center在子元素中设置），等高布局，自动平均划分元素，并且在一行显示（当父元素定义display-table而子元素定义display:table-cell时，如果给父元素一定的高度，父元素宽度就会根据子元素的个数进行自动平均划分）；
2.margin塌陷的问题：
（1）对于两个并列的div块，上面的margin-buttom和下面的margin-top会塌陷，也就是说浏览器会取两者之间的最大值作为显示，所以遇到并排的内容块时，最好只设置其中每个块上或下margin的一处即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#no1{
background:#808000;
width:300px;
height:300px;
margin:100px 0 0 100px;
}
#no2{
background:#c0c0c0;
width:150px;
height:150px;
margin-left:20px;
margin-top:30px;
}
</style>
</head>
<body>
<div id="no1">
<div id="no2">Span2
</body>
</html>（2）对于父元素内含子元素的情况，设置子元素的margin，父元素也具有与子元素相同的margin值，称之为塌陷现象；
解决方法一：在父类标签设置overflow：hidden，或者给父类标签添加padding，至少添加padding-top；
解决方法二：给父类标签设置border属性即可