DIVCSS布局中的幾個(gè)重難點(diǎn)屬性

1、百度文庫-讓每個(gè)人平等地提升自我DIV+CSS個(gè)局中的幾個(gè)重難點(diǎn)屬性1、組織元素(span和 div )span和div元素用于組織和結(jié)構(gòu)化文檔，并經(jīng)常聯(lián)合 class和id屬性一起使用。在這一課中，我們將進(jìn)一步探究 span和div的用法，因?yàn)檫@兩個(gè)HTM配素又于CSS是很重要的。用span組織元素span元素可以說是一種中性元素，因?yàn)樗粚?duì)文檔本身添加任何東西。但是與CS面合使用的話，span可以對(duì)文檔中的部分文本增添視覺效果。讓我們用一句本杰明弗蘭克林(Benjamin Franklin )的名言來舉個(gè)例子：以下是代碼片段：<p>早睡早起使人健康、富裕又聰穎。</p&g

2、t;假設(shè)我們想用紅色來強(qiáng)調(diào)弗蘭克林先生所認(rèn)為的“不要在睡眠中度過一天”的好處，我們可以用<span>標(biāo)簽來標(biāo)記上述每一點(diǎn)好處。然后，我們將這幾個(gè)span設(shè)置為相同的class 。這樣，我們稍后就可以在樣式表里針對(duì)這個(gè) class定義特定的樣式。以下是代碼片段：<p> 早睡早 起使人 <span class="benefit"> 健 康 </span>、<span class="benefit"> 富 裕 </span> 和 <span class="benefit&q

3、uot;> 聰穎 </span>。 </p>相應(yīng)的CSS代碼如下：以下是代碼片段：span.benefit color:red;當(dāng)然，你也可以采用id來為span元素添加樣式。如果采用 id的話，你必須為這三個(gè)span元素各自分別指定一個(gè)唯一的id。用div組織元素如前面例子所示，span的使用局限在一個(gè)塊元素內(nèi)，而 div可以被用來組織一個(gè)或多個(gè)塊元素。除去這點(diǎn)區(qū)別，div和span在組織元素方面相差無幾。讓我們來看一個(gè)例子。我們將歷屆美國(guó)總統(tǒng)按其所屬的政營(yíng)分別組織為兩個(gè)列表：以下是代碼片段：<div id="democrats">

4、;<ul><li>富蘭克林 D 羅斯福</li><li>哈利 S 杜魯門</li><li>約翰 F 肯尼迪</li><li>林登 B 約翰遜</li><li>吉米卡特</li><li>比爾克林頓 </li></ul></div><div id="republicans"><ul><li>德懷特 D 艾森豪威爾 </li><li>理查德尼克

5、松 </li><li>杰拉爾德福特 </li><li>羅納德里根</li><li>喬治布什</li><li> 喬?W布什 </li></ul></div>在這里，我們可以采用跟上例同樣的方法來處理樣式表:以下是代碼片段：#democrats background:blue;#republicans background:red;2、盒狀模型CSS中的盒狀模型（box model ）用于描述一個(gè)為 HTML元素形成的矩形盒子。盒狀模型還涉及為各個(gè)元素調(diào)整外邊距（ma

6、rgin ）、邊框（border ）、內(nèi)邊距（padding ）和內(nèi)容的具體操作。CSS中的盒狀模型rnargiri borderpaddingghtConcenuiioniharddeLorddebardi±_i在例子中，有一個(gè)標(biāo)題和一些文本。該例的HTML代碼如下（摘自世界人權(quán)宣言）：13以下是代碼片段:<h1>Article1:</h1><p>All human beings are born freeandequalin dignity and rights.Theyareendowed with reason and conscience

7、andshouldact towards one another in aspiritofbrotherhood</p>通過添加一些顏色及字體信息，該例可以有以下顯示效果:Article 1All human beings are born free and equal in dignity and rights. They are endowed with巳包£。 and conscience and should acttowards one another in a spirit of brotherhood.這個(gè)例子包含了兩個(gè)元素：hl和p。這兩個(gè)元素的盒狀模型如

