久久久av一区二区,亚洲高清无码视频专区,亚洲有码一区91

　徹底弄懂CSS盒子模式之三

作者：webflash　時間： 2007-04-02　文檔類型：原創(chuàng)　來自：藍色理想

第 1 頁浮動的表演和清除的自述 [1]
第 2 頁浮動的表演和清除的自述 [2]

7.下面這個例子很重要，可以說明浮動元素的很多特性，大家運行代碼框后再手動調整瀏覽器窗口大小，看版面有什么變化，下面我給你解釋常見的問題和技巧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>理解浮動的一些特性</title> <style type="text/css">  </style> </head> <body> <div class="box"></div> 什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， <div class="box"></div> CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料； <div class="box"></div> 邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同的是， <div class="box"></div> 現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。 <div class="box"></div> 什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， <div class="box"></div> CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料； <div class="box"></div> 邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同的是， <div class="box"></div> 現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。 <div class="box"></div> <div style="clear:both"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

（1）在一個盒子內的浮動對像左右浮動時，它的左右邊界不一定就會靠在父對象的內補白上或邊框上，上面9個盒子都是左浮動的，但在窗口最大化的情況下，只有第一個盒子和最后一個盒子的左邊界靠在父盒子左邊內側。
（2）浮動對象之間不會重疊。上面有講到浮動對像越出外邊去的情況，那么一個浮動盒子又會不會越到另一個浮動對象上面去呢，實質上它們是不會重疊的，即使用了負邊界看起來像重疊在一起。
（3）并排的同一浮動方向的對像在一行中放不下時，可以自動換行。大家在瀏覽下面代碼時，改變一下瀏覽器窗口，就會看到我所說的情況。
（4）浮動盒子在本文流中出現(xiàn)的位置會影響它的水平浮動位置，就像下面運行框效果，那些盒子并不是緊跟著一起出現(xiàn)的，之間有文本存在，所以結果造成所有等高的盒子并不是同一直線排列出現(xiàn)，而變成有一定的梯度。如果兩個盒子之間文本流區(qū)塊高度大于前邊浮動元素高度時，緊接著的同一浮動方向的對象將會被自動換行顯示。在下面實例中，如果調整瀏覽器窗口盡量小時，所有盒子可能會出現(xiàn)全部靠在父盒子左邊的情況，因為縮小瀏覽器同時，盒子右邊的文本流高度隨之增高。

可見不要小看我浮動，熟練掌握我將會給你排版帶來很多意想不到效果哦。

8．再講一則注意事項，在開始時我不是有說過要給浮動對象設定一個寬度的，不然會有意想不到結果，即沒有設定寬度而又沒有內容的對象浮動后寬度會趨近于0。請大家自行修改下面代碼我注釋前邊的寬（只能刪其中一個），測試看看效果就知道怎么回事了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>要給浮動元素一個寬度，不然盒子在沒有內容情況下寬度將趨向0</title> <style type="text/css">  </style> </head> <body> <div class="box"></div> <div class="box2"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

二、下面我要請我的好伙伴clear出場給你們講講它的故事，有請。
大家好，我是clear，能見到如此多人捧場我感到無比的榮幸，雖然在各位網頁設計工作中我的作用常常被忽略，但我也有些作用是沒有人能替代的，下面我將講幾項我實用作用以激發(fā)大家對我的興趣：
1．如果你想一段文本流兩邊可以出現(xiàn)浮動對像的話，你可以用clear:none，看下面效果，藍色背景段落兩邊的盒子是浮動的哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>讓對象兩邊都有浮動對象存在</title> <style type="text/css">  </style> </head> <body> <div class="box1"></div> <p>　　如果你想嘗試一下不用表格來排版網頁，而是用CSS來排版你的網頁，也就是常聽的用DIV來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統(tǒng)的表格排版方式，提高企業(yè)競爭力，那么你一定要接觸到的一個知識點就是CSS的盒子模式，這就是DIV排版的核心所在，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是CSS排版網頁的優(yōu)勢遠遠不只這些，本人在這里就不多說，自己可以去查找相關信息。理解CSS盒子模型什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。 CSS盒子模式 </p> <div class="box2"></div> <p id="clearF">　　這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。 </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

2．如果你要為一個網頁準備一個頁腳區(qū)塊，比如<div id=”footer”></div>，你在設計網頁的時候，你想不管你前邊怎么浮動排版而又不想這個頁腳跟上去，讓它一直保持在前邊內容后邊，而且還是換行獨立顯示的，那么給這個頁腳區(qū)塊樣式加個clear:both吧。
3．我還可以快速清除網頁中具有浮動屬性的不同對像的浮動，如果有很多的話，我的作用更能發(fā)揮出來，當然你也可以一條一條樣式去刪掉浮動的樣式，但我肯定這樣沒有我來的方便，下面效果中，沒有清除浮動前是橫排的，但是清除后變成縱排（舉此例只為說明問題，不管這實例實不實用），請自己刪掉我的注釋部分進行前后對比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用clear快速清除所有對像浮動</title> <style type="text/css">  </style> </head> <body> <div class="box1">我原來位置是[橫排]的</div> <div class="box2">我原來位置是[橫排]的</div> <div class="box3">我原來位置是[橫排]的</div> <div class="box4">我原來位置是[橫排]的</div> <div class="box5">我原來位置是[橫排]的</div> <div class="box2">我原來位置是[橫排]的</div> <div class="box3">我原來位置是[橫排]的</div> <div class="box4">我原來位置是[橫排]的</div> <div class="box5">我原來位置是[橫排]的</div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

好了，我的介紹到此完畢，各位還滿意嗎？有什么不滿意可以提出來哦。你的意見就像一面鏡子，它可以讓我很清楚地發(fā)現(xiàn)自己的不足，然后改進它。

經典論壇討論：
http://bbs.blueidea.com/thread-2732609-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2007/4579.asp　

出處：藍色理想
責任編輯：elesa

上一頁浮動的表演和清除的自述 [1] 下一頁

◎進入論壇網頁制作、網站綜合版塊參加討論

相關文章

徹底弄懂CSS盒子模式之二

作者文章

徹底弄懂CSS盒子模式之五

徹底弄懂CSS盒子模式之四

徹底弄懂CSS盒子模式之二

徹底弄懂CSS盒子模式之一


關鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設計比賽網頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設計大賽開啟

國際體驗設計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx