TP06 盒子模型

1、盒子模型第六章回顧與作業(yè)點(diǎn)評回顧與作業(yè)點(diǎn)評使用使用CSS設(shè)置背景圖像時，通常會同時設(shè)置設(shè)置背景圖像時，通常會同時設(shè)置背景圖像的（背景圖像的（ ）和）和（ ）屬性）屬性使用使用font屬性設(shè)置字體類型、風(fēng)格、大小、粗屬性設(shè)置字體類型、風(fēng)格、大小、粗細(xì)時的順序是什么？細(xì)時的順序是什么？使用（使用（ ）屬性設(shè)置列表）屬性設(shè)置列表項目符號。項目符號。提問提問background-repeatbackground-position字體風(fēng)格字體風(fēng)格粗細(xì)粗細(xì)大小大小類型類型list-style-type或或list-style2/30本章任務(wù)本章任務(wù)制作導(dǎo)航條頁面制作導(dǎo)航條頁面制作聚美優(yōu)品商品分類頁面制作聚

2、美優(yōu)品商品分類頁面制作聚美優(yōu)品美容熱點(diǎn)產(chǎn)品列表制作聚美優(yōu)品美容熱點(diǎn)產(chǎn)品列表制作制作1號店美妝商品圖片列表頁面號店美妝商品圖片列表頁面制作聚美優(yōu)品彩妝熱賣產(chǎn)品列表頁面制作聚美優(yōu)品彩妝熱賣產(chǎn)品列表頁面3/30本章目標(biāo)本章目標(biāo)理解盒子模型及其構(gòu)成理解盒子模型及其構(gòu)成會使用盒子屬性美化網(wǎng)頁元素會使用盒子屬性美化網(wǎng)頁元素會計算盒子模型尺寸會計算盒子模型尺寸理解標(biāo)準(zhǔn)文檔流及其組成和特點(diǎn)理解標(biāo)準(zhǔn)文檔流及其組成和特點(diǎn)會使用會使用display屬性設(shè)置元素顯示方式屬性設(shè)置元素顯示方式4/30什么是盒子模型什么是盒子模型什么是什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網(wǎng)的盒子模式呢？為什么叫它是盒子

3、？先說說我們在網(wǎng) 頁設(shè)計中常聽頁設(shè)計中常聽的屬性名：內(nèi)容的屬性名：內(nèi)容(content)、填充、填充(padding)、邊框、邊框(border)、邊界、邊界(margin)， CSS盒子模式都具備這些屬性。盒子模式都具備這些屬性。 這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫?，日常這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫猓粘Ｉ钪兴姷暮凶右簿褪悄苎b東西的一種箱子，也具有這些屬性，所以叫它盒生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。那么內(nèi)容（子模式。那么內(nèi)容（CONTENT）就是盒子里裝的東西；而填充）就是盒子里裝的

4、東西；而填充(PADDING)就就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框(BORDER)就是盒子本身了；至于邊界就是盒子本身了；至于邊界(MARGIN)則說明盒子擺放的時候的不能則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時也為了方便取出。在網(wǎng)頁設(shè)計上，全部堆在一起，要留一定空隙保持通風(fēng)，同時也為了方便取出。在網(wǎng)頁設(shè)計上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中嵌套），與現(xiàn)實生活中盒子不同的是，現(xiàn)實生

5、活中的東西一般不能大于盒子，否則盒子會被撐壞的，盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。什么顏色材料做成的

6、，邊界就是該盒子與其它東西要保留多大距離。每個每個HTML標(biāo)記都可看作一個盒子；標(biāo)記都可看作一個盒子；每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性；每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性；每個屬性都包括四個部分：上、右、下、左；這四部分可同時設(shè)置，也可分別每個屬性都包括四個部分：上、右、下、左；這四部分可同時設(shè)置，也可分別設(shè)置；設(shè)置；5/30什么是盒子模型什么是盒子模型邊框邊框（border）高高（height）寬寬（width）外邊距外邊距（margin）內(nèi)邊距內(nèi)邊距（padding）網(wǎng)頁元素網(wǎng)頁元素6/30邊框邊框邊框邊框border-colorborder-widthborder-

