web 前端修煉之道

1.塊級元素和行內元素的區別

塊級元素即便設置了寬度，仍然是獨佔一行的，
塊級元素能夠設置margin和padding屬性。行內元素的margin和padding屬性只有水平邊距，沒有豎直邊距。
豎直方向的padding雖然增大了行內元素的面積，但並無和相鄰元素拉開距離。

2.display:inline-block和hasLayout

爲了兼容IE六、IE7(不支持display:inline:block)，咱們真正能使用的display類型只有inline,block和none.
display:inline-block集塊級元素和行內元素的特色於一身。
爲了使IE六、IE7實現display:inline-block效果，能夠在行內元素(如span)中定義display：inline-block，以觸發hasLayout,能夠使用vertical-align:-10px和其餘實現瀏覽器效果同樣。
它只能對行內元素實現display:inline-block；還要用到針對IE的hack,*vertical-align。

3.relative、absolute和float

position:absolute和float會隱式的改變display類型，不論以前是什麼類型的元素（display:none除外），只要設置了postion:absolute、float；left和float:right中任意一個，都會讓元素以display:inline-block顯示，這也就是IE6下使用float產生雙邊距能夠使用display:inline去除.
position:relative不會隱式改變display的類型。

4.水平居中

文本、圖片等行內元素的水平居中能夠使用text_align:center。
肯定寬度的塊級元素的水平居中能夠使用margin:0 auto;
不肯定寬度的塊級元素的水平居中（1）.講內容放入table標籤，這是table標籤margin:0 auto;（2）將塊級元素使用display:inline變成行內元素，在經過text-align:center實現；（3）給父元素設置float,而後父元素設置position:reletive和left:50%,子元素設置成position:reletive和left:-50%.

5.豎直居中

父元素高度不肯定的文本、圖片和塊級元素豎直居中是經過給父容器設置上下邊距實現的。
父元素高度肯定的單行文本豎直居中，是經過給父元素設置line-hignt等於父元素hight高度實現的。
父元素高度不肯定的多行文本、圖片和塊級元素豎直居中（1）直接使用表格（2）對於支持display:table-cell的IE8和ff用display:table-cell和vertacil-align:middle實現居中。對於不支持則使用IE hack

6.網格佈局

同級下，哪塊內容重要，在HTML就優先寫到前面。
用於佈局我的偏好子選擇器

7.Z-index的相關問題及flash和IE6下的select元素

除了x,y軸，還有一個Z軸，z軸在元素設置position爲reletive或absolute或被激活，起大小有z-index設置，z-index越大，元素位置越靠上。
z-index只對非窗口的元素有效，而flash默認是窗口模式，咱們要將flash中的womde設置成opaque或transpartent
select元素在IE6下也是默認以窗口形式顯示的。

8.插入png圖片

IE6的png圖片不支持透明，能夠使用IE下私有的濾鏡解決。

9.使用IETest進行多IE版本調試。