第4章CSS盒子模型.ppt

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

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

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

4、 方便。,3對一條邊框設(shè)置與其他邊框不同的屬性,在CSS中，可以單獨對某一條邊框在一條CSS規(guī)則中設(shè)置屬性，例如： border: 2px green dashed; border-left: 1px red solid,4同時制定一條邊框的一種屬性,有時，還需要對某一條邊框的某一個屬性進(jìn)行設(shè)置，例如僅希望設(shè)置左邊框的顏色為紅色，可以寫作： border-left-color:red,5實例,在上面講解的基礎(chǔ)上，給出下述實例，實例文件為“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個屬性值，分別如下。,設(shè)置1個屬性值時，表示上下左右4個padding均為該值。,設(shè)置2個屬性值時，前者為上下padding的值，后者為左右padding的值。,設(shè)置3個屬性值時，第1個為上padding的值，第2個為左右padding的值，第3個為下padding的值。,設(shè)置4個屬性值時，按照順時針方向，依次為上

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

7、中的其他盒子就不會緊貼著瀏覽器窗口的邊框了。 為了驗證這一點，可以給body這個盒子也加一個邊框，代碼如下。,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 打開新窗口,圖4.15 DOM樹與頁面布局的對應(yīng)關(guān)系,4.6.2 標(biāo)準(zhǔn)文檔流,“標(biāo)準(zhǔn)文檔流”（Normal Document Stream），簡稱“標(biāo)準(zhǔn)流”，是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時，各種元素的排列規(guī)則。,1塊級元素（b

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

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

10、，實例文件為“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所示為兩個塊并排的情況。,圖4.18 行內(nèi)元素之間的margin,4.7.2 塊級元素之間的豎直margin,如果不是行內(nèi)元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。,兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖4.20所示。,這個現(xiàn)象稱為margin的“塌陷”（或稱為“合并”）現(xiàn)象，意思是說較小的margin塌陷（合并）到了較大的margin中。,圖4.20 塊元素之間的margin,4.7.3 嵌套盒子之間的margin,除了上面提到的行內(nèi)元素間隔和塊級元素間隔這兩種關(guān)系外，還有一種位置關(guān)系，它的margin值對CSS排版也有重要的作用，這就是父子關(guān)系。,當(dāng)一個塊包含在另一個塊中時，便形成了典型的父子關(guān)系。 其中子塊的margin將以父塊的內(nèi)容為參考，如圖4.22所示。,圖4.22 父子塊的margin,圖4.23 父子塊的margin,圖4.24 IE與Firefox對待父height的不同處理,4.7.4 margin屬性可以設(shè)置為負(fù)值,上面提及margin的時候，