posts - 110,  comments - 152,  trackbacks - 0

          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
          文章來自: http://www.blogjava.com/ponzmd/ (彭?。^河卒) 轉(zhuǎn)貼請聲明!
          訪問統(tǒng)計:
          主站蜘蛛池模板: 土默特左旗| 民丰县| 青海省| 康乐县| 手游| 岫岩| 伊春市| 慈溪市| 瑞金市| 临泉县| 黑河市| 武定县| 浪卡子县| 临沧市| 天全县| 湖州市| 澄城县| 太保市| 仙桃市| 江口县| 承德市| 从化市| 错那县| 库伦旗| 宜城市| 汕头市| 绥江县| 榆林市| 于田县| 威信县| 绥阳县| 揭阳市| 胶南市| 长葛市| 嘉禾县| 含山县| 富裕县| 大关县| 东宁县| 玉林市| 通化市|