您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS布局中常見的問題及解決方案”,在日常操作中,相信很多人在CSS布局中常見的問題及解決方案問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”CSS布局中常見的問題及解決方案”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
5個CSS布局的常見問題及解決方法
總結(jié)了5個關(guān)于CSS布局的常見問題,并附有解決方法,供參考。
◆float的3像素問題及解決辦法
當(dāng)使用CSS中float浮動容器后,在IE6下會產(chǎn)生3px的空隙,有意思的是右側(cè)容器沒設(shè)置高度時3px在右側(cè)容器內(nèi)部,當(dāng)設(shè)定高度后又跑到容器的左側(cè)了,所以對布局精度要求高的話,可以在float浮動容器樣式里加針對IE6的屬性”_margin-right”和”*html”,如:
#sidebar{float:left;width:200px;_margin-right:-3px;}
或者
#sidebar{float:left;width:200px;} *html#sidebar{margin-right:-3px;}
◆CSS上邊容器浮動后,下邊的容器跟著浮動,造成頁面錯亂
如圖中布局所示:footer必須要單獨(dú)占一行,但當(dāng)sidebar浮動后,content的高度小于sidebar的高度時,footer也跟著浮動到sidebar右側(cè)了,造成頁面錯亂。解決辦法是在maincontent和footer之間插入一個容器,設(shè)置樣式
clear:both;height:0;font-size:1px;line-height:0px;
用clear:both清除,即可使頁面正常
◆IE6下float浮動導(dǎo)致雙倍邊距的bug
當(dāng)頁面內(nèi)有多個連續(xù)浮動時,如本頁的圖標(biāo)列表是采用左浮動,此時設(shè)置li的左側(cè)margin值時,在最左側(cè)呈現(xiàn)雙倍情況。如外邊距設(shè)置為10px,而左側(cè)則呈現(xiàn)出20px,解決它的方法是在浮動元素上加上display:inline;的樣式,這樣就可避免雙倍邊距bug
◆當(dāng)子元素浮動且未知高度時,怎么使父容器適應(yīng)子元素的高度?
這種情況可在父窗口加上overflow:auto;zoom:1;這兩個樣式屬性,overflow:auto;是讓父容器來自適應(yīng)內(nèi)部容器的高度,zoom:1;是為了兼容IE6而使用的CSS
HACK。zoom:1;通不過W3C的驗(yàn)證,這也是遺憾的一點(diǎn),幸好IE支持<!–[ifIE]>這種寫法,可以專門針對IE來寫單獨(dú)的樣式,所以可以把這個屬性寫在頁面內(nèi)的<!–[ifIE]>中,這樣應(yīng)該可以通過驗(yàn)證了
◆CSS布局的相對定位與絕對定位
規(guī)劃頁面時,許多時候需要用到相對定位或絕對定位,這里邊有個CSS技巧,掌握后有些地方就不用繁冗的js了。就是當(dāng)父容器使用相對定位后,此時子元素再使用絕對定位,位置是相對于父元素。如果父元素沒有定位,那么子元素的絕對定位是相對于瀏覽器
到此,關(guān)于“CSS布局中常見的問題及解決方案”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。