第4章CSS盒子模型.ppt

1、CSS網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)教程,第1部分 CSS核心原理,第 4 章 CSS盒子模型,上一章介紹了CSS設(shè)計(jì)的代碼編寫和編輯方式，從本章開(kāi)始將深入講解CSS的核心原理。 盒子模型是CSS控制頁(yè)面時(shí)一個(gè)很重要的概念。,只有很好地掌握了盒子模型以及其中每個(gè)元素的用法，才能真正地控制好頁(yè)面中的各個(gè)元素。 本章主要介紹盒子模型的基本概念，并講解CSS定位的基本方法。,所有頁(yè)面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁(yè)面空間。 一般來(lái)說(shuō)這些被占據(jù)的空間往往都要比單純的內(nèi)容大。,換句話說(shuō)，可以通過(guò)調(diào)整盒子的邊框和距離等參數(shù)，來(lái)調(diào)節(jié)盒子的位置和大小。,一個(gè)頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)互相影響，因此掌握

2、盒子模型需要從兩方面來(lái)理解。 一是理解一個(gè)孤立的盒子的內(nèi)部結(jié)構(gòu)；二是理解多個(gè)盒子之間的相互關(guān)系。,本章首先講解獨(dú)立的盒子相關(guān)的性質(zhì)，然后介紹在普通情況下盒子的排列關(guān)系。 下一章將更深入地講解浮動(dòng)和定位的相關(guān)內(nèi)容。,4.1 “盒子”與“模型”的概念探究,圖4.1 畫框示意圖,圖4.2 盒子模型,4.2 長(zhǎng) 度 單 位,1相對(duì)類型 2絕對(duì)類型,4.3 邊 框,圖4.3 border,4.3.2 屬性值的簡(jiǎn)寫形式,CSS中可以用簡(jiǎn)單的方式確定邊框的屬性值。,1對(duì)不同的邊框設(shè)置不同的屬性值,使用CSS時(shí)，可以分別對(duì)4條邊框設(shè)置不同的屬性值。,方法是按照規(guī)定的順序，給出2個(gè)、3個(gè)或者4個(gè)屬性值，它們的含

3、義將有所區(qū)別，具體含義如下：,如果給出2個(gè)屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性。,如果給出3個(gè)屬性值，那么前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性。,如果給出4個(gè)屬性值，那么依次表示上、右、下、左邊框的屬性，即順時(shí)針排序。,2在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式,要把border-width、border-border-color和border-style這3個(gè)屬性合在一起，還可以用border屬性來(lái)簡(jiǎn)寫。 例如： border: 2px green dashed,這行樣式表示將4條邊框都設(shè)置為2像素的綠色虛線，這樣就比分為3條樣式來(lái)寫更

4、 方便。,3對(duì)一條邊框設(shè)置與其他邊框不同的屬性,在CSS中，可以單獨(dú)對(duì)某一條邊框在一條CSS規(guī)則中設(shè)置屬性，例如： border: 2px green dashed; border-left: 1px red solid,4同時(shí)制定一條邊框的一種屬性,有時(shí)，還需要對(duì)某一條邊框的某一個(gè)屬性進(jìn)行設(shè)置，例如僅希望設(shè)置左邊框的顏色為紅色，可以寫作： border-left-color:red,5實(shí)例,在上面講解的基礎(chǔ)上，給出下述實(shí)例，實(shí)例文件為“04-02.html”。, #outerBox,width:200px; height:100px; border:2px black solid; bord

5、er-left:4px green dashed; border-color:red gray orange blue; /*上 右 下 左*/,border-right-color:purple; ,4.4 設(shè)置內(nèi)邊距,和前面介紹的邊框類似，padding屬性可以設(shè)置1、2、3或4個(gè)屬性值，分別如下。,設(shè)置1個(gè)屬性值時(shí)，表示上下左右4個(gè)padding均為該值。,設(shè)置2個(gè)屬性值時(shí)，前者為上下padding的值，后者為左右padding的值。,設(shè)置3個(gè)屬性值時(shí)，第1個(gè)為上padding的值，第2個(gè)為左右padding的值，第3個(gè)為下padding的值。,設(shè)置4個(gè)屬性值時(shí)，按照順時(shí)針?lè)较?，依次為?/p>

