CSS備忘錄

以下內容的總結使用的瀏覽器是：Firfox2.0,IE7

Float相關：
跟在一個浮動標籤之後的塊級元素且此塊級元素有Width屬性，那麼IE7和FF的處理方式不同：
1）：對Margin的影響
FF：塊級元素的Margin邊界不緊跟浮動元素，而是靠近更上一層父級元素；其中的內容圍繞浮動標籤。
IE7：在浮動方向給塊級元素增加了Margin屬性。如果在此設置Margin屬性則會根據水平壓縮原則進行壓縮處理（自動增加的Margin值和設置的

值進行比較，選取較大者）
例如：
<div id=”a” style=”float:left;background-color:#FF0099;”>A-A-A-A-A-A</div>
<div id=”b” style=”width:150px;background-color:#CCFF99;”>B-B</div>
id爲a的Div就是上文說的浮動元素，id爲b的Div就是具有Width屬性的塊級元素

標籤默認屬性：

<p>,<h1>等等標籤默認有Margin屬性。
<h1>標籤元素在一個容器中時，最頂端元素如果是h1標籤那麼Maring-top失效，如果最低端是h1元素那麼Margin-buttom完全失效。
例如：
<div style=”background-color:#006600;”>
<h1 style=”background-color:#CCFF99; display:block;”>li-li-li</h1>
<h1 style=”background-color:#CCFF99;display:block;”>li-li-li</h1>
<h1 style=”background-color:#CCFF99;display:block;”>li-li-li</h1>
</div>

UL,li相關

ul在IE下具有默認Margin-left屬性,在FF下具有默認Padding-left屬性。真他媽的煩。
ul, li默認情況下。ul有Margin屬性。但是隻有ul根在某個元素之後或者之前相應Margin才能體現出來，如果ul在某個容器內且容器內只有此

ul，則不能體現ul的Margin-top屬性。不知道爲什麼？？(當一個具有默認Margin屬性的塊級元素如果在一個容器內且它的頂端和底端沒有其他

元素時，相應的Margin屬性不會自動拉長容器的高度。但是此Margin又的確佔據了一部分空間)
例如：
在容器內，則沒有體現出Margin-top屬性
<div style=”width:150px; height:200px; background-color:#00ff00;”>
<ul>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
</div>
在元素之後，則有Margin-top屬性
<div>bbb</div>
<ul style=”display:block;”>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
<div>bbb</div>
再例如：兩者顯示完全不同。
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
<div style=”width:150px; background-color:#00ff00;”>
b
<ul>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
b
</div>
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
和
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
<div style=”width:150px; background-color:#00ff00;”>
<ul>
<li style=”background-color:#FF6600;”>li-li-li</li>
<li style=”background-color:#FFCCFF;”>li-li-li</li>
</ul>
</div>
<div id=”a” style=”background-color:#FF0099; width:150px;”>A-A-A-A-A-A</div>
li的問題：
我們先做以下實驗：
<div style=”width:200px;background-color:#FFCCFF;”>
<h1 style=”width:100px; background-color:#FF0066; margin:70px; display:block;”>A</h1>
</div>
h1標籤會自動把div撐開
但是當h1在li中時，h1的Margin並不能把li撐開，可是這個Margin又是的確存在的（和下一個li有間距）。就像h1的Margin被移動附加到li上

面一樣。這究竟是Bug還是我又一次把它理解錯誤。請看：
<div style=”width:250px;background-color:#00ff00;”>
<ul>
<li style=”background-color:#FF6600;”><h1>li-li-li</h1></li>
<li style=”background-color:#FFCCFF;”><h1>li-li-li</h1></li>
</ul>
</div>

非法的HTML

<span><p></p></span>
<p>不可以嵌套在<span>內

其他

高度不能自動適應1：
<div style=”width:300px;background-color:#FF9966;”>
<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
</div>
div的實際高度沒有按照p的實際高度自動伸展，修改如下。增加padding屬性後，使div重新計算自身的高度。或者使用其他的方式來使Div重新

計算高度即可。例如在Div內增加空的站位符
<div style=”width:300px;background-color:#FF9966; padding:1px 0;”>
<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
</div>
高度不能自動適應2：
<div id=”box” style=”width:200px; background-color:#FF0066;”>
<div class=”left” style=”float:left; background-color:#FFCCFF; width:100px; height:200px;”>left</div>
<a href=”#” mce_href=”#” >right a link</a><br />
<p style=”background-color:#FF9999; display:block; margin:0;”>right p p-p-p</p>
<div>right div</div>
</div>
id爲box的div不能按照class爲left的div的高度自動伸縮。修改之：
<div id=”box” style=”width:200px; background-color:#FF0066;”>
<div class=”left” style=”float:left; background-color:#FFCCFF; width:100px; height:200px;”>left</div>
<a href=”#” mce_href=”#” >right a link</a><br />
<p style=”background-color:#FF9999; display:block; margin:0;”>right p p-p-p</p>
<div>right div</div>
<div style=”clear:both;”></div>
</div>
浮動元素脫離了文檔流，因此div的高度不包含浮動元素。對元素進行清理實際上爲前面的浮動元素留出了垂直空間。
overflow屬性爲hidden或auto的元素內如果包含有浮動元素，那麼它會自動地爲所包含的元素添加清除浮動屬性。