8、下圖所示:1口歐戶叫Article1歷1 l_l _i1_BpcrSaxAll human beings are borr free and equal in dignity andight5 They se endowed with reason and conscience and should act towards one another in a spirit of botherhccd.I刎I盡管上圖顯得有點(diǎn)復(fù)雜，不過它展示了每個(gè)HTML素是如何被盒子所圍繞的。我們可以通過CSS來調(diào)整這些盒子。3、外邊距和內(nèi)邊距為元素設(shè)置外邊距一個(gè)元素有上（top ）、下（bottom ）、左（l

9、eft ）、右（right ）四個(gè)邊。外邊距（margin ） 表示從一個(gè)元素的邊到相鄰元素（或者文檔邊界）之間的距離。在下面這個(gè)例子中，我們將了解如何為文檔本身（即 body元素）定義外邊距。下圖顯示了我們對(duì)外邊距的要求。滿足上述要求的css弋碼如下:以下是代碼片段：body margin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;或者你也可以采用一種較優(yōu)雅的縮寫形式：以下是代碼片段：body margin:100Px 40px 10px 70px;<p>標(biāo)記的文幾乎所有元素都可以采用跟上面一樣

10、的方法來設(shè)置外邊距。例如，我們可以為所有用本段落定義外邊距：以下是代碼片段：body margin:100Px 40Px 10Px 70px;P margin:5px 50px 5px 50px;為元素設(shè)置內(nèi)邊距內(nèi)邊距（padding ）也可以被理解成“填充物”。這樣理解是合理的，因?yàn)閮?nèi)邊距并不影響元素間 的距離，它只定義元素的內(nèi)容與元素邊框之間的距離。下面我們通過一個(gè)簡(jiǎn)單的例子來說明內(nèi)邊距的用法。在這個(gè)例子中，所有標(biāo)題都具有背景色：以下是代碼片段：hl background:yellow;H5 background:orange;通過為標(biāo)題設(shè)置內(nèi)邊距，你可以控制在標(biāo)題文本周圍填充多少空白：以

11、下是代碼片段：h1 background:yellow;padding:20px 20px 20px 80px;H5 background:orange;padding-left:120px;4、邊框邊框（border ）可以有多種用途，比如作為裝飾元素或者作為劃分兩物的分界線。在設(shè)置邊框方面，CSS為你提供了無盡選擇。邊框?qū)挾萣order-width邊框?qū)挾扔蒀SS屬性border-width 定義，其值可以是"thin "（?。?、"mediuM'（普通）或“thick " （厚）等，也可以是像素值。如下圖所示：IIIIIIIIIII III2

12、px 4px Bpx 3px 10px野口 medium thi冰耳沖 3陛4裔邊框顏色border-colorCSS屬性border-color 用于定義邊框的顏色。其值就是正常的顏色值，例如：“ #123456'、 “rgb（123,123,123） ”、 “yellow ” 等。邊框本羊式border-style邊框樣式有多種可供選擇。下圖顯示了8種不同樣式的邊框在 Internet Explorer 5.5里的實(shí)際顯示效果。在這個(gè)例子里，我們?yōu)檫@8種邊框都選擇了 “金色（gold ）”作為邊框顏色、“厚（thick） ” 作為邊框?qū)挾?。?dāng)然，這只是個(gè)例子，你可以為邊框設(shè)置別的顏

13、色和厚度。如果你不想有任何邊框，可以為它取值為"none"或者"hidden”。dotted我們可以將上面三個(gè)有關(guān)邊框的CSS屬性組合起來使用，從而制造出多種多樣的變化。來舉個(gè)例子，我們要為一個(gè)文檔中的 hl、H5 ul和p等元素分別定義不同的邊框。盡管其顯示效果也許并不那么美觀，但是它很好地向你展示了多種變化的可能：以下是代碼片段：hl border-width:;border-style:dotted;border-color:gold;H5 border-width:20px;border-style:outset;border-color:red;bord