6、、右、下、左padding的值。,如果需要專門設(shè)置某一個(gè)方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom來(lái)設(shè)置。 例如有如下代碼，實(shí)例文件為“04-04.html”。,圖4.8 padding示意圖,4.5 設(shè)置外邊距,外邊距（margin）指的是元素與元素之間的距離。,觀察圖4.7，可以看到邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒(méi)有緊貼著瀏覽器窗口的邊框。,這是因?yàn)閎ody本身也是一個(gè)盒子，在默認(rèn)情況下，body會(huì)有一個(gè)若干像素的margin，具體數(shù)值因各個(gè)瀏覽器而不盡相同。,因此在body

7、中的其他盒子就不會(huì)緊貼著瀏覽器窗口的邊框了。 為了驗(yàn)證這一點(diǎn)，可以給body這個(gè)盒子也加一個(gè)邊框，代碼如下。,body border:1px black solid; background:#cc0; ,圖4.10 margin的效果,4.6 盒子之間的關(guān)系,4.6.1 HTML與DOM 1“樹”的概念,圖4.12 家譜示意圖,2DOM樹,圖4.14 打開(kāi)新窗口,圖4.15 DOM樹與頁(yè)面布局的對(duì)應(yīng)關(guān)系,4.6.2 標(biāo)準(zhǔn)文檔流,“標(biāo)準(zhǔn)文檔流”（Normal Document Stream），簡(jiǎn)稱“標(biāo)準(zhǔn)流”，是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時(shí)，各種元素的排列規(guī)則。,1塊級(jí)元素（b

8、lock level）,li占據(jù)著一個(gè)矩形的區(qū)域，并且和相鄰的li依次豎直排列，不會(huì)排在同一行中。,ul也具有同樣的性質(zhì)，占據(jù)著一個(gè)矩形的區(qū)域，并且和相鄰的ul依次豎直排列，不會(huì)排在同一行中。,因此，這類元素稱為“塊級(jí)元素”（block level），即它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。,2行內(nèi)元素（inline）,對(duì)于文字這類元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行，這就是另一種元素，稱為“行內(nèi)元素”（inline）。,比如標(biāo)記，就是一個(gè)典型的行內(nèi)元素，這個(gè)標(biāo)記本身不占有獨(dú)立的區(qū)域，僅僅是在其他元素的基礎(chǔ)上指出了一定的范圍。 再比如，最常用的標(biāo)記，

9、也是一個(gè)行內(nèi)元素。,4.6.3 標(biāo)記與標(biāo)記,下面舉一個(gè)簡(jiǎn)單的例子，實(shí)例文件為“04-06.html”。,font-size:18px;/* 字號(hào)大小 */ font-weight:bold;/* 字體粗細(xì) */ font-family:Arial;/* 字體 */ color:#FFFF00;/* 顏色 */,background-color:#0000FF;/* 背景顏色 */ text-align:center;/* 對(duì)齊方式 */ width:300px;/* 塊寬度 */ height:100px;/* 塊高度 */ , 這是一個(gè)div標(biāo)記 , div 標(biāo)記范例 div,例如有如下代碼

10、，實(shí)例文件為“04-07.html”。, div與span的區(qū)別 ,div標(biāo)記不同行： span標(biāo)記同一行：, ,圖4.17 與標(biāo)記的區(qū)別,4.7 盒子在標(biāo)準(zhǔn)流中的定位原則,4.7.1 行內(nèi)元素之間的水平margin 圖4.18所示為兩個(gè)塊并排的情況。,圖4.18 行內(nèi)元素之間的margin,4.7.2 塊級(jí)元素之間的豎直margin,如果不是行內(nèi)元素，而是豎直排列的塊級(jí)元素，margin的取值情況就會(huì)有所不同。,兩個(gè)塊級(jí)元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖4.20所示。,這個(gè)現(xiàn)象稱為margin的“塌陷”（或稱為“合并”）現(xiàn)象，意思是說(shuō)較小的margin塌陷（合并）到了較大的margin中。,圖4.20 塊元素之間的margin,4.7.3 嵌套盒子之間的margin,除了上面提到的行內(nèi)元素間隔和塊級(jí)元素間隔這兩種關(guān)系外，還有一種位置關(guān)系，它的margin值對(duì)CSS排版也有重要的作用，這就是父子關(guān)系。,當(dāng)一個(gè)塊包含在另一個(gè)塊中時(shí)，便形成了典型的父子關(guān)系。 其中子塊的margin將以父塊的內(nèi)容為參考，如圖4.22所示。,圖4.22 父子塊的margin,圖4.23 父子塊的margin,圖4.24 IE與Firefox對(duì)待父height的不同處理,4.7.4 margin屬性可以設(shè)置為負(fù)值,上面提及margin的時(shí)候，