CSS div布局需要注意的兩點(diǎn)

發(fā)布時(shí)間：2014-03-21 11:05:40 作者：佚名

CSS div布局有很多的注意事項(xiàng)，比如大的div里面長寬給定，內(nèi)部又存在一個(gè)新的div，這個(gè)div不能完全放在父div中。那么就會(huì)overflow、float出來的div不占文檔流等等

1.一個(gè)大的div里面長寬給定，內(nèi)部又存在一個(gè)新的div，這個(gè)div不能完全放在父div中。那么就會(huì)overflow。但是，這里overflow的部分對(duì)于與父節(jié)點(diǎn)平行的兄弟div中，在排版上可視為脫離文檔流。

或者說，可以這么簡(jiǎn)單的理解：父div設(shè)置了overflow:hidden。

這個(gè)設(shè)計(jì)也體現(xiàn)了面向?qū)ο蟮奶攸c(diǎn)：封裝。對(duì)于內(nèi)部節(jié)點(diǎn)的細(xì)節(jié)我不需要知道。我能看到的是你這個(gè)節(jié)點(diǎn)，而不是你的內(nèi)部節(jié)點(diǎn)。

2.float出來的div不占文檔流。但是要注意的是：將來沒有float的div如果在排版上剛好就在這個(gè)float的下面(浮動(dòng)應(yīng)該置于最高層)，那么這個(gè)div里面的文字是會(huì)圍繞著這個(gè)div出現(xiàn)的，而不是簡(jiǎn)單的位置上的疊加。甚至整個(gè)div里面的所有內(nèi)容都會(huì)浮動(dòng)到浮動(dòng)div的下面。

Tag：css DIV 布局

相關(guān)文章

css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例
這篇文章主要介紹了css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例,需要的朋友可以參考下
2014-05-05
通過position定位實(shí)現(xiàn)div底端對(duì)齊
這篇文章主要介紹了通過position定位實(shí)現(xiàn)div底端對(duì)齊，感興趣的朋友可以參考下
2014-04-02
多個(gè)div中table的tdwidth設(shè)置一樣也不法對(duì)齊
最近發(fā)現(xiàn)多個(gè)div中table的td就算調(diào)成一樣的width也無法對(duì)齊，后來發(fā)現(xiàn)了解決方法，提到table-layout: fixed，經(jīng)設(shè)置效果相當(dāng)不錯(cuò)，大家可以參考下
2014-03-28
圖片在div中垂直和水平同時(shí)對(duì)齊的實(shí)現(xiàn)方法
這篇文章主要介紹了關(guān)于圖片在div中垂直和水平同時(shí)對(duì)其的問題，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下
2014-03-28
DIV和SPAN垂直居中對(duì)齊的實(shí)現(xiàn)方法
DIV和SPAN如何垂直居中對(duì)齊，水平居中很簡(jiǎn)單，設(shè)置text-align:center就可以了，垂直居中一直很是疑惑，下面為大家解惑
2014-02-20
將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能
2014-01-27
div中加入span右對(duì)齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對(duì)齊后，出現(xiàn)了換行問題，一般思路的話一定是認(rèn)為通過分開兩列，一個(gè)align=left,另一個(gè)align=right；很是疑惑，于是利用閑暇時(shí)間，搜索整理下，曬出來
2012-12-19
div中子div在firefox ie 水平居中對(duì)齊
div 水平居中的實(shí)現(xiàn)方法。
2009-10-15
CSS讓圖片垂直居中和底端對(duì)齊的代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
本CSS教程提供了兩種對(duì)齊方式即垂直居中對(duì)齊和底端對(duì)齊！更多內(nèi)容請(qǐng)參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼： <!DOCTYPE html PUBLIC "-//W3C//DT
2008-10-17
html5 div布局與table布局詳解
這篇文章主要為大家詳細(xì)介紹了html5 div布局與table布局，區(qū)分div布局與table布局的異同,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-16

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

CSS div布局需要注意的兩點(diǎn)

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容