徹底弄懂CSS盒子模式之三 - CSS+DIV -

徹底弄懂CSS盒子模式之三

時間:2013-08-13 12:43:43   來源:   評論:加載中...   點擊:加載中...
一、下面請看float的精彩表演,有請。大家好,我是float,歡迎訪問CSS家族,在CSS家族中,在當今CSS排版流行的年代,我可扮演著重要的角色哦。因為我的工作對網頁設計人員很有用,就像之前align幫助你們定位網頁元素一樣...

一、下面請看float的精彩表演,有請。
大家好,我是float,歡迎訪問CSS家族,在CSS家族中,在當今CSS排版流行的年代,我可扮演著重要的角色哦。因為我的工作對網頁設計人員很有用,就像之前align幫助你們定位網頁元素一樣重要,但是我的功能似乎比align強多了。接下來我將現場給你演示我的絕活,看細心點哦。當然也許我一下子不能把我所有的技巧給大家演示,因為有些技巧本人也許一下子記不起來了,那就請那些對我比較了解的人來幫我補充補充啰,比如版主等等啊。

先講一下我主要的工作,我主要是幫助對像在網頁中對齊的,一旦我發出float:left或float:right命令,被我浮動的對像就會向左或向右移動直到遇到邊框( border) 、填充( padding) 、邊界( margin )或者另一個塊對象的邊緣為止,當然也有一些看起來較特殊的情況,比如被我浮動的元素設置了一個負邊界(margin)的時候。我還可以讓文字流環繞在被我浮動的對像周圍,這也是我的特色。另外要注意的一點是,最好給浮動對象設置一下寬度,不然會出現一些意想不到的麻煩。我主要浮動類型有兩種,它們是float:left和float:right,當然我還有一個功能是float:none,不過float:none比較少用,這也是我的默認值,有時也是很有用的,我等一下會講的。下面我開始表演了,我的舞臺可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在標準的舞臺中,如FF中才能表出來做的,請注意看我的說明,不然你用IE是看不到效果的。

1.我不動聲色(我的屬性不設置的時候),即:float:none,或者樣式中不寫這一項時,網頁中的元素將按照它們自身的出現方式排列,一般是靠邊對齊,先出現的排在前邊,下面運行框是DIV先出現,P后出現,所以P排在DIV后面,注意看DIV的右邊還有很多空間,但是P的文字不會跟在它的右邊去。看

 

<!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">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:none;/*此對象不浮動,此時對象不允許有文本流環繞*/}
-->
</style>
</head>

<body>
<div id="box">我現在沒有浮動</div>
<p>什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。在現實生活中,假設我們在一個廣場上,把不同大小和顏色的盒子,以一定的間隙和順序擺放好,最后從廣場上空往下看,看到的圖形和結構就類似我們要做的網頁版面設計了,如下圖。</p>
</body>
</html>

2.我向盒子發出float:left命令,此時盒子浮動到左邊,雖然看起來我的位置與上面例子沒有什么變化,但此時跟在我后面的文本可以環繞到浮動盒子的右邊了,看下面:
<!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">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:left;/*此對象左浮動,此時對象右邊允許有文本流環繞*/}
-->
</style>
</head>

<body>
<div id="box">我現在左浮動(float:left)</div>
<p>什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。在現實生活中,假設我們在一個廣場上,把不同大小和顏色的盒子,以一定的間隙和順序擺放好,最后從廣場上空往下看,看到的圖形和結構就類似我們要做的網頁版面設計了,如下圖。</p>
</body>
</html>

 

3.我向盒子發出float:right命令,不難想象此時盒子浮動到右邊,此時文本將會環繞到此盒子的左邊,看下面

<!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">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:right;/*此對象右浮動,此時對象左邊允許有文本流環繞*/}
-->
</style>
</head>

<body>
<div id="box">我現在右浮動(float:right)</div>
<p>什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。在現實生活中,假設我們在一個廣場上,把不同大小和顏色的盒子,以一定的間隙和順序擺放好,最后從廣場上空往下看,看到的圖形和結構就類似我們要做的網頁版面設計了,如下圖。</p>
</body>
</html>

哈哈,看我表演了幾項是不是開始覺得有點煩了,那么簡單無聊的,那下面就給你表演幾項特別的,但愿你不是IE的崇拜者,因為下面效果你用IE是看不到效果的,請用像FF那樣的標準瀏覽器來運行代碼框或測試吧。