7、style屬性屬性說明說明示例示例border-top-color 上邊框顏色上邊框顏色border-top-color:#369; border-right-color右邊框顏色右邊框顏色border-right-color:#369; border-bottom-color下邊框顏色下邊框顏色border-bottom-color:#fae45b; border-left-color左邊框顏色左邊框顏色border-left-color:#efcd56; border-color四個邊框為同一顏色四個邊框為同一顏色border-color:#eeff34;上、下邊框顏色上、下邊框顏色：#3

8、69左、右邊框顏色左、右邊框顏色：#000border-color:#369 #000;上邊框顏色上邊框顏色：#369左、右邊框顏色左、右邊框顏色：#000下邊框顏色下邊框顏色：#f00border-color:#369 #000 #f00;上、右、下、左邊框顏色上、右、下、左邊框顏色：#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;7/30邊框粗細(xì)邊框粗細(xì)border-widththinmediumthick像素值像素值border-top-width:5px; border-right-width:10px; border-botto

9、m-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px;border-width:5px 1px 6px;border-width:1px 3px 5px 2px;示例示例8/30邊框樣式邊框樣式border-stylenonehiddendotteddashedsoliddouble示例示例border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; b

10、order-style:solid ; border-style:solid dotted;border-style:solid dotted dashed;border-style:solid dotted dashed double;9/30border簡寫簡寫同時設(shè)置邊框的顏色、粗細(xì)和樣式同時設(shè)置邊框的顏色、粗細(xì)和樣式border-bottom: 9px #F00 dashed ;border: 9px #F00 dashed ;示例示例邊框邊框文本框邊框文本框邊框演示演示示例示例1：邊框樣式：邊框樣式空白間隙空白間隙10/30外邊距外邊距marginmargin-topmargin-r

11、ightmargin-bottommargin-leftmarginmargin-top: 1 pxmargin-right : 2 pxmargin-bottom : 2 pxmargin-left : 1 pxmargin :3px 5px 7px 4px;margin :3px 5px;margin :3px 5px 7px;margin :8px;示例示例演示演示示例示例2：外邊距樣式：外邊距樣式11/30外邊距的妙用外邊距的妙用網(wǎng)頁居中對齊網(wǎng)頁居中對齊margin:0px auto;演示演示示例示例3：網(wǎng)頁居中對齊：網(wǎng)頁居中對齊12/30內(nèi)邊距內(nèi)邊距 paddingpadding-l

12、eft padding-rightpadding-toppadding-bottompaddingpadding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; padding:20px 5px 8px 10px ; padding:10px 5px; padding:30px 8px 10px ; padding:10px;示例示例內(nèi)邊距內(nèi)邊距演示演示示例示例4：內(nèi)邊距樣式：內(nèi)邊距樣式13/30盒子型模的尺寸盒子型模的尺寸10px10px5px5px70px盒子模型總尺寸盒子模型總尺寸=border-

13、width+padding+margin+內(nèi)容寬度內(nèi)容寬度外邊距（外邊距（margin）：）：10px內(nèi)邊距（內(nèi)邊距（padding）：）：5px內(nèi)容寬度內(nèi)容寬度width：70px14/30學(xué)員操作學(xué)員操作聚美優(yōu)品商品分類聚美優(yōu)品商品分類2-1訓(xùn)練要點(diǎn)訓(xùn)練要點(diǎn)使用定義列表使用定義列表dl-dt-dd制作商品分類制作商品分類使用使用border屬性設(shè)置邊框樣式屬性設(shè)置邊框樣式使用使用margin和和padding消除外邊距和消除外邊距和內(nèi)邊距內(nèi)邊距使用使用background設(shè)置頁面背景設(shè)置頁面背景需求說明需求說明使用定義列表使用定義列表dl-dt-dd制作商品分類制作商品分類列表列表分類列表

14、標(biāo)題與列表內(nèi)容對齊顯示分類列表標(biāo)題與列表內(nèi)容對齊顯示講解需求說明講解需求說明指導(dǎo)指導(dǎo)15/30學(xué)員操作學(xué)員操作聚美優(yōu)品商品分類聚美優(yōu)品商品分類2-2實現(xiàn)思路實現(xiàn)思路頁面背景顏色直接使用標(biāo)簽選擇器頁面背景顏色直接使用標(biāo)簽選擇器body設(shè)置。設(shè)置。使用使用margin和和padding設(shè)置標(biāo)題標(biāo)簽、定義列表標(biāo)設(shè)置標(biāo)題標(biāo)簽、定義列表標(biāo)簽的外邊距、內(nèi)邊距為簽的外邊距、內(nèi)邊距為0px。商品分類標(biāo)題放在商品分類標(biāo)題放在 標(biāo)簽中，統(tǒng)一設(shè)置字體樣式，標(biāo)簽中，統(tǒng)一設(shè)置字體樣式，使用使用padding-left設(shè)置文本向右縮進(jìn)距離，然后通過設(shè)置文本向右縮進(jìn)距離，然后通過類樣式使用類樣式使用background屬性