14、er-width:1px;border-style:dashed;border-color:blue;ul border-width:thin;border-style:solid;border-color:orange;我們也可以為上邊框、下邊框、右邊框、左邊框分別指定特定的CSS屬性。具體做法如下例所示:以下是代碼片段：h1 border-top-width:thick;border-top-style:solid;border-top-color:red;border-bottom-width:thick;border-bottom-style:solid;border-bottom-c

15、olor:blue;border-right-width:thick;border-right-style:solid;border-right-color:green;border-left-width:thick;border-left-style:solid;border-left-color:orange;縮寫border跟許多其他屬性一樣,你也可以將有關(guān)邊框的CSS屬性縮寫為一個(gè) border屬性。讓我們看一個(gè)例子:以下是代碼片段：p border-width:1px;border-style:solid;border-color:blue;可被縮寫為：以下是代碼片段：P borde

16、r:1px solid blue;5、position 屬性其中positionposition屬性有五個(gè)取值,分另1J為：static, relative, absolute, fixed, inherit,"static ”為默認(rèn)值。static該值為position的默認(rèn)值，可以省略不寫，當(dāng)position 取值為static或者沒有設(shè)置屬性的時(shí)候，div的顯示方式為按文本流的順序從上至下，或者從左到右順序顯示。例如：層一層二源代碼如下：以下是代碼片段：<divclass="style">層一 </div><divclass=&

17、quot;style">層二 </div>.style border:1px solid #999900;background-color:#CCFF99;width:80px;height:80px;margin-bottom:5px;relative相對(duì)定位，相對(duì)于什么位置呢？官方手冊(cè)中是這樣說的：" Relative position that is offset from the initial normal position in the flow."可以簡(jiǎn)單的如此解釋：偏移文本流中最初的位置。最初位置也就是當(dāng)position 取值為s

18、tatic 時(shí)的位置，也就是說這里的相對(duì)定位是相對(duì)于它在正常情況下的默認(rèn)位置的。下圖列出了偏移產(chǎn)生前后的位置關(guān)系：設(shè)置參數(shù)；pusition; relative,kft 301Mltop: 30px;完整的代碼如下:偏移前：以下是代碼片段：<style type="text/css">.style1 position:relative;height:80px;width:80px;margin-bottom:10px;border:1px solid #000;background-color:#acd373;.style2 position:relative;

19、height:80px;width:80px;border:1px solid #000;background-color:#f26c4f;</style><divclass="style1">層一 </div><divclass="style2">層二 </div>偏移后：以下是代碼片段：<style type="text/css">.stylel position:relative;left:30px;top:30px;height:80px;width:80

20、px;margin-bottom:10px;border:1px solid #000;background-color:#acd373;.style2 position:relative;height:80px;width:80px;border:1px solid #000;background-color:#f26c4f;</style><divclass="style1">層一 </div><divclass="style2">層二 </div>結(jié)合以上圖示和CSS樣式表可以得出以下兩個(gè)

21、結(jié)論:?設(shè)置了 position:relative而不設(shè)置left,top 等屬性的時(shí)候，層顯示的位置和不設(shè)置position 屬性或者position值取static 時(shí)一樣。?當(dāng)一個(gè)層設(shè)置了position:relative ,而且使得層位置產(chǎn)生相對(duì)偏移時(shí)，并不影響文本流中接下來的其他層的位置。另外我們還可以做如下嘗試，當(dāng)層二對(duì)應(yīng)的css樣式表“style2 "不設(shè)置 position:relative時(shí)，會(huì)發(fā)現(xiàn)層一偏移后重疊時(shí)，層一覆蓋了層二。而不是我們圖示上層二覆蓋了層一。原因時(shí)這樣的，當(dāng)設(shè)置了position:relative ,層的層疊級(jí)別高于默認(rèn)的文本流級(jí)別。當(dāng)然了，如