4.浮動對象有負邊界的情況,這時浮動對象可能會漂浮到其所在父對象外邊去,這有點像絕對定位的效果,但又與絕對定位不同,它還能影響它所在地方的文本流

<!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">
<!--
* {margin:0px; padding:0px;}
body {margin:50px; font-size:12px;}
#box {background-color: #66CCFF;  height: 100px; width: 300px; border: 1px solid #66CCCC; }
#box2 {background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}
-->
</style>
</head>

<body>
<div id="box">
  <div id="box2">margin-top:-15px</div>
右上方小盒子邊界是margin:-10px 10px 0px 0px;,folat:right,這個效果還可以吧,這可不是用相對、或者絕對定位做出來的哦,部分文字還是有環繞效果。如果在上面小盒子輸標題,在這大盒子內部輸內容,這種類型的網頁版面效果還可以的,大家可以舉一反三,多做出另外類似的效果來。</div>
</body>
</html>

5.如果一個較寬的子盒子在一個較窄的父盒子中擁有浮屬性,子盒子漂浮后不會影響到父盒子的寬度,子盒子超出父盒子的部分會越到父盒子外面,但越出父盒子外的部分不會引起外邊文本流的移動,而會直接覆蓋在外邊文字上面的

<!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">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:12px;}
#box {background-color: #66CCFF; margin-left:200px; height: 100px; width: 300px; border: 1px solid #66CCCC; float:left;}
#box2 {background-color: #33CC99; height: 30px; width: 500px; border: 1px solid #336666;float:right;}
-->
</style>
</head>

<body>
<div id="box">我現在左浮動(float:left),我的寬小于子盒子,但它不會把我撐開,同時我設置了一定的左邊界,目的是方便看到子盒子越出去的情況
  <div id="box2">我是子盒子,我的寬比父級要大,同時我的浮動是folat:right,所以右邊靠在父級盒子的右邊,而寬于父盒子的部分在大盒子左邊越出。</div>
</div>
<p>什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。在現實生活中,假設我們在一個廣場上,把不同大小和顏色的盒子,以一定的間隙和順序擺放好,最后從廣場上空往下看,看到的圖形和結構就類似我們要做的網頁版面設計了,如下圖。</p>
</body>
</html>

6.如果父盒子不設定高度或者高度為自動,而其子盒子設定了浮動,并且高度超過了父盒子,在標準瀏覽器中,父盒子高度是不能自適高度,但是這種高度自適應常是我們需要的,如何做到讓高度自適應呢,常見的辦法是在父級內,浮動子盒子后邊加入以下代碼:<div style="clear:both"></div>清除掉那個小盒子的浮動。請自行把代碼中我注釋部分消除注釋再看效果,現在是沒有自適應的情況

<!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">
<!--
* {margin:0px; padding:0px;}
body {margin:5px; font-size:12px;}
.box {background-color: #66CCFF;width: 200px;border: 1px solid #66CCCC;}
.box2 {background-color: #33CC99;margin-right:20px; width: 100px; border: 1px solid #336666;float:left;/*刪掉這浮動也可以讓父級高度自適應*/}
-->
</style>
</head>

<body>
<div class="box">我是父盒子,我的高沒有設定,但是我的子盒子高過我時,在標準瀏覽器中我的高不能自適應。
  <div class="box2">
這個盒子是小盒子,它沒有設定高度屬性,其高度是隨里面的文字的加多而自動升高的,但是當它的高度超過父級盒子時,在標準瀏覽器中并沒有把父級撐高,這種情況與上面講的子級寬度超過父級元素是一樣的,但是這種高度自適度常是我們需要的,如何做到讓高度自適應呢,常見的辦法是在父級內加入以下樣式:&lt;div style="clear:both"&gt;&lt;/div&gt;清除掉與其同級小盒子的浮動。
  </div>
<!--<div style="clear:both"></div>去除這里的注釋再看看,這樣父級盒子的高級就可以自適應了-->
</div>
</body>
</html>



相關熱詞搜索:

 
上一篇:徹底弄懂CSS盒子模式之二
下一篇:徹底弄懂CSS盒子模式之五
收藏 將此文推薦給朋友
分享到:
10个数复式三中三多少组公式