CSS div布局需要注意的兩點(diǎn)
發(fā)布時間：2014-03-21 11:05:40 作者：佚名 
我要評論
我要評論CSS div布局有很多的注意事項(xiàng)，比如大的div里面長寬給定，內(nèi)部又存在一個新的div，這個div不能完全放在父div中。那么就會overflow、float出來的div不占文檔流等等
1.一個大的div里面長寬給定，內(nèi)部又存在一個新的div，這個div不能完全放在父div中。那么就會overflow。但是，這里overflow的部分對于與父節(jié)點(diǎn)平行的兄弟div中，在排版上可視為脫離文檔流。
或者說，可以這么簡單的理解：父div設(shè)置了overflow:hidden。
這個設(shè)計也體現(xiàn)了面向?qū)ο蟮奶攸c(diǎn)：封裝。對于內(nèi)部節(jié)點(diǎn)的細(xì)節(jié)我不需要知道。我能看到的是你這個節(jié)點(diǎn)，而不是你的內(nèi)部節(jié)點(diǎn)。
2.float出來的div不占文檔流。但是要注意的是：將來沒有float的div如果在排版上剛好就在這個float的下面(浮動應(yīng)該置于最高層)，那么這個div里面的文字是會圍繞著這個div出現(xiàn)的，而不是簡單的位置上的疊加。甚至整個div里面的所有內(nèi)容都會浮動到浮動div的下面。
或者說，可以這么簡單的理解：父div設(shè)置了overflow:hidden。
這個設(shè)計也體現(xiàn)了面向?qū)ο蟮奶攸c(diǎn)：封裝。對于內(nèi)部節(jié)點(diǎn)的細(xì)節(jié)我不需要知道。我能看到的是你這個節(jié)點(diǎn)，而不是你的內(nèi)部節(jié)點(diǎn)。
2.float出來的div不占文檔流。但是要注意的是：將來沒有float的div如果在排版上剛好就在這個float的下面(浮動應(yīng)該置于最高層)，那么這個div里面的文字是會圍繞著這個div出現(xiàn)的，而不是簡單的位置上的疊加。甚至整個div里面的所有內(nèi)容都會浮動到浮動div的下面。
相關(guān)文章
css實(shí)現(xiàn)文本和div居中對齊詳細(xì)講解示例
這篇文章主要介紹了css實(shí)現(xiàn)文本和div居中對齊詳細(xì)講解示例,需要的朋友可以參考下2014-05-05通過position定位實(shí)現(xiàn)div底端對齊
這篇文章主要介紹了通過position定位實(shí)現(xiàn)div底端對齊，感興趣的朋友可以參考下2014-04-02多個div中table的tdwidth設(shè)置一樣也不法對齊
最近發(fā)現(xiàn)多個div中table的td就算調(diào)成一樣的width也無法對齊，后來發(fā)現(xiàn)了解決方法，提到table-layout: fixed，經(jīng)設(shè)置效果相當(dāng)不錯，大家可以參考下2014-03-28圖片在div中垂直和水平同時對齊的實(shí)現(xiàn)方法
這篇文章主要介紹了關(guān)于圖片在div中垂直和水平同時對其的問題，下面有個不錯的解決方法，大家可以參考下2014-03-28DIV和SPAN垂直居中對齊的實(shí)現(xiàn)方法
DIV和SPAN如何垂直居中對齊，水平居中很簡單，設(shè)置text-align:center就可以了，垂直居中一直很是疑惑，下面為大家解惑2014-02-20- 在某些時候可能需要將一個絕對定位的div在它的父對象中垂直居中對齊，可能用到的頻率不是太高，但是偶爾也會用到，下面就簡單介紹一下如何實(shí)現(xiàn)此功能2014-01-27
div中加入span右對齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對齊后，出現(xiàn)了換行問題，一般思路的話一定是認(rèn)為通過分開兩列，一個align=left,另一個align=right；很是疑惑，于是利用閑暇時間，搜索整理下，曬出來 2012-12-19 div 水平居中的實(shí)現(xiàn)方法。2009-10-15CSS讓圖片垂直居中和底端對齊的代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
本CSS教程提供了兩種對齊方式即垂直居中對齊和底端對齊！更多內(nèi)容請參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼： <!DOCTYPE html PUBLIC "-//W3C//DT2008-10-17這篇文章主要為大家詳細(xì)介紹了html5 div布局與table布局，區(qū)分div布局與table布局的異同,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-16最新評論
大家感興趣的內(nèi)容