內容簡述：
display:block 內嵌元素定義高和寬(轉為塊元素)
float:left 塊元素位於同一行
Firefox地區浮動，在第2個塊元素加float:left
IE6的一個BUG（距離瀏覽器的左邊距並不是CSS 代碼中定義的20像素，而是40像素），display:inline
怎樣才能讓紅色地區水平定位於瀏覽器的正中間，無論瀏覽器視窗的大小，顯示器解析度的大小。margin:0 auto;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS 學習網---“可容納內嵌元素和其他塊狀元素”</title>
<style type="text/css">
<!--
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容納內嵌元素和其他塊狀元素</a>
<a href="#">Love CSS</a>
</div>
<body>
</body>
</html>
效果：
=============================
如果要讓定義好的寬度和高度對內嵌元素起作用，有什麼辦法沒有？答案是：當然。因為事情沒有絕對的在CSS 上面也成立，因為CSS 中有兩種元素，內嵌元素和塊狀元素，但
是寬度和高度只對塊狀元素起作用，內嵌元素不起作用，如果我們把內嵌元素轉化成塊狀元素，他不就具有了塊狀元素的特性了嘛，當然寬度和高度也就起作用了，如果你能想到這個思路，證明你的大腦現在非常活躍喲，這時候我們只需要給相應的內嵌元素加上一個屬性display:block 就可以了。
a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
為什麼兩個a 不處於同一行了呢，那是因為這兩個內嵌元素a 都被轉化成了塊狀元素，既然成功轉化為塊狀元素，就應該具有塊狀元素最顯著的一個特點，不允許其他元素與他同
一行，所以這兩個a 垂直排列嘍~那有沒有把法讓他們處於同一行？當然有啦
【例子】，要求：
1）兩個方塊，一個紅色#900，一個藍色#009；
2）紅色方塊寬度和高度均為200像素，藍色方塊寬度為300像素，高度為200像素；
3）紅色方塊藍的上外邊距(margin-top)和左外邊距(margin-left)均為20像素；
大家應該注意到了，雖然紅色方塊的寬度並不是100%，但是藍色並未和紅色處於同一行，這就是塊狀元素比較“霸道”的一點，（即使塊狀元素的寬度不是100%，它也不允許其
他元素和他同在一行）為了消除這種“霸權”，讓紅色和藍色方塊都處在一行，此時就需要拿出我們的利器Float！只需要在紅色方塊的CSS 裡面加上“float:left;”，這時
候在IE6中可以看到藍色方塊的確跑到紅色方塊的後面了，並且處於一行了，但是在FireFox中卻變成了如下效果：
這時候就需要注意了，FF 中如果前面的地區浮動了，後面的那個地區很有可能就會和前面的地區發生重疊並錯位。怎麼才能解決這個問題，解決這個瀏覽器安全色的問題，很容易，只需要在藍色方塊的CSS 代碼中也加入“Float:left;”，問題就解決了，加上試試，看看在FF 中藍色方塊是不是和紅色方塊處於一行了~到這裡，大家應該明白Float 的作用了吧，就是為了消除塊狀元素“霸權主義”的一把利器！在布局頁面的時候有時候是需要消除塊狀元素霸權主義才能布局好喲，
細心的同學會注意到，在IE6中紅色方塊距離瀏覽器的左邊距並不是CSS 代碼中定義的20像素，而是40像素，如：
其實這是IE6的一個BUG，(IE6雙倍邊距BUG)，只要滿足下面3個條件才會出現這個BUG：
1）要為塊狀元素；
2）要左側浮動；
3）要有左外邊距(margin-left)；
解決這個BUG 很容易， 只需要在相應的塊狀元素的CSS 樹形中加入
“display:inline;”，代碼如下：
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}
===============================================
讓紅色地區與瀏覽器的頂部和左邊距離為20像素
margin-top:20px;
margin-left:20px;
不過上面的這種寫法我們可以精簡為
margin:20px 0 0 20px;
其中的數值順序是：上右下左。而margin:20px 0;則和margin:20px 0 20px 0;是等價的。
我們接著將問題延伸，怎樣才能讓紅色地區水平定位於瀏覽器的正中間，無論瀏覽器窗
口的大小，顯示器解析度的大小。
margin:0 auto;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