22、果都設(shè)置了 position:relative ,同等級(jí)別下將會(huì)按照文本流的順序?qū)盈B顯示。absolute絕對(duì)定位，當(dāng)我們?cè)O(shè)置position 的值為static 或者relative 時(shí)，層依然存在于文本流中，也就是不管位置是否偏移，文本流中依然為它保留了該有的位置。但當(dāng)層設(shè)置了 position:relative并產(chǎn)生偏移（設(shè)置了 top,left 等值）時(shí)，該層將完全從文本流中脫離，進(jìn)而以該層所在的父容器的坐標(biāo)原點(diǎn)為參考點(diǎn)進(jìn)行偏移，可以這理解，該層已經(jīng)和同級(jí)容器中的其它元素脫離了關(guān)系，也不會(huì) 對(duì)其它元素產(chǎn)生人和影響。注意：如果父容器沒有設(shè)置position 屬性或position 值為s

23、tatic 時(shí)，將以body的坐標(biāo)原點(diǎn)為參考。下面我們以三個(gè)圖示來分別說明。上面三個(gè)頁面效果的 css樣式表如下:頁面一:百度文庫-讓每個(gè)人平等地提升自我以下是代碼片段：<style type="text/css">.stylel height:150px;width:150px;border:1px solid #000;background-color:#a2d39c;.style2 height:50px;width:50px;border:1px solid #000;background-color:#f68e56;.style3 height:50p

24、x;width:50px;border:1px solid #000;background-color:#00adef;</style><div class="style1"><div class="style2"></div><div class="style3"></div></div>頁面二：以下是代碼片段：<style type="text/css">height:150px;width:150px;border

25、:1px solid #000;background-color:#a2d39c;.style2 position:absolute;top:0;left:0;height:50px;width:50px;border:1px solid #000;background-color:#f68e56;.style3 height:50px;width:50px;border:1px solid #000;background-color:#00adef;</style><div class="style1"><div class="st

26、yle2"></div><div class="style3"></div></div>頁面三：以下是代碼片段：<style type="text/css">.style1 15百度文庫-讓每個(gè)人平等地提升自我position:relative;height:150px;width:150px;border:1px solid #000;background-color:#a2d39c;.style2 position:absolute;top:10px;left:10px;he

27、ight:50px;width:50px;border:1px solid #000;background-color:#f68e56;.style3 height:50px;width:50px;border:1px solid #000;background-color:#00adef;</style><div class="style1"><div class="style2"></div><div class="style3"></div></div

28、>fixed固定定位，它的效果類似常見的浮動(dòng)廣告，無論如何拖動(dòng)瀏覽器的滾動(dòng)條，層始終懸浮在瀏覽器的某個(gè)位置。由于該屬性只能被Firefox 很好的支持，雖然可以在通過其它設(shè)置在IE6.0中得到同樣的效果，但由于本文篇幅原因，不繼續(xù)對(duì)本屬性繼續(xù)作解釋。下面的經(jīng)典案例中將會(huì)有相關(guān)解 釋。inherit繼承，和其它屬性的繼承一樣。在這里為繼承父元素中的position 值。top , right , bottom , left 四個(gè)屬性在設(shè)置了 position 屬性，并且值不為static 時(shí)生效。當(dāng)position 取值relative 時(shí)，偏離文本流初始位置；當(dāng) position 取值a

29、bsolute時(shí)，以父容器對(duì)應(yīng)的初始點(diǎn)為原點(diǎn)偏移，如果父容器沒 有設(shè)置positon 或者position 取值static 時(shí)，以body對(duì)應(yīng)的坐標(biāo)點(diǎn)為參考點(diǎn)偏移。深度理解：如果用position 來布局頁面，父級(jí)元素的position 屬性必須為relative ,而定位于父級(jí)內(nèi)部 某個(gè)位置的元素，最好用absolute 。position 屬性：absolute 意思是：他的意思是絕對(duì)定位，他默認(rèn)參照瀏覽器的左上角，配合TOR RIGHT BOTTOM LEFT（下面簡(jiǎn)稱TRBL）進(jìn)行定位，有以下屬性：1）如果沒有TRBL以父級(jí)的左上角；在沒有父級(jí)的時(shí)候，他是參照瀏覽器左上角；如果在沒有

