更新時(shí)間：2014-12-05這篇文章主要介紹了前端設(shè)計(jì)師需要了解的9個(gè)問(wèn)題以及注意事項(xiàng)，非常的實(shí)用，是篇非常不錯(cuò)的文章，這里推薦給大家
1.塊級(jí)元素和行內(nèi)元素的區(qū)別
塊級(jí)元素即使設(shè)置了寬度，仍然是獨(dú)占一行的，
塊級(jí)元素可以設(shè)置margin和padding屬性。行內(nèi)元素的margin和padding屬性只有水平邊距，沒(méi)有豎直邊距。
豎直方向的padding雖然增大了行內(nèi)元素的面積，但并沒(méi)有和相鄰元素拉開距離。
2.display:inline-block和hasLayout
為了兼容IE6、IE7(不支持display:inline:block)，我們真正能使用的display類型只有inline,block和none.
display:inline-block集塊級(jí)元素和行內(nèi)元素的特點(diǎn)于一身。
為了使IE6、IE7實(shí)現(xiàn)display:inline-block效果，可以在行內(nèi)元素(如span)中定義display：inline-block，以觸發(fā)hasLayout,可以使用vertical-align:-10px和其他實(shí)現(xiàn)瀏覽器效果一樣。
它只能對(duì)行內(nèi)元素實(shí)現(xiàn)display:inline-block；還要用到針對(duì)IE的hack,*vertical-align。
3.relative、absolute和float
position:absolute和float會(huì)隱式的改變display類型，不論之前是什么類型的元素（display:none除外），只要設(shè)置了postion:absolute、float；left和float:right中任意一個(gè)，都會(huì)讓元素以display:inline-block顯示，這也就是IE6下使用float產(chǎn)生雙邊距可以使用display:inline去除.
position:relative不會(huì)隱式改變display的類型。
4.水平居中
文本、圖片等行內(nèi)元素的水平居中可以使用text_align:center。
確定寬度的塊級(jí)元素的水平居中可以使用margin:0 auto;
不確定寬度的塊級(jí)元素的水平居中（1）.講內(nèi)容放入table標(biāo)簽，這是table標(biāo)簽margin:0 auto;（2）將塊級(jí)元素使用display:inline變成行內(nèi)元素，在通過(guò)text-align:center實(shí)現(xiàn)；（3）給父元素設(shè)置float,然后父元素設(shè)置position:reletive和left:50%,子元素設(shè)置成position:reletive和left:-50%.
5.豎直居中
父元素高度不確定的文本、圖片和塊級(jí)元素豎直居中是通過(guò)給父容器設(shè)置上下邊距實(shí)現(xiàn)的。
父元素高度確定的單行文本豎直居中，是通過(guò)給父元素設(shè)置line-hignt等于父元素hight高度實(shí)現(xiàn)的。
父元素高度不確定的多行文本、圖片和塊級(jí)元素豎直居中（1）直接使用表格（2）對(duì)于支持display:table-cell的IE8和ff用display:table-cell和vertacil-align:middle實(shí)現(xiàn)居中。對(duì)于不支持則使用IE hack
6.網(wǎng)格布局
同級(jí)下，哪塊內(nèi)容重要，在HTML就優(yōu)先寫到前面。
用于布局個(gè)人偏好子選擇器
7.Z-index的相關(guān)問(wèn)題及flash和IE6下的select元素
除了x,y軸，還有一個(gè)Z軸，z軸在元素設(shè)置position為reletive或absolute或被激活，起大小有z-index設(shè)置，z-index越大，元素位置越靠上。
z-index只對(duì)非窗口的元素有效，而flash默認(rèn)是窗口模式，我們要將flash中的womde設(shè)置成opaque或transpartent
select元素在IE6下也是默認(rèn)以窗口形式顯示的。
8.插入png圖片
IE6的png圖片不支持透明，可以使用IE下私有的濾鏡解決。
9.使用IETest進(jìn)行多IE版本調(diào)試。
