《CSS網(wǎng)頁(yè)設(shè)計(jì)》課件-第4章CSS盒子模型_第1頁(yè)
《CSS網(wǎng)頁(yè)設(shè)計(jì)》課件-第4章CSS盒子模型_第2頁(yè)
《CSS網(wǎng)頁(yè)設(shè)計(jì)》課件-第4章CSS盒子模型_第3頁(yè)
《CSS網(wǎng)頁(yè)設(shè)計(jì)》課件-第4章CSS盒子模型_第4頁(yè)
《CSS網(wǎng)頁(yè)設(shè)計(jì)》課件-第4章CSS盒子模型_第5頁(yè)
已閱讀5頁(yè)，還剩70頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第4章CSS盒子模型

“盒子”與“模型”的概念探究4.1長(zhǎng)度單位4.2邊框4.3設(shè)置內(nèi)邊距4.4

設(shè)置外邊距4.5盒子之間的關(guān)系4.6盒子在標(biāo)準(zhǔn)流中的定位原則4.7

上一章介紹了CSS設(shè)計(jì)的代碼編寫和編輯方式，從本章開始將深入講解CSS的核心原理。盒子模型是CSS控制頁(yè)面時(shí)一個(gè)很重要的概念。

只有很好地掌握了盒子模型以及其中每個(gè)元素的用法，才能真正地控制好頁(yè)面中的各個(gè)元素。本章主要介紹盒子模型的基本概念，并講解CSS定位的基本方法。

所有頁(yè)面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁(yè)面空間。一般來說這些被占據(jù)的空間往往都要比單純的內(nèi)容大。

換句話說，可以通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的位置和大小。

一個(gè)頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)互相影響，因此掌握盒子模型需要從兩方面來理解。一是理解一個(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.3border4.3.2屬性值的簡(jiǎn)寫形式

CSS中可以用簡(jiǎn)單的方式確定邊框的屬性值。1．對(duì)不同的邊框設(shè)置不同的屬性值

使用CSS時(shí)，可以分別對(duì)4條邊框設(shè)置不同的屬性值。

方法是按照規(guī)定的順序，給出2個(gè)、3個(gè)或者4個(gè)屬性值，它們的含義將有所區(qū)別，具體含義如下：

如果給出2個(gè)屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性。

如果給出3個(gè)屬性值，那么前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性。

如果給出4個(gè)屬性值，那么依次表示上、右、下、左邊框的屬性，即順時(shí)針排序。2．在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式

要把border-width、border-border-color和border-style這3個(gè)屬性合在一起，還可以用border屬性來簡(jiǎn)寫。例如：

border:2pxgreendashed

這行樣式表示將4條邊框都設(shè)置為2像素的綠色虛線，這樣就比分為3條樣式來寫更方便。3．對(duì)一條邊框設(shè)置與其他邊框不同的屬性

在CSS中，可以單獨(dú)對(duì)某一條邊框在一條CSS規(guī)則中設(shè)置屬性，例如：

border:2pxgreendashed;border-left:1pxredsolid4．同時(shí)制定一條邊框的一種屬性

有時(shí)，還需要對(duì)某一條邊框的某一個(gè)屬性進(jìn)行設(shè)置，例如僅希望設(shè)置左邊框的顏色為紅色，可以寫作：

border-left-color:red5．實(shí)例

在上面講解的基礎(chǔ)上，給出下述實(shí)例，實(shí)例文件為“04-02.html”。

<html> <head> <styletype="text/css"> #outerBox{

width:200px; height:100px;border:2pxblacksolid;border-left:4pxgreendashed;border-color:redgrayorangeblue;/*上右下左*/

border-right-color:purple; } </style> </head> <body> <divid="outerBox"> </div> </body>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í)針方向，依次為上、右、下、左padding的值。

如果需要專門設(shè)置某一個(gè)方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom來設(shè)置。例如有如下代碼，實(shí)例文件為“04-04.html”。

圖4.8padding示意圖4.5設(shè)置外邊距

外邊距（margin）指的是元素與元素之間的距離。

觀察圖4.7，可以看到邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器窗口的邊框。

