Web前端開(kāi)發(fā)項(xiàng)目教程 課件 5.1.1 認(rèn)識(shí)盒子模型及其外邊距內(nèi)邊距寬高_(dá)第1頁(yè)
Web前端開(kāi)發(fā)項(xiàng)目教程 課件 5.1.1 認(rèn)識(shí)盒子模型及其外邊距內(nèi)邊距寬高_(dá)第2頁(yè)
Web前端開(kāi)發(fā)項(xiàng)目教程 課件 5.1.1 認(rèn)識(shí)盒子模型及其外邊距內(nèi)邊距寬高_(dá)第3頁(yè)
Web前端開(kāi)發(fā)項(xiàng)目教程 課件 5.1.1 認(rèn)識(shí)盒子模型及其外邊距內(nèi)邊距寬高_(dá)第4頁(yè)
Web前端開(kāi)發(fā)項(xiàng)目教程 課件 5.1.1 認(rèn)識(shí)盒子模型及其外邊距內(nèi)邊距寬高_(dá)第5頁(yè)
已閱讀5頁(yè)，還剩18頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web前端開(kāi)發(fā)項(xiàng)目教程主講人：卞孝麗1.1課程導(dǎo)論項(xiàng)目5美化傳統(tǒng)文化網(wǎng)任務(wù)5.1創(chuàng)作畫(huà)像展及圖片邊框

任務(wù)5.2添加創(chuàng)意漸變色與多重圖像背景目錄任務(wù)5.1創(chuàng)作畫(huà)像展及圖片邊框【任務(wù)效果圖】

【任務(wù)效果圖】★

5.1.1認(rèn)識(shí)盒子模型

★

5.1.2盒子的外邊距與內(nèi)邊距★

5.1.3盒子的寬與高【任務(wù)效果圖】★

5.1.4盒子的邊框★

5.1.5盒子的輪廓★5.1.6盒子的陰影

內(nèi)陰影頭像

多重內(nèi)陰影頭像【任務(wù)效果圖】★5.1.7CSS3新增盒子模型屬性

四角半徑參數(shù)關(guān)系

圓角邊框效果

邊框圖片素材

平鋪圖片邊框效果

拉伸圖片邊框效果

認(rèn)識(shí)盒子模型及其外邊距、內(nèi)邊距、寬、高【任務(wù)目標(biāo)】知識(shí)目標(biāo)

理解盒子模型及其構(gòu)成；掌握使用margin、padding屬性設(shè)置盒子的外邊距、內(nèi)邊距，使用width、height屬性調(diào)整盒子的寬度與高度的方法。能力目標(biāo)

能夠應(yīng)用盒子模型的各種規(guī)律和特征控制頁(yè)面元素的顯示、布局排版網(wǎng)站頁(yè)面；提升觀察和判斷能力，會(huì)使用盒子屬性美化頁(yè)面元素、制作常見(jiàn)的盒子模型效果。素質(zhì)目標(biāo)

培養(yǎng)耐心細(xì)致、精益求精的品質(zhì)；提升網(wǎng)頁(yè)制作中的空間感以及創(chuàng)新意識(shí)?！緦?dǎo)學(xué)知識(shí)】一、認(rèn)識(shí)盒子模型圖

盒子模型外邊距（margin）邊框（border）內(nèi)邊距（padding）內(nèi)容（content）【導(dǎo)學(xué)知識(shí)】二、盒子的外邊距與內(nèi)邊距

1.外邊距

（1）認(rèn)識(shí)外邊距

表