30、 父級(jí)元素的情況下，存在文本，則以它前面的最后一個(gè)文字的右上角為原點(diǎn)進(jìn)行定位但是不斷開文 字，覆蓋于上方。2）如果設(shè)定TRBL并且父級(jí)沒有設(shè)定 position 屬性，那么當(dāng)前的absolute則以瀏覽器左上角 為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。3）如果設(shè)定TRBL并且父級(jí)設(shè)定 position 屬性（無論是absolute 還是relative）,則以父級(jí) 的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定。即使父級(jí)有Padding屬性，對(duì)其也不起作用，說簡(jiǎn)單點(diǎn)就是：它只堅(jiān)持一點(diǎn)，就以父級(jí)左上角為原點(diǎn)進(jìn)行定位，父級(jí)的 padding對(duì)其根本沒有影響。以上三點(diǎn)可以總結(jié)出：若想把一個(gè)定位屬性為ab

31、solute的元素定位于其父級(jí)元素內(nèi)，只有滿足兩個(gè)條件：第一：設(shè)定 TRBL第二：父級(jí)設(shè)定 Position 屬性可以保證你在用absolue布局頁面的時(shí)候，不會(huì)錯(cuò)位，并且隨著瀏覽器的大小或者顯示器分辨 率的大小，而不發(fā)生改變。只要有一點(diǎn)不滿足，元素就會(huì)以瀏覽器左上角為原點(diǎn)，這就是初學(xué)者容易犯錯(cuò)的一點(diǎn)。如果不 清楚Position 屬性為absolute的板塊，若想定位到父級(jí)板塊中，并且當(dāng)瀏覽器的大小改變或顯示器的分辨率改變，布局不發(fā)生改變，是需要滿足兩個(gè)條件的，只要有一點(diǎn)不滿足，元素就會(huì)以瀏覽 器左上角為原點(diǎn)，從而導(dǎo)致頁面布局錯(cuò)位。position屬性：relative意思是相對(duì)定位，他是默

32、認(rèn)參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無父級(jí)則以文本流的順序在上一個(gè)元素的底部為原始點(diǎn)，配合 TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有 padding等CSS屬性時(shí)，當(dāng)前級(jí)的原始點(diǎn)則 參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位，有以下屬性：1）如果沒有TRBL以父級(jí)的左上角，在沒有父級(jí)的時(shí)候，他是參照瀏覽器左上角（到這里和absolute第一條一樣），如果在沒有父級(jí)元素的情況下，存在文本，則以文本的底部為原始點(diǎn)進(jìn)行 定位并將文字?jǐn)嚅_（和absolute不同）。2）如果設(shè)定TRBL并且父級(jí)沒有設(shè)定 position 屬性，仍舊以父級(jí)的左上角為原點(diǎn)進(jìn)行定位（和absolut 不同）3）如果設(shè)定TRBL并且父級(jí)設(shè)定 position

33、 屬性（無論是absolute 還是relative）,則以父級(jí) 的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定（前半段和absolut 一樣）。如果父級(jí)有 Padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)，進(jìn)行定位（后半段和absolut不同）。以上三點(diǎn)可以總結(jié)出：無論父級(jí)存在不存在，無論有沒有TRBL均是以父級(jí)的左上角進(jìn)行定位， 但是父級(jí)的Padding屬性會(huì)對(duì)其影響。只要將我們平時(shí)布局頁面的div的CSS屬性中加上position:relative 后，就不只是用float布局頁面了，還可以用TRBL進(jìn)行布局頁面了。但是 position 屬性為absolute不可以用來布局頁面，因?yàn)槿绻?/p>

