• 您現(xiàn)在的位置： 創(chuàng)新互聯(lián) >> 網(wǎng)站建設(shè) >> 網(wǎng)站建設(shè)常見問題 >> 網(wǎng)站制作：CSS備忘錄Marging用法和標(biāo)簽的使用

網(wǎng)站制作：CSS備忘錄Marging用法和標(biāo)簽的使用

• 作者：曾小姐 文章來源：成都網(wǎng)站建設(shè) 點(diǎn)擊數(shù)：953 更新時(shí)間：2011-12-02
• 　　前面，小編跟大家介紹了CSS與瀏覽器兼容問題，今天，成都創(chuàng)新互聯(lián)小編還來說說CSS的備忘錄。以下內(nèi)容的總結(jié)使用的瀏覽器是：Firfox2.0,IE7與Float的相關(guān)知識(shí)，跟在一個(gè)浮動(dòng)標(biāo)簽之后的塊級(jí)元素且此塊級(jí)元素有Width屬性，那么IE7和FF的處理方式不同：
  　　1，對(duì)Margin的影響
  　　FF：塊級(jí)元素的Margin邊界不緊跟浮動(dòng)元素，而是靠近更上一層父級(jí)元素；其中的內(nèi)容圍繞浮動(dòng)標(biāo)簽。
  　　IE7：在浮動(dòng)方向給塊級(jí)元素增加了Margin屬性。如果在此設(shè)置Margin屬性則會(huì)根據(jù)水平壓縮原則進(jìn)行壓縮處理（自動(dòng)增加的Margin值和設(shè)置的值進(jìn)行比較，選取較大者）
  　　例如：
  　　<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就是上文說的浮動(dòng)元素，id為b的Div就是具有Width屬性的塊級(jí)元素。
  　　2，標(biāo)簽?zāi)�認(rèn)屬性
  　　<p>,<h1>等等標(biāo)簽?zāi)�認(rèn)有Margin屬性。
  　　<h1>標(biāo)簽元素在一個(gè)容器中時(shí)，最頂端元素如果是h1標(biāo)簽?zāi)敲碝aring-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>
  　　3，</div>,UL,li相關(guān)
  　　ul在IE下具有默認(rèn)Margin-left屬性,在FF下具有默認(rèn)Padding-left屬性。
  　　ul, li默認(rèn)情況下。ul有Margin屬性。但是只有ul根在某個(gè)元素之后或者之前相應(yīng)Margin才能體現(xiàn)出來，如果ul在某個(gè)容器內(nèi)且容器內(nèi)只有此ul，則不能體現(xiàn)ul的Margin-top屬性。不知道為什么？？(當(dāng)一個(gè)具有默認(rèn)Margin屬性的塊級(jí)元素如果在一個(gè)容器內(nèi)且它的頂端和底端沒有其他元素時(shí)，相應(yīng)的Margin屬性不會(huì)自動(dòng)拉長(zhǎng)容器的高度。但是此Margin又的確占據(jù)了一部分空間)
  　　例如：
  　　在容器內(nèi)，則沒有體現(xiàn)出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>
  　　4，li的問題
  　　我們先做以下實(shí)驗(yàn)：
  　　<div style=”width:200px;background-color:#FFCCFF;”>
  　　<h1 style=”width:100px; background-color:#FF0066; margin:70px; display:block;”>A</h1>
  　　</div>
  　　h1標(biāo)簽會(huì)自動(dòng)把div撐開，但是當(dāng)h1在li中時(shí)，h1的Margin并不能把li撐開，可是這個(gè)Margin又是的確存在的（和下一個(gè)li有間距）。就像h1的Margin被移動(dòng)附加到li上面一樣。這究竟是Bug還是小編又一次把它理解錯(cuò)誤。請(qǐng)看：
  　<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>
  　　5，非法的HTML
  　　<span><p></p></span>
  　　<p>不可以嵌套在<span>內(nèi)
  　　6，高度不能自動(dòng)適應(yīng)
  　　a情況
  　　<div style=”width:300px;background-color:#FF9966;”>
  　　<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
  　　</div>
  　　div的實(shí)際高度沒有按照p的實(shí)際高度自動(dòng)伸展，修改如下。增加padding屬性后，使div重新計(jì)算自身的高度�；蛘呤褂闷渌�的方式來使Div重新計(jì)算高度即可。
  　　例如在Div內(nèi)增加空的站位符
  　　<div style=”width:300px;background-color:#FF9966; padding:1px 0;”>
  　　<p style=”background-color:#CC6600; width:70%;”>p-p-p</p>
  　　</div>
  　　b情況
  　　<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的高度自動(dòng)伸縮。
  　　修改為：
  　　<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>
  　　浮動(dòng)元素脫離了文檔流，因此div的高度不包含浮動(dòng)元素。對(duì)元素進(jìn)行清理實(shí)際上為前面的浮動(dòng)元素留出了垂直虛擬空間。overflow屬性為hidden或auto的元素內(nèi)如果包含有浮動(dòng)元素，那么它會(huì)自動(dòng)地為所包含的元素添加清除浮動(dòng)屬性。
  　　總結(jié)到此，吸收靠自己，大家看明白了沒有呢？
  
• 上一篇文章：如何創(chuàng)建適合移動(dòng)設(shè)備瀏覽的網(wǎng)站
  下一篇文章：input標(biāo)簽寫CSS時(shí)需要注意的幾點(diǎn)