外邊距屬性及說(shuō)明設(shè)置內(nèi)容樣式屬性取值說(shuō)明外邊距margin:上右下左；使用外邊距簡(jiǎn)寫(xiě)屬性時(shí)可以按上、右、下、左的順序分別給4個(gè)邊賦不同值（中間以空格隔開(kāi)），也可以1個(gè)值為4邊、2個(gè)值為上下/左右、3個(gè)值為上/左右/下auto：瀏覽器來(lái)計(jì)算外邊距，只針對(duì)左右方向有效，通常用“margin:0auto;”設(shè)置塊級(jí)元素水平居中；length：以px、pt、cm、em等單位指定外邊距，值為0時(shí)可以省略單位；%：指定以包含元素寬度的百分比計(jì)的外邊距，只對(duì)應(yīng)其父元素寬度width；inherit：指定應(yīng)從父元素繼承外邊距上外邊距margin-top:值；右外邊距margin-right:值；下外邊距margin-bottom:值；左外邊距margin-left:值；【導(dǎo)學(xué)知識(shí)】二、盒子的外邊距與內(nèi)邊距

1.外邊距

（2）注意外邊距的特殊事項(xiàng) ①上下外邊距對(duì)行內(nèi)元素<span>、<i>、<b>、<s>、<u>等不起作用，左右外邊距沒(méi)問(wèn)題。

②上下外邊距作用在行內(nèi)塊元素時(shí)，會(huì)影響到該行的所有元素，也就是整行的元素都會(huì)跟著往下或往上移。

③外邊距合并

④外邊距溢出【導(dǎo)學(xué)知識(shí)】二、盒子的外邊距與內(nèi)邊距2.內(nèi)邊距

內(nèi)邊距用于控制內(nèi)容區(qū)域與邊框之間的距離，以便精確控制內(nèi)容在盒模型中的位置，加大內(nèi)邊距會(huì)擴(kuò)張?jiān)厮紖^(qū)域，其設(shè)置方法與外邊距相似，內(nèi)邊距越大，邊框和內(nèi)容之間距離就越大。

注意內(nèi)邊距不能使用負(fù)值，并且內(nèi)邊距的效果只作用于元素本身，并不會(huì)給其他元素的內(nèi)邊距帶來(lái)影響?！緦?dǎo)學(xué)知識(shí)】二、盒子的外邊距與內(nèi)邊距3.CSS重寫(xiě)

在使用內(nèi)外邊距實(shí)現(xiàn)圖文混排效果時(shí)，會(huì)發(fā)現(xiàn)瀏覽器邊界與頁(yè)面內(nèi)容之間存在一定距離，但并未對(duì)<body>或<p>元素設(shè)置過(guò)內(nèi)邊距或外邊距，這是因?yàn)?lt;body>、<h1>～<h6>、<p>等元素默認(rèn)就存在內(nèi)、外邊距樣式，可以使用代碼進(jìn)行初始化CSS重寫(xiě)。

*{padding:0;/*清除內(nèi)邊距*/margin:0;/*清除外邊距*/}【導(dǎo)學(xué)知識(shí)】三、盒子的寬與高

盒子在頁(yè)面上實(shí)際占據(jù)的空間由“外邊距+邊框+內(nèi)邊距+內(nèi)容”共同決定，計(jì)算頁(yè)面元素實(shí)際占據(jù)空間的總寬度時(shí)：元素總寬度=左外邊距+左邊框+左內(nèi)邊距+內(nèi)容寬度+右內(nèi)邊距+右邊框+右外邊距計(jì)算頁(yè)面元素實(shí)際占據(jù)空間的總高度時(shí)：元素總高度=上外邊距+上邊框+上內(nèi)邊距+內(nèi)容高度+下內(nèi)邊距+下邊框+下外邊距【導(dǎo)學(xué)知識(shí)】★

標(biāo)準(zhǔn)盒模型

★

怪異盒模型【任務(wù)小結(jié)】

通過(guò)構(gòu)造各種關(guān)系的盒子進(jìn)行觀察對(duì)比，我們可以更加了解盒子的外邊距、內(nèi)邊距、寬度、高度，也能理解外邊距的各種特殊注意事項(xiàng)以及標(biāo)準(zhǔn)盒模型與怪異盒模型對(duì)盒子的不同處理。

“因地制宜，時(shí)移

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論