第七章方框與邊框_第1頁
第七章方框與邊框_第2頁
第七章方框與邊框_第3頁
第七章方框與邊框_第4頁
第七章方框與邊框_第5頁
已閱讀5頁，還剩4頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

1、第七章 方框與邊框教學目的1.初步了解盒子模型的定義2.掌握盒子模型的特性3.掌握盒子的定位4.了解盒子的margin疊加問題5.掌握盒子的浮動6.使用盒子模型進行頁面布局教學重點 邊框的設置方法、盒子的構成、盒子的定位教學難點 使用盒子模型進行頁面布局教學課時4課時新知識導入：CSS的盒子模型l 盒子模型是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互。l 頁面上的每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內容、填充、邊框和邊界間距組成。l 網頁就是由許多個盒子通過不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成。 CSS的盒子模型CSS的盒子模型l

2、 每個HTML元素都可以看作是一個裝了東西的盒子l 盒子里面的內容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其它盒子之間，還有邊界(magin),如圖所示l 默認情況下盒子的邊框是無，背景色是透明，所以我們在默認情況下看不到盒子元素盒子大小的計算 一個元素實際寬度=左邊界左邊框左填充內容寬度右填充右邊框右邊界IE quirk模式下盒子的寬度l 當將文檔聲明DOCTYPE刪除后，IE 6對網頁的解釋會進入quirk（怪異）模式，此時盒子的寬度等于左邊界寬度右邊界l 因此當使用了盒子屬性后切忌刪除DOCTYPE邊框border屬性l 邊框bord

3、er則可以設置寬度、顏色和樣式,分別是l border-width（寬度）;l border-color（顏色）;l border-style（樣式）.l 其中border-style屬性可以將邊框設置為實線（solid）、虛線（dashed）、點劃線（dotted）、雙線（double）等效果 使用CSS時，可以分別對4條邊框設置不同的屬性值。l 方法是按照規定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區別，具體含義如下： 如果給出2個屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性。如果給出3個屬性值，那么前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，后者表示下

4、邊框的屬性。 如果給出4個屬性值，那么依次表示上、右、下、左邊框的屬性，即順時針排序。l 要把border-width、border-border-color和border-style這3個屬性合在一起，還可以用border屬性來簡寫。l 例如：l border: 2px green dashedl 這行樣式表示將4條邊框都設置為2像素的綠色虛線，這樣就比分為3條樣式來寫更方便。邊框實例<html> <head> <style type="text/css"> #outerBox width:200px; height:100px; bo

5、rder:2px black solid; border-left:4px green dashed;border-color:red gray orange blue; /*上 右 下 左*/border-right-color:purple; </style></head><body> <div id="outerBox"> </div></body>特殊樣式邊框l 在CSS中，可以對元素的其中三條邊框應用同種樣式，但是單獨對某一條邊框設置特殊的樣式，以制作特殊效果，例如：l border: 2px

6、 green dashed;l border-left: 1px red solid 盒子模型的應用l 1. 美化表單l 網頁中的表單控件在默認情況下背景都是灰色的，文本框邊框是粗線條帶立體感的，不夠美觀。下列代碼通過CSS改變表單的邊框樣式、顏色和背景顏色讓文本框，按鈕等變得漂亮些。 填充padding屬性l 填充padding屬性，也稱為盒子的內邊距。就是盒子邊框到內容之間的距離，和表格的填充屬性（cellpadding）比較相似。如果填充屬性為0，則盒子的邊框會緊挨著內容，這樣通常不美觀。l 當對盒子設置了背景顏色或背景圖像后，那么背景會覆蓋padding和內容組成的范圍，并且默認情況下

7、背景圖像是以padding的左上角為基準點在盒子中平鋪的 l 和前面介紹的邊框類似，padding屬性可以設置1、2、3或4個屬性值，分別如下：l 設置1個屬性值時，表示上下左右4個padding均為該值。l 設置2個屬性值時，前者為上下padding的值，后者為左右padding的值。l 設置3個屬性值時，第1個為上padding的值，第2個為左右padding的值，第3個為下padding的值。l 設置4個屬性值時，按照順時針方向，依次為上、右、下、左padding的值。l 如果需要專門設置某一個方向的padding，可以使用l padding-left、l padding-right、l

8、 padding-top 或者l padding-bottom來設置。設置外邊距l 外邊距（margin）指的是元素與元素之間的距離。l 小案例：l 觀察普通的網頁，可以發現邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器窗口的邊框。l 這是因為body本身也是一個盒子，在默認情況下，body會有一個若干像素的margin，具體數值因各個瀏覽器而不盡相同。l 因此在body中的其他盒子就不會緊貼著瀏覽器窗口的邊框了。l 為了驗證這一點，可以給body這個盒子也加一個邊框，代碼如下。body border:1px black solid; background:#cc0;三類m

9、arginl 1.行內元素之間的水平marginl 2.塊級元素之間的豎直margin1.行內元素之間的水平marginl 如圖所示為兩個塊并排的情況。2.塊級元素之間的豎直marginl 如果不是行內元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。l 兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖所示。l 這個現象稱為margin的¡°塌陷¡±（或稱為¡°合并¡±）現象，意思是說較小的margin塌陷（合并）到了較大的margin中。3

