網(wǎng)頁制作綜合技術(shù)教程：第13章 CSS盒子模型_第1頁
網(wǎng)頁制作綜合技術(shù)教程：第13章 CSS盒子模型_第2頁
網(wǎng)頁制作綜合技術(shù)教程：第13章 CSS盒子模型_第3頁
網(wǎng)頁制作綜合技術(shù)教程：第13章 CSS盒子模型_第4頁
網(wǎng)頁制作綜合技術(shù)教程：第13章 CSS盒子模型_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第13章CSS盒子模型

“盒子”與“模型”的概念探究13.1邊框13.2設(shè)置內(nèi)邊距13.3設(shè)置外邊距13.4

盒子之間的關(guān)系13.5盒子在標(biāo)準(zhǔn)流中的定位原則13.6盒子模型概念的案例13.7

盒子模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。

本章主要介紹盒子模型的基本概念，并講解CSS定位的基本方法。13.1“盒子”與“模型”的概念探究

圖13.1畫框示意圖

圖13.2盒子模型案例13-0，1,2,3,413.2邊框

圖13.3border示意圖13.2.1設(shè)置邊框樣式

13.2.2屬性值的簡寫形式

1．對不同的邊框設(shè)置不同的屬性值 在13.2.1節(jié)的實例代碼中，分別設(shè)置了border-color、border-width和border-style這3個屬性，其效果是對上下左右4個邊框同時產(chǎn)生作用。

在實際使用CSS時，除了采用這種方式，還可以分別對4條邊框設(shè)置不同的屬性值。

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

（1）如果給出2個屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性。Border-color:redblue;1122

（2）如果給出3個屬性值，那么前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性。Border-color:redbluegreen;1223

（3）如果給出4個屬性值，那么依次表示上、右、下、左邊框的屬性，即順時針排序。Border-color:redbluegreenpurple;12342．在一行中同時設(shè)置邊框的寬度、顏色和樣式

要把border-width、border-border-color和border-style這3個屬性合在一起，還可以用border屬性來簡寫。

例如：

border:2pxgreendashed;

這行樣式表示將4條邊框都設(shè)置為2像素的綠色虛線，這樣就比分為3條樣式來寫方便多了。

3．對一條邊框設(shè)置與其他邊框不同的屬性

4．同時制訂一條邊框的一種屬性13.3設(shè)置內(nèi)邊距

13.4設(shè)置外邊距

圖13.12DOM樹與頁面布局的對應(yīng)關(guān)系

1．塊級元素

2．行內(nèi)元素13.5.3<div>標(biāo)記與<span>標(biāo)記

<html> <head> <title>div與span的區(qū)別</title> </head> <body>案例13-0513.6盒子在標(biāo)準(zhǔn)流中的定位原則

13.6.1行內(nèi)元素之間的水平Margin案例13-06橫向margin相加，縱向margin坍塌

圖13.15行內(nèi)元素之間的margin13.6.2塊級元素之間的豎直margin

圖13.17塊元素之間的margin案例13-0713.6.3嵌套盒子之間的margin

圖13.19父子塊的margin案例13-08

圖13.21IE與Firefox瀏覽器對待父元素高度的不同處理案例19-0913.6.4margin可以設(shè)置為負值

圖13.23

溫馨提示

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

最新文檔

評論

0/150

提交評論