15、分別設(shè)置分類標(biāo)題前的屬性分別設(shè)置分類標(biāo)題前的背景小圖標(biāo)。背景小圖標(biāo)。列表內(nèi)容放在列表內(nèi)容放在標(biāo)簽中，統(tǒng)一設(shè)置字體樣式，使標(biāo)簽中，統(tǒng)一設(shè)置字體樣式，使用用padding-left設(shè)置文本向右縮進(jìn)距離，使用設(shè)置文本向右縮進(jìn)距離，使用border-bottom設(shè)置下邊框的虛線邊框。設(shè)置下邊框的虛線邊框。完成時間完成時間：10分鐘分鐘指導(dǎo)指導(dǎo)16/30學(xué)員操作學(xué)員操作聚美優(yōu)品美容熱點(diǎn)聚美優(yōu)品美容熱點(diǎn)2-1訓(xùn)練要點(diǎn)訓(xùn)練要點(diǎn)使用無序列表制作熱點(diǎn)產(chǎn)品列表使用無序列表制作熱點(diǎn)產(chǎn)品列表使用使用border屬性設(shè)置邊框樣式屬性設(shè)置邊框樣式使用使用CSS設(shè)置外邊距和內(nèi)邊距設(shè)置外邊距和內(nèi)邊距使用使用backgroun

16、d設(shè)置頁面背景設(shè)置頁面背景會使用后代選擇器樣式會使用后代選擇器樣式需求說明需求說明使用無序列表制作美容品列表使用無序列表制作美容品列表列表圖標(biāo)使用背景圖像實現(xiàn)列表圖標(biāo)使用背景圖像實現(xiàn)講解需求說明講解需求說明指導(dǎo)指導(dǎo)17/30學(xué)員操作學(xué)員操作聚美優(yōu)品美容熱點(diǎn)聚美優(yōu)品美容熱點(diǎn)2-2實現(xiàn)思路實現(xiàn)思路頁面背景顏色直接使用標(biāo)簽選擇器頁面背景顏色直接使用標(biāo)簽選擇器body設(shè)置。設(shè)置。使用使用margin和和padding設(shè)置段落標(biāo)簽、無序列表標(biāo)設(shè)置段落標(biāo)簽、無序列表標(biāo)簽的外邊距、內(nèi)邊距為簽的外邊距、內(nèi)邊距為0px。使用使用list-style-type設(shè)置列表的項目符號為無。設(shè)置列表的項目符號為無。使用使

17、用border-bottom設(shè)置列表下邊框的虛線邊框。設(shè)置列表下邊框的虛線邊框。使用使用a和和a :hover分別設(shè)置超鏈接樣式和鼠標(biāo)懸停在分別設(shè)置超鏈接樣式和鼠標(biāo)懸停在超鏈接上時文本樣式。超鏈接上時文本樣式。完成時間完成時間：10分鐘分鐘指導(dǎo)指導(dǎo)列表前的數(shù)字放在列表前的數(shù)字放在標(biāo)簽中標(biāo)簽中#beauty a span color:#FFF;background:url(./image/dot_01.gif) 0px 5px no-repeat;text-align:center;padding:10px;font-weight:bold;#beauty a:hover span color:

18、#FFF;background:url(./image/dot_02.gif) 0px 5px no-repeat;18/30學(xué)員操作學(xué)員操作制作商品圖片列表制作商品圖片列表需求說明需求說明使用無序列表實現(xiàn)商品圖片列使用無序列表實現(xiàn)商品圖片列表的排列。表的排列。超鏈接圖片邊框為超鏈接圖片邊框為1px灰色實灰色實線，當(dāng)鼠標(biāo)移至超鏈接圖片上線，當(dāng)鼠標(biāo)移至超鏈接圖片上時，圖片邊框為時，圖片邊框為1px橙色實線。橙色實線。完成時間完成時間：5分鐘分鐘練習(xí)練習(xí)19/30共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題調(diào)試技巧調(diào)試技巧20/30 什么是標(biāo)準(zhǔn)文檔流

