這篇文章將為大家詳細講解有關(guān)CSS網(wǎng)頁布局常見問題有哪些,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),西藏企業(yè)網(wǎng)站建設(shè),西藏品牌網(wǎng)站建設(shè),網(wǎng)站定制,西藏網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,西藏網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
◆float的3像素問題及解決辦法
當使用float浮動容器后,在IE6下會產(chǎn)生3px的空隙,有意思的是右側(cè)容器沒設(shè)置高度時3px在右側(cè)容器內(nèi)部,當設(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;}
◆上邊容器浮動后,下邊的容器跟著浮動,造成頁面錯亂
如圖中布局所示:footer必須要單獨占一行,但當sidebar浮動后,content的高度小于sidebar的高度時,footer也跟著浮動到sidebar右側(cè)了,造成頁面錯亂。解決辦法是在maincontent和footer之間插入一個容器,設(shè)置樣式
clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使頁面正常
◆IE6下float浮動導致雙倍邊距的bug
當頁面內(nèi)有多個連續(xù)浮動時,如本頁的圖標列表是采用左浮動,此時設(shè)置li的左側(cè)margin值時,在最左側(cè)呈現(xiàn)雙倍情況。如外邊距設(shè)置為10px,而左側(cè)則呈現(xiàn)出20px,解決它的方法是在浮動元素上加上display:inline;的樣式,這樣就可避免雙倍邊距bug
◆當子元素浮動且未知高度時,怎么使父容器適應(yīng)子元素的高度?
這種情況可在父窗口加上 overflow:auto;zoom:1;這兩個樣式屬性,overflow:auto;是讓父容器來自適應(yīng)內(nèi)部容器的高度,zoom:1;是為了兼容IE6而使用的CSS
HACK。zoom:1;通不過W3C的驗證,這也是遺憾的一點,幸好IE支持這種寫法,可以專門針對IE來寫單獨的樣式,所以可以把這個屬性寫在頁面內(nèi)的中,這樣應(yīng)該可以通過驗證了
◆CSS布局的相對定位與絕對定位
規(guī)劃頁面時,許多時候需要用到相對定位或絕對定位,這里邊有個CSS技巧,掌握后有些地方就不用繁冗的js了。就是當父容器使用相對定位后,此時子元素再使用絕對定位,位置是相對于父元素。如果父元素沒有定位,那么子元素的絕對定位是相對于瀏覽器
關(guān)于“CSS網(wǎng)頁布局常見問題有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。