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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第13章CSS盒子模型

“盒子”與“模型”的概念探究13.1邊框13.2設置內邊距13.3設置外邊距13.4

盒子之間的關系13.5盒子在標準流中的定位原則13.6盒子模型概念的案例13.7

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

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

圖13.1畫框示意圖

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

圖13.3border示意圖13.2.1設置邊框樣式

13.2.2屬性值的簡寫形式

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

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

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

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

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

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

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

例如：

border:2pxgreendashed;

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

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

4．同時制訂一條邊框的一種屬性13.3設置內邊距

13.4設置外邊距

圖13.12DOM樹與頁面布局的對應關系

1．塊級元素

2．行內元素13.5.3<div>標記與<span>標記

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

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

圖13.15行內元素之間的margin13.6.2塊級元素之間的豎直margin

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

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

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

圖13.23

溫馨提示

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

評論

0/150

提交評論