19、什么是標(biāo)準(zhǔn)文檔流 簡稱簡稱“標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流”，是指在不使用其他的排版，是指在不使用其他的排版 定位相關(guān)定位相關(guān) 特殊特殊CSS規(guī)則時，各種排規(guī)則時，各種排列規(guī)則，即列規(guī)則，即CSS網(wǎng)頁元素默認(rèn)的排列網(wǎng)頁元素默認(rèn)的排列 方式。方式。標(biāo)準(zhǔn)文檔流組成標(biāo)準(zhǔn)文檔流組成塊級元素（塊級元素（block level）、列表、列表內(nèi)聯(lián)元素（內(nèi)聯(lián)元素（inline）特點(diǎn)：特點(diǎn)：1、和其他元素都在一行上; 2、高度、行高和頂以及底邊距都不可改變；3、寬度就是它的文字或圖片的寬度，不可改變。 總的來說，內(nèi)聯(lián)元素一般都是基于語義級(semantic)的基本元素，它只能容納文本或者其他內(nèi)聯(lián)元素，通常被包括在塊元素中使用。、

20、.標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流內(nèi)聯(lián)標(biāo)簽可以包含于塊級標(biāo)簽中，成為它的子元素，內(nèi)聯(lián)標(biāo)簽可以包含于塊級標(biāo)簽中，成為它的子元素，而反過來則不成立而反過來則不成立經(jīng)驗經(jīng)驗21/30總是在新行上開始； 高度，行高以及外邊距和內(nèi)邊距都可控制； 寬度缺省是它的容器的100%，除非設(shè)定一個寬度。 它可以容納內(nèi)聯(lián)元素和其他塊元素 display屬性屬性控制元素的顯示和隱藏控制元素的顯示和隱藏塊級元素與行級元素的轉(zhuǎn)變塊級元素與行級元素的轉(zhuǎn)變值值說明說明block塊級元素的默認(rèn)值，元素會被顯示為塊級元素，該元素前后會帶有換行符塊級元素的默認(rèn)值，元素會被顯示為塊級元素，該元素前后會帶有換行符inline內(nèi)聯(lián)元素的默認(rèn)值。元素

21、會被顯示為內(nèi)聯(lián)元素，該元素前后沒有換行符內(nèi)聯(lián)元素的默認(rèn)值。元素會被顯示為內(nèi)聯(lián)元素，該元素前后沒有換行符 none設(shè)置元素不會被顯示設(shè)置元素不會被顯示演示演示示例示例5： display屬性屬性22/30學(xué)員操作學(xué)員操作彩妝熱賣產(chǎn)品列表彩妝熱賣產(chǎn)品列表2-1訓(xùn)練要點(diǎn)訓(xùn)練要點(diǎn)使用無序列表制作產(chǎn)品列表使用無序列表制作產(chǎn)品列表使用使用margin和和padding設(shè)置外邊距和內(nèi)邊距設(shè)置外邊距和內(nèi)邊距使用使用background設(shè)置頁面背景設(shè)置頁面背景使用使用display控制元素的顯示和隱藏控制元素的顯示和隱藏需求說明需求說明使用無序列表制作熱賣彩妝產(chǎn)品列表使用無序列表制作熱賣彩妝產(chǎn)品列表教員講解需求教員講解需求指導(dǎo)指導(dǎo)23/30學(xué)員操作學(xué)員操作彩妝熱賣產(chǎn)品列表彩妝熱賣產(chǎn)品列表2-2實現(xiàn)思路實現(xiàn)思路鼠標(biāo)移至超鏈接上時顯示產(chǎn)品詳細(xì)信息內(nèi)容全放鼠標(biāo)移至超鏈接上時顯示產(chǎn)品詳細(xì)信息內(nèi)容全放在在標(biāo)簽的標(biāo)簽的中中使用使用display屬性設(shè)置屬性設(shè)置div的顯示和隱藏的顯示和隱藏 大家都喜歡的彩妝大家都喜歡的彩妝 1Za姬芮新能真皙美白隔離霜姬芮新能真皙美白隔離霜 35g ￥62.00 最近最近69122人購買人購買 完成時間：完成時間：10分鐘分鐘提示提示指導(dǎo)指導(dǎo)#co