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