div+css網頁布局設計新開端（7）

最後更新：2016-12-29 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面在回到兩個水平div外邊距重合問題

<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin-right:20px;background:green;float:left;} #b{width:100px;height:100px;border:soild;margin-left:20px;background:green;float:left;} </style> <head><body><div id="a"><div class="div"></div><div id="b"></div></div></body></html>

ie6和Firefox是一樣的
由此說明，水平外邊距不會重合

如何第一個div沒設定浮動，第2個設定了
那麼不會水平排列的

<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin:5px;background:green;} #b{width:100px;height:100px;border:soild;margin:5px;background:green;float:left;} </style> <head><body><div id="a"><div class="div"></div><div id="b"></div></div></body></html>

先看Firefox的

這裡可以看出對於float的div和普通div，垂直外邊距是不會發生重合的
在看ie6的

第2個div竟然把左邊的外邊距和第一個div相加了，是10px，所以說瀏覽器安全色問題是挺麻煩的呀

浮動div是可以根據普通div來定位的

<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin:5px;background:green;} #b{width:100px;height:100px;border:soild;margin-top:25px;background:green;float:left;} </style> <head><body><div id="a"><div class="div"></div><div id="b"></div></div></body></html>

那麼普通div能否根據浮動div來定位？實驗一下

<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin:5px;background:green;} #b{width:100px;height:100px;border:soild;margin-top:25px;background:green;float:left;} #c{width:300px;height:300px;border:soild;margin-top:50px;background:green;} </style> <head><body><div id="a"><div class="div"></div><div id="b"></div><div id="c"></div></div></body></html>

這裡故意把第3個div弄大點

可以看出，它是不知道第2個div存在的，而是根據第一個普通div來定的位，中間相距50px
這裡第3個div並沒有覆蓋第2個div，而是在他下面，把第2個div弄別的顏色就看的出來

因為普通div只能在地上，不可能到空中的

在看看ie6的顯示。。。

我覺得用IE6學CSS就是個悲劇。。。

那麼，浮動div能否根據浮動div定位呢？

<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin:5px;background:green;} #b{width:100px;height:100px;border:soild;background:green;float:left;} #c{width:100px;height:100px;border:soild;margin-left:50px;background:green;float:left;} </style> <head><body><div id="a"><div class="div"></div><div id="b"></div><div id="c"></div></div></body></html>

答案是肯定的

ie6也一樣

下面總結一下
浮動元素是可以根據非浮動元素（就是普通div）和浮動元素來定位的
而非浮動元素只能根據非浮動元素定位，不能根據浮動元素定位

那麼關於機場的比喻要重新詮釋下了
浮動元素是飛在空中的飛機非浮動元素是停在地上的飛機
如何非浮動元素佔用了一塊地區，浮動元素就不會佔用這塊地區，因為在空中是能看到地面的情況的，所以能夠根據非浮動元素來定位
而如果浮動元素佔用了一塊地區，非浮動元素在地上是不知道空中的情況的，所以不會知道它的存在，所以兩者會發生重合，一個在天，一個在地

以上就是div+css網頁布局設計新開端（7）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More