inline-block和浮动、position:absolute、box-shadow、display的3个主要属性

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的同行特性。

---