10、.嵌套盒子之間的marginl 當一個<div>塊包含在另一個<div>塊中時，便形成了典型的父子關系。l 這時，如果兩個盒子都有邊框，我們通常考慮兩個盒子邊框之間的距離l 此時，兩個盒子邊框之間的距離等于：n 外面盒子的填充值里面盒子的margin值n 其中子塊的margin將以父塊的內容為參考，n 如下圖所示：子元素的實際寬度超過父height的不同處理方式l 當子元素的實際高度超出父元素的height的時候，IE與Firefox處理方式是不同的。l IE：n 自動擴大父元素的高度，以容納子元素l Firefox：n 不擴充，因此，會子元素會溢出到父元素之外l 示例

11、：子元素的實際寬度超過父height的不同處理方式l 圖例：margin的特殊用法：取負值l margin 可取負值l 上面提及margin的時候，它的值都是正數。其實margin的值也可以設置為負數。l 當margin取負值的時候，可以產生意向不到的排版效果，而且有關的巧妙運用方法也非常多，在后續章節中都會陸續介紹。l 這里先分析margin設為負數時產生的排版效果。margin取負值的排版效果l 當margin設為負數時，會使被設為負數的元素向相反的方向移動，甚至覆蓋在另外的元素上。l 示例l 效果圖如下所示盒子模型的特性l 邊界值margin可為負，填充padding不可為負l 邊框bo

12、rder默認值為0，即不顯示l 行內元素，如a，定義上下邊界不影響行高對盒子模型的思考l 邊框是實的，我們可以看到實實在在的邊框，而填充和邊界都是虛的，我們只能看到他們對元素的影響l 盒子模型中只能設置兩類顏色，即邊框顏色和背景顏色l 盒子模型可設置三類距離，即邊界距離margin，填充距離padding和邊框值border屬性值的簡寫形式 l 方法是按照規定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區別，具體含義如下： 如果給出2個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性； 如果給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，后者表示下

13、邊框的屬性； 如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序。各種元素盒子屬性的默認值l 大部分html元素的盒子屬性(margin, padding)默認值都為0；l 有少數html元素的(margin, padding)瀏覽器默認值不為0，例如：body，p，ul，li，form標記等，因此我們有時有必要先設置它們的這些屬性為0。l Input元素的邊框屬性默認不為0，我們可以設置為0達到美化表單中輸入框和按鈕的目的。盒子的定位盒子的三種定位形式l 在標準流下的定位l 在浮動屬性下的定位l 在定位屬性下的定位l 除非設置浮動屬性或定位屬性，否則所有盒子都是在標準流中定位

14、。顧名思義，標準流中元素盒子的位置由元素在HTML中的位置決定。標準流l HTML元素在標準狀況下的定位方式l 行內元素在同一行內橫向排列l 塊級元素占滿整個一行，在頁面中豎向排列l 元素不會移動到其它地方去，對于嵌套的元素盒子也是嵌套的關系標準流下的盒子排列分析<style type="text/css">* border: 2px dashed #FF0066;padding: 10px;margin: 2px;</style><body><div>網頁的banner（塊級元素）</div><a href

15、="#">行內元素1</a><a href="#">行內2</a><a href="#">行內3</a><div>這是無名塊<p>這是盒子中的盒子</p></div>行內元素的盒子l 行內元素的盒子永遠只能在瀏覽器中得到一行高度的空間（行高由line-height屬性決定，如果沒設置該屬性，則是內容的默認高度），如果給它設置上下border，margin，padding等值，導致其盒子的高度超過行高，那么它的盒子上下部分將

16、和其他元素的盒子重疊。l 因此，不推薦對行內元素直接設置盒子屬性，一般先設置行內元素以塊級元素顯示，再設置它的盒子屬性。 改變行內元素的高度l 如圖所示，當增加行內元素的邊界和填充時，行內元素a占據瀏覽器的高度并沒有增加，下面這個div塊仍然在原來的位置，導致行內元素盒子的上下部分重疊，而左右部分不會受影響 display屬性l 通過display屬性可控制元素是以行內元素顯示還是以塊級元素顯示，或不顯示l display:block | inline | none | list-itemblock元素l block元素的特點是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它

17、的容器的100%，除非用width設定一個寬度<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。 inline元素inline元素的特點是：l 和其他元素都在一行上l 高，行高及頂和底邊距不可改變；l 寬度就是它的文字或圖片的寬度，不可改變。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子 列表項元素display: li

18、st-iteml 在html中只有li元素默認是此類型，將元素設置為列表項元素后將按列表元素顯示，再通過設置列表選項可使元素的左邊出現小黑點。 隱藏元素display: none;l 當某個元素被設置成了隱藏元素之后，瀏覽器會完全忽略掉這個元素，該元素將不會被顯示，也不會占據文檔中的位置。像title元素默認就是此類型。l 比較visibility: hidden; l 制作下拉菜單、tab面板等有時就需要用display: none把菜單或面板隱藏起來需要使用display屬性切換的情況p 讓一個inline元素從新行開始；p 讓塊元素和其他元素保持在一行上；p 控制inline元素的寬度;p 控制inline元素的高度（對導航條特別有用）；p 無須設定寬度即可為一個塊元素設定與文字同寬的背景色 標準流下定位的應用制作豎直導航菜單#nav a font-size: 14px;color: #333333;text-decoration: none;background-color: #CCCCCC;display: block;width:140px;padding: 6px 10px 4px;bor

溫馨提示

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

最新文檔

評論

0/150

提交評論