34、用來布局的話，所有的 DIV都相對(duì)于瀏覽器的左上角定位了，所以只能用于將某個(gè)元 素定位于屬性為 absolute的元素的內(nèi)部某個(gè)位置。這樣我們就可以總結(jié)比較重要的結(jié)論：屬性為relative的元素可以用來布局頁面，屬性為 absolute的元素用來定位某元素在父級(jí)中的位置，既然屬性為absolute的元素用來定位某元素在父級(jí)中位置，就少不了TRBL,這時(shí)候根據(jù)一開始講的absolute的第三條，如果父級(jí)元素沒有 position 屬性，那么absolute元素就會(huì)脫離 父級(jí)元素，但是如果是布局頁面，父級(jí)元素position的屬性又不能為 absolute ,不然就會(huì)以瀏覽器左上角為原點(diǎn)了，所以

35、父級(jí)元素的position 屬性只能為relative !總結(jié)：如果用position來布局頁面，父級(jí)元素的position 屬性必須為relative ,而定位于父級(jí)內(nèi)部某個(gè)位置的元素，最好用 absolute ,因?yàn)樗皇芨讣?jí)元素的padding的屬性影響，當(dāng)然你也可以用position ,不過到時(shí)候計(jì)算的時(shí)候不要忘記padding的值。6、float 屬性我們可以通過 CSS屬Tfloat令元素向左或向右浮動(dòng)。也就是說，令盒子及其中的內(nèi)容浮動(dòng)到文檔（或者是上層盒子）的右邊或者左邊（參見第9課關(guān)于盒狀模型的描述）。下圖闡明了其原理:這里的空白由后面的叁子填充23舉個(gè)例子，假如我們想讓一張圖

36、片被一段文字圍繞著，那么其顯示效果將如下所示:A Hoating imagtbtc qjdcrri eicres inter poreiur Trieste qi vel m&ase hrwi vrI tntn s=.t ninirir.nnr Ittnr pRrTii=L50. c¥ deejue nilnR t pquiiap piilaritr wiki Lnum, demn Eliain utilliti, dur-i 匚ada1 etusuz Inteidim rdcIuti zdel, g寸 Lbi f&Ccal Si steres it a mirat

37、* 周壯融制& poecaf. ul nih I BnteieM niiil ils comp.et sr* Si q 府前he iim & infiqu*. si du?''0 guc r»ctum 喘眄。恥 ubi pec cal. Si wtog ila rniNlur laudalquo pqcck, ut nRii) Ante feral nihil Niis cornpar&r. snat. & q 圜 Nwm nimis antique 可 pAraqi e d jne如何實(shí)現(xiàn)這個(gè)效果？上例的HTML代碼如下所示:以下是代

38、碼片段：<div id="picture"><img src="bill.jpg" alt="Bill Gates”</div><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum</p>要實(shí)現(xiàn)圖片向左浮動(dòng)、而且被文字環(huán)繞的效果，你只需先設(shè)定圖片所在盒子的寬度，然后再把CSS屬性float 設(shè)為left即可：以下是代碼片段：#picturefloat:left;width:100px;另一個(gè)例子：列浮動(dòng)也

39、可以用于實(shí)現(xiàn)在文檔中分列。要?jiǎng)?chuàng)建多個(gè)列，你需要在HTML弋碼里用div來結(jié)構(gòu)化想要的各個(gè)列：以下是代碼片段：<div id="column1"><p>Haec disserens qua de re agaturet in quo causa consistat non videt.</p></div><div id="column2"><p>causas naturalesetantecedentes,idciro etiam nostrarumvoluntatum</p&g

40、t;</div><div id="column3"><p>nam nihil esset innostrapotestate si res itase haberet.</p></div>下面，我們把各列的寬度設(shè)定為“ 33% ,并通過定義 float屬性令各列向左浮動(dòng):以下是代碼片段：#column1 float:left;width:33%;#column2 float:left;width:33%;#column3 float:left;width:33%;float 屬性的值可以是left、right或者none。clear屬性CSS屬