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

下載本文檔

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

文檔簡介

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

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

CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實訓——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習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．盒子的寬度和高度的計算盒子的寬度=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;*定義元素上下邊框寬度為10px，左右邊框寬度為20px*/border:solid#f00; *定義元素邊框類型為實線型，顏色為紅色*/width:100px;/*定義元素寬度為100px*/height:100px;/*定義元素高度為100px*/}*{margin:0;/*清除外邊距*/padding:0;/*清除內(nèi)邊距*/}6.1CSS盒模型的組成和大小2．盒模型的幾點提示一是理解一個孤立的盒子的內(nèi)部結構；二是理解多個盒子之間的相互關系。6.1CSS盒模型的組成和大小6.1.3塊級元素與行級元素的寬度和高度【例6-1】塊級元素與行級元素寬度和高度的區(qū)別，本例文件6-1.html在瀏覽器中的顯示效果，如圖6-2所示。6.1CSS盒模型的組成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>塊級元素與行級元素</title><styletype="text/css">.special{border:1pxsolidred;/*元素邊框為1px紅色實線*/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>塊級元素與行級元素</title><styletype="text/css">.special{border:3pxsolidred;/*元素邊框為3px紅色實線*/width:300px;/*元素寬度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色為黃色*/margin:50px;/*元素外邊距50px*/

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

溫馨提示

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

評論

0/150

提交評論