標(biāo)準(zhǔn)布局常見問題及解決辦法

2020-10-23 18:30:06

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

CSS2.0盒模型層次平面示意圖和3D示意圖
3像素問題及解決辦法: 當(dāng)使用float浮動容器后，在IE6下會產(chǎn)生3px的空隙，有意思的是右側(cè)容器沒設(shè)置高度時3px在右側(cè)容器內(nèi)部，當(dāng)設(shè)定高度后又跑到容器的左側(cè)了，所以對布局精度要求高的話，請參考例29、31的解決方法
上邊容器浮動后，下邊的容器跟著浮動，造成頁面錯亂: 如以上例子中的footer必須要單獨占一行，但當(dāng)sidebar浮動后，content的高度小于sidebar的高度時，footer也跟著浮動到sidebar右側(cè)了，造成頁面錯亂。解決辦法是在maincontent和footer之間插入一個容器，設(shè)置樣式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除，即可使頁面正常
當(dāng)子元素浮動且未知高度時，怎么使父容器適應(yīng)子元素的高度？: 這種情況可在父窗口加上 overflow:auto;zoom:1;這兩個樣式屬性，overflow:auto;是讓父容器來自適應(yīng)內(nèi)部容器的高度，zoom:1;是為了兼容IE6而使用的CSS HACK。zoom:1;通不過W3C的驗證，這也是遺憾的一點，幸好IE支持<!--[if IE]>這種寫法，可以專門針對IE來寫單獨的樣式，所以可以把這個屬性寫在頁面內(nèi)的<!--[if IE]>中，這樣應(yīng)該可以通過驗證了
相對定位與絕對定位: 規(guī)劃頁面時，許多時候需要用到相對定位或絕對定位，這里邊有個技巧，掌握后有些地方就不用繁冗的js了。就是當(dāng)父容器使用相對定位后，此時子元素再使用絕對定位，位置是相對于父元素。如果父元素沒有定位，那么子元素的絕對定位是相對于瀏覽器
IE6雙倍邊距bug: 當(dāng)頁面內(nèi)有多個連續(xù)浮動時，如本頁的圖標(biāo)列表是采用左浮動，此時設(shè)置li的左側(cè)margin值時，在最左側(cè)呈現(xiàn)雙倍情況。如外邊距設(shè)置為10px，而左側(cè)則呈現(xiàn)出20px，解決它的方法是在浮動元素上加上display:inline;的樣式，這樣就可避免雙倍邊距bug