inline-block和浮动式 的区别
使用浮动的方式来做填充，后面需要跟clear才能另起一行
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
使用inline-block更简单些，但要注意在IE6和IE7上的兼容问题。
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
p标签自带行间距
position:absolute
这个属性是不占位置的，也就是说会浮在后面内容的上方，挡住后面的内容。
box-shadow
前三个属性分别是水平方向、垂直方向和模糊程度；
display的3个主要属性
- display:block
1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3、block元素可以设置margin和padding属性。 - display:inline
1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2、inline元素设置width,height属性无效。
3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。 - display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