這是因?yàn)閎ody本身也是一個(gè)盒子，在默認(rèn)情況下，body會(huì)有一個(gè)若干像素的margin，具體數(shù)值因各個(gè)瀏覽器而不盡相同。

因此在body中的其他盒子就不會(huì)緊貼著瀏覽器窗口的邊框了。為了驗(yàn)證這一點(diǎn)，可以給body這個(gè)盒子也加一個(gè)邊框，代碼如下。

body{ border:1pxblacksolid; background:#cc0; }

圖4.10margin的效果4.6盒子之間的關(guān)系

4.6.1HTML與DOM1．“樹”的概念

圖4.12家譜示意圖2．DOM樹

圖4.14打開新窗口

圖4.15DOM樹與頁(yè)面布局的對(duì)應(yīng)關(guān)系4.6.2標(biāo)準(zhǔn)文檔流

“標(biāo)準(zhǔn)文檔流”（NormalDocumentStream），簡(jiǎn)稱“標(biāo)準(zhǔn)流”，是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時(shí)，各種元素的排列規(guī)則。1．塊級(jí)元素（blocklevel）

li占據(jù)著一個(gè)矩形的區(qū)域，并且和相鄰的li依次豎直排列，不會(huì)排在同一行中。

ul也具有同樣的性質(zhì)，占據(jù)著一個(gè)矩形的區(qū)域，并且和相鄰的ul依次豎直排列，不會(huì)排在同一行中。

因此，這類元素稱為“塊級(jí)元素”（blocklevel），即它們總是以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。2．行內(nèi)元素（inline）

對(duì)于文字這類元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行，這就是另一種元素，稱為“行內(nèi)元素”（inline）。

比如<strong></strong>標(biāo)記，就是一個(gè)典型的行內(nèi)元素，這個(gè)標(biāo)記本身不占有獨(dú)立的區(qū)域，僅僅是在其他元素的基礎(chǔ)上指出了一定的范圍。再比如，最常用的<a>標(biāo)記，也是一個(gè)行內(nèi)元素。4.6.3<div>標(biāo)記與<span>標(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; /*塊高度*/}

</style> </head> <body> <div>

這是一個(gè)div標(biāo)記

</div> </body> </html>

<html> <head> <title>div標(biāo)記范例</title> <styletype="text/css"> div{

例如有如下代碼，實(shí)例文件為“04-07.html”。

<html> <head> <title>div與span的區(qū)別</title> </head> <body>

<p>div標(biāo)記不同行：</p><div><imgsrc="cup.gif"border="0"></div><div><imgsrc="cup.gif"border="0"></div><div><imgsrc="cup.gif"border="0"></div><p>span標(biāo)記同一行：</p>

<span><imgsrc="cup.gif"border="0"></span><span><imgsrc="cup.gif"border="0"></span><span><imgsrc="cup.gif"border="0"></span></body></html>

圖4.17<div>與<span>標(biāo)記的區(qū)別4.7盒子在標(biāo)準(zhǔn)流中的定位原則

4.7.1行內(nèi)元素之間的水平margin

圖4.18所示為兩個(gè)塊并排的情況。

圖4.18行內(nèi)元素之間的margin4.7.2塊級(jí)元素之間的豎直margin

如果不是行內(nèi)元素，而是豎直排列的塊級(jí)元素，margin的取值情況就會(huì)有所不同。

兩個(gè)塊級(jí)元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖4.20所示。

這個(gè)現(xiàn)象稱為margin的“塌陷”（或稱為“合并”）現(xiàn)象，意思是說較小的margin塌陷（合并）到了較大的margin中。

圖4.20塊元素之間的margin4.7.3嵌套盒子之間的margin

除了上面提到的行內(nèi)元素間隔和塊級(jí)元素間隔這兩種關(guān)系外，還有一種位置關(guān)系，它的margin值對(duì)CSS排版也有重要的作用，這就是父子關(guān)系。

當(dāng)一個(gè)<div>塊包含在另一個(gè)<div>塊中時(shí)，便形成了典型的父子關(guān)系。其中子塊的margin將以父塊的內(nèi)容為參考，如圖4.22所示。

圖4.22父子塊的margin

圖4.23父子塊的margin

圖4.24IE與Firefox對(duì)待父height的不同處理4.7.4m

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論