CSS的繼承與層疊
看兩個(gè)例子就明白了。
<省去一些顯而易見的代碼，表義為主.>
第一個(gè)例子：
body{color:red;}
<body>
段落1
<p>段落2</p>
</body>
這里面段落1，段落2字體顏色全部是紅色.顯然p繼承了body的color樣式。
第二個(gè)例子：
body{color:red;}
p{color:green;}
<body>
段落1
<p>段落2</p>
</body>
這里段落1是紅色，而段落2是綠色。這里面是通過(guò)判斷樣式的特殊性來(lái)設(shè)定的樣式。
判斷樣式特殊性的方法，可以參考這里。
通過(guò)上面的例子，得到一個(gè)通俗的理解。繼承和java里面方法繼承類似，子元素繼承父元素；而層疊可以看成
java里面的方法重載，子元素和父元素定義了同一個(gè)樣式，具體用那個(gè)通過(guò)選擇器特殊性的高低和位置來(lái)確
定。
注意：雖然我用方法重載來(lái)類別css中的層疊，但是兩者的判斷依據(jù)是不一樣的。并非子元素定義的樣式就
一定會(huì)被使用。
看這個(gè)例子：
p{color:green;}
body{color:red;}
<body>
段落1
<p>段落2</p>
</body>
結(jié)果是段落1，段落2全是紅色。
css中的框模型
標(biāo)準(zhǔn)框模型：標(biāo)準(zhǔn)框模型通過(guò)內(nèi)容區(qū)域＋填充(padding)＋邊框(border)＋空白邊(margin)組成。
在標(biāo)準(zhǔn)css中，元素的width和height指定的時(shí)內(nèi)容區(qū)域的寬度和高度。
padding指定的是內(nèi)容區(qū)域到邊框(border)的距離。通常而言的背景(background)指的是內(nèi)容區(qū)域和填充所
組成的這個(gè)區(qū)域。空白邊(margin)通常用來(lái)設(shè)置元素之間的間隔。
IE的框模型：這里的IE的狂模型指定的是IE5，IE6版本中怪異模式中指定的框模型。區(qū)別在于IE框模型中
Width和height指定的是內(nèi)容區(qū)域＋填充＋邊框組成的寬度和高度。這里就形成了有個(gè)問(wèn)題，而解決這個(gè)問(wèn)
題的辦法就是不要給元素添加具有指定寬度的填充，而嘗試填充或空白邊添加到元素的父元素或子元素。
具體的可以看我寫的示例。
注意一般而言：元素的填充，邊框，空白邊是可以選擇是否存在的，一般默認(rèn)其值為0。但是有些情況下元
素可能會(huì)被用戶代理樣式表設(shè)置它們。所以，可以通過(guò)*{ margin:0;padding:0;}來(lái)統(tǒng)一設(shè)定。
空白邊疊加
就是當(dāng)有空白邊遇到一起的時(shí)候，空白邊之間會(huì)發(fā)生一種疊加。疊加的結(jié)果會(huì)是空白邊中值相對(duì)較大的保留
下來(lái)，而這種疊加可以發(fā)散在任何兩個(gè)相鄰的空白邊之間，無(wú)論這個(gè)空白邊屬于那個(gè)元素，是否包含，是否
是同一個(gè)元素的。
塊元素(block)和行內(nèi)元素(inline 內(nèi)聯(lián)元素)
塊元素：指那些默認(rèn)情況下會(huì)換行顯示的元素。
行內(nèi)元素：那些默認(rèn)的情況下顯示方式類似于文本的元素。默認(rèn)情況下是同行顯示，直到總體內(nèi)容的寬度大
于父元素的寬度時(shí)才換行顯示。
其實(shí)還有一部分叫做：可變?cè)?這些元素到底屬于塊元素還是行內(nèi)元素需要具體環(huán)境決定。
這里有一篇好的介紹文章可以參考：
《元素block element和內(nèi)聯(lián)元素inline element》地址如下：
http://hi.baidu.com/mazhifang/blog/item/42977ed0c662588ea1ec9c77.html
相應(yīng)的元素決定了組成框的類型，而元素的display屬性可以改變生成框的類型。
通過(guò)設(shè)置display＝block，可以將一個(gè)行內(nèi)元素表現(xiàn)的像塊級(jí)元素一樣。
而設(shè)置display＝none，則表示該元素根本不是框，這樣這個(gè)元素就不在占有文檔中的空間。
CSS的定位機(jī)制
普通流(position:static)：就是塊級(jí)框從上到下一個(gè)接一個(gè)的排列，框之間的垂直距離由框的垂直空白邊計(jì)算出來(lái).
相對(duì)定位(position:relative)：塊級(jí)框相對(duì)于它在普通流中所處的位置進(jìn)行相對(duì)的偏移。
注：在使用相對(duì)定位時(shí)，無(wú)論元素是否移動(dòng)，它仍然占著原來(lái)的空間。因此，移動(dòng)元素有可能會(huì)覆蓋其他的
元素).2個(gè)方面：塊框＋行框(包裹行內(nèi)框)
絕對(duì)定位(position:absolute)：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分,因?yàn)樵氐奈恢孟鄬?duì)于它在普
通中的位置.與之相反,絕對(duì) 定位使元素的位置與文檔流無(wú)關(guān),因此不占據(jù)空間.普通文檔流中其他元素的布局就
像絕對(duì)定位的元素不存在 時(shí)一樣.相對(duì)定位實(shí)際上被看作普通流定位模型的一部分,因?yàn)樵氐奈恢孟鄬?duì)于它在
普通中的位置.與之相 反,絕對(duì)定位使元素的位置與文檔流無(wú)關(guān),因此不占據(jù)空間.普通文檔流中其他元素的布局
就像絕對(duì)定位的元素不存在時(shí)一樣.
我總結(jié)的：如何確定絕對(duì)定位的原始祖先? 父元素 被定位 由近及遠(yuǎn)
固定定位：(position:fixed)
它是絕對(duì)定位的一個(gè)子類別.差異在于固定元素的包含塊是視口.這使我們能夠創(chuàng)建總是出現(xiàn)在窗口中相同位 置的浮動(dòng)元素.但是,這種定位方式各種瀏覽器的支持各有不同.變通的方法是通過(guò)javascript來(lái)控制，當(dāng)然也可以是用css。
浮動(dòng)：(position:float)
浮動(dòng)模型可以左右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣.因?yàn)楦?dòng)框不在文檔的普通流中,
所以文檔普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣.
關(guān)于示例可以看這里：CSS定位機(jī)制示例
清除浮動(dòng)的幾種方法
1.父框也浮動(dòng)；
2.理由clear來(lái)做元素清除==>3.擴(kuò)展：利用偽類after來(lái)清除浮動(dòng)
4.利用Javascript來(lái)動(dòng)態(tài)清除浮動(dòng)
5.利用overflow屬性設(shè)置auto或hidden來(lái)清除浮動(dòng)
更全面的看下面的：
《CSS規(guī)范 閉合浮動(dòng)元素介紹》
http://web.rdxx.com/CSS/2007/9/1322433557845.shtml
關(guān)于浮動(dòng)的深入認(rèn)識(shí)
－－－－－－－－－－－－－推薦順序閱讀
1CSS浮動(dòng)原理
http://blog.csdn.net/fishsoul/archive/2007/09/20/1792776.aspx
2.CSS Float Theory: Things You Should Know
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ （EN）
http://hi.baidu.com/yan5201314/blog/item/9f5bbd0ecac641e536d122f5.html （CN）
3.IE6下浮動(dòng)bug詳解
http://hi.baidu.com/xzkcz/blog/item/d25b580fadaac4296059f30a.html
平凡而簡(jiǎn)單的人一個(gè)，無(wú)權(quán)無(wú)勢(shì)也無(wú)牽無(wú)掛。一路廝殺，只進(jìn)不退，死而后已，豈不爽哉！
收起對(duì)“車”日行千里的羨慕；收起對(duì)“馬”左右逢緣的感嘆；目標(biāo)記在心里面，向前進(jìn)。一次一步，一步一腳印，跬步千里。
這個(gè)角色很適合現(xiàn)在的我。
posted on 2007-12-20 22:38
過(guò)河卒 閱讀(1932)
評(píng)論(1) 編輯 收藏 所屬分類:
W3C/Css/Html