網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例7知識點01：收納神器盒子模型_第1頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例7知識點01：收納神器盒子模型_第2頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例7知識點01：收納神器盒子模型_第3頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例7知識點01：收納神器盒子模型_第4頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例7知識點01：收納神器盒子模型_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

我們畢業(yè)啦其實是答辯的標(biāo)題地方收納神器——盒子模型網(wǎng)站開發(fā)時，一個網(wǎng)頁上有若干板塊，每個板塊都是放在盒子中來顯示的，這里的盒子就是CSS中的盒子模型。盒子模型盒子模型就是把HTML頁面中的元素看作矩形的盒子，也就是盛裝內(nèi)容的容器。每個盒子都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。盒子模型“div”是英文“division”的縮寫，意為“分割、區(qū)域”?！?lt;div>”標(biāo)記就是一個區(qū)塊容器標(biāo)記，簡稱塊標(biāo)記，塊通稱為盒子。盒子模型<div>標(biāo)記可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁元素。<div>標(biāo)記中還可以包含多層<div>標(biāo)記。實際上DIV+CSS布局網(wǎng)頁就是將網(wǎng)頁內(nèi)容放入若干<div>標(biāo)記中，并使用CSS設(shè)置這些塊的屬性。說明：盒子的概念是非常容易理解的。但是如果需要精確地排版，有的時候1px都不能差，這就需要非常精確地理解其中的計算方法。盒子模型例

7-1example01.html說明：一個盒子實際占有的寬度（或高度）是由“內(nèi)容+2×內(nèi)邊距+2×邊框+2×外邊距”組成的。因此，盒子的實際寬度和高度均是310px。盒子模型（1）并不是只有用<div>定義的塊才是盒子，事實上大部分網(wǎng)頁元素本質(zhì)上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子，這些元素都有默認(rèn)的盒子屬性值。注意（2）給盒子添加背景顏色或背景圖像時，該元素的背景顏色或背景圖像也將出現(xiàn)在內(nèi)邊距中。（3）雖然每個盒子模型都擁有內(nèi)邊距、邊框、外邊距、寬度和高度這些基本屬性，但是并不要求必須對每個元素都定義這些屬性。（4）<div>標(biāo)記定義的盒子默認(rèn)的寬度是瀏覽器的寬度，默認(rèn)的高度由盒子中的內(nèi)容決定，默認(rèn)的邊框、內(nèi)邊距、外邊距都為0。但網(wǎng)頁中的元素body、p、h1～h6、ul、li等都有默認(rèn)的外邊距和內(nèi)邊距，設(shè)計網(wǎng)頁時，一般要將這些元素的外邊距和內(nèi)邊距都先設(shè)為0，需要時再設(shè)置為非零的值。小結(jié)本次課講解了盒子模型的概念、盒子相關(guān)的幾個屬性以及如何精確地計

溫馨提示

  • 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)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論