網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的組成和大小_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的組成和大小_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的組成和大小_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的組成和大小_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的組成和大小_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

頁面中的每個(gè)元素都包含在一個(gè)矩形區(qū)域內(nèi)，這個(gè)矩形區(qū)域通過一個(gè)模型來描述其占用空間，這個(gè)模型被稱為盒模型（BoxModel），也稱框模型。

CSS3的盒模型CSS盒模型的組成和大小目錄

CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.1CSS盒模型的組成和大小6.1.1盒子的組成1.內(nèi)容區(qū)域contentarea2.內(nèi)邊距區(qū)域paddingarea3.邊框區(qū)域borderarea（1）邊框與背景（2）邊框的樣式（3）邊框的寬度（4）邊框的顏色4.外邊距區(qū)域marginarea6.1CSS盒模型的組成和大小6.1.2盒子的大小1．盒子的寬度和高度的計(jì)算盒子的寬度=margin-left（左邊距）+border-left（左邊框）+padding-left（左填充）+width（內(nèi)容寬度）+padding-right（右填充）+border-right（右邊框）+margin-right（右邊界）6.1CSS盒模型的組成和大小2.盒子的高度盒子的高度=margin-top（上邊距）+border-top（上邊框）+padding-top（上填充）+height（內(nèi)容寬度）+padding-bottom（下填充）+border-bottom（下邊框）+margin-bottom（下邊界）6.1CSS盒模型的組成和大小#test{margin:10px20px;/*定義元素上下外邊距為10px，左右外邊距為20px*/padding:20px10px;/*定義元素上下內(nèi)邊距為20px，左右內(nèi)邊距為10px*/border-width:10px20px;*定義元素上下邊框?qū)挾葹?0px，左右邊框?qū)挾葹?0px*/border:solid#f00; *定義元素邊框類型為實(shí)線型，顏色為紅色*/width:100px;/*定義元素寬度為100px*/height:100px;/*定義元素高度為100px*/}*{margin:0;/*清除外邊距*/padding:0;/*清除內(nèi)邊距*/}6.1CSS盒模型的組成和大小2．盒模型的幾點(diǎn)提示一是理解一個(gè)孤立的盒子的內(nèi)部結(jié)構(gòu)；二是理解多個(gè)盒子之間的相互關(guān)系。6.1CSS盒模型的組成和大小6.1.3塊級(jí)元素與行級(jí)元素的寬度和高度【例6-1】塊級(jí)元素與行級(jí)元素寬度和高度的區(qū)別，本例文件6-1.html在瀏覽器中的顯示效果，如圖6-2所示。6.1CSS盒模型的組成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>塊級(jí)元素與行級(jí)元素</title><styletype="text/css">.special{border:1pxsolidred;/*元素邊框?yàn)?px紅色實(shí)線*/width:300px;/*元素寬度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色為黃色*/margin:5px;/*元素外邊距5px*/}</style></head><body><divclass="special">這是div元素</div><spanclass="special">這是span元素</span></body></html>6.1CSS盒模型的組成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>塊級(jí)元素與行級(jí)元素</title><styletype="text/css">.special{border:3pxsolidred;/*元素邊框?yàn)?px紅色實(shí)線*/width:300px;/*元素寬度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色為黃色*/margin:50px;/*元素外邊距50px*/

display:block;/*塊級(jí)元素顯示*/}</style></head><body><divclass="special">這

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論