第七章方框與邊框_第1頁
第七章方框與邊框_第2頁
第七章方框與邊框_第3頁
第七章方框與邊框_第4頁
第七章方框與邊框_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

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

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

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

4、邊框的屬性。 如果給出4個屬性值，那么依次表示上、右、下、左邊框的屬性，即順時針排序。l 要把border-width、border-border-color和border-style這3個屬性合在一起，還可以用border屬性來簡寫。l 例如：l border: 2px green dashedl 這行樣式表示將4條邊框都設(shè)置為2像素的綠色虛線，這樣就比分為3條樣式來寫更方便。邊框?qū)嵗?lt;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中，可以對元素的其中三條邊框應(yīng)用同種樣式，但是單獨(dú)對某一條邊框設(shè)置特殊的樣式，以制作特殊效果，例如：l border: 2px

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

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

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

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

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

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

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

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

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

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

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

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

18、st-iteml 在html中只有l(wèi)i元素默認(rèn)是此類型，將元素設(shè)置為列表項(xiàng)元素后將按列表元素顯示，再通過設(shè)置列表選項(xiàng)可使元素的左邊出現(xiàn)小黑點(diǎn)。 隱藏元素display: none;l 當(dāng)某個元素被設(shè)置成了隱藏元素之后，瀏覽器會完全忽略掉這個元素，該元素將不會被顯示，也不會占據(jù)文檔中的位置。像title元素默認(rèn)就是此類型。l 比較visibility: hidden; l 制作下拉菜單、tab面板等有時就需要用display: none把菜單或面板隱藏起來需要使用display屬性切換的情況p 讓一個inline元素從新行開始；p 讓塊元素和其他元素保持在一行上；p 控制inline元素的寬度;p 控制inline元素的高度（對導(dǎo)航條特別有用）；p 無須設(shè)定寬度即可為一個塊元素設(shè)定與文字同寬的背景色 標(biāo)準(zhǔn)流下定位的應(yīng)用制作豎直導(dǎo)航菜單#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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論