1、 內(nèi)容可修改盒子模型盒子模型盒子模型（Box Model）=網(wǎng)頁布局的基石文本圖像音頻視頻盒子模型內(nèi) 容盒子模型由四部分組成：邊 框外邊距內(nèi)邊距內(nèi) 容盒子屬性內(nèi) 容邊框border內(nèi)邊距外邊距paddingmargintoprightbottomleft盒子屬性div padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; 第一種方法：分別設(shè)置各個方向的屬性值盒子屬性div padding:20px 10px 15px 30px; 上右下左div padding:20px 10px 15px ;

2、 上左右下div padding:20px 10px; 上下左右div padding:20px; 上下左右第二種方法：同時設(shè)置各個方向的屬性值盒子尺寸計算內(nèi)容300px元素實際寬度（盒子的寬度）=左外邊距+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右外邊距內(nèi)容盒子尺寸計算100px元素實際高度（盒子的高度）=上外邊距+上邊框+上填充+內(nèi)容高度+下填充+下邊框+下外邊距盒子尺寸計算計算在網(wǎng)頁中占據(jù)多大寬度？ #box width:200px; margin:20px; padding:20px; border:solid 1px #000000;外邊距合并外邊距合并外邊距合并指的是，當(dāng)兩個垂直

3、外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。外邊距合并當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。外邊距合并當(dāng)一個元素包含在另一個元素中時，如果沒有內(nèi)邊距或邊框把外邊距分隔開，它們的上外邊距也會發(fā)生合并。外邊距合并空元素，如果它有外邊距，但是沒有邊框或填充，在這種情況下，上外邊距與下外邊距會發(fā)生合并。外邊距合并注意：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距是不會合并的。思政小貼士在學(xué)習(xí)網(wǎng)頁布局時，一定要用心觀察，勤于實踐，并總結(jié)出一般規(guī)律，加深對知識

4、的理解。實踐任務(wù) 制作產(chǎn)品展示模塊任務(wù)描述創(chuàng)建一個產(chǎn)品展示product.html網(wǎng)頁，在網(wǎng)頁展示推薦產(chǎn)品的信息，包含產(chǎn)品圖片、名稱和規(guī)格說明，網(wǎng)頁效果如圖所示。本任務(wù)利用盒子模型來實現(xiàn)四個產(chǎn)品圖的展示，使用盒子模型的屬性來設(shè)置商品元素的間距和填充等細(xì)節(jié)。產(chǎn)品展示版塊寬度為700px，高度為280px，標(biāo)題高度為50px，圖片寬度為150px，高度為150px，圖片的邊框為1px，計算圖片與圖片之間的間距，使四張圖平均分布。任務(wù)分析一張圖片的寬度占位是152px（即寬度150px+左邊框1px+右邊框1px）任務(wù)分析700-608=92px4個列表項的寬度占位是4*152=608px列表間距為

5、 92518px任務(wù)分析12345文檔流簡介與元素的轉(zhuǎn)換文檔流簡介要理解什么是文檔流，那就要知道流的概念。我們可以把像河流那樣長長的東西作為流。如果將屏幕想象成從上向下流動的河道，則屏幕的上面為流的源頭，屏幕的底部為流的末尾，就抽象出了文檔流。文檔流簡介文檔流，也叫普通流、正常流或標(biāo)準(zhǔn)文檔流。指的是在不使用與排列定位相關(guān)的特殊css規(guī)則時，各種元素的排列規(guī)則。文檔流中行內(nèi)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。塊元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布。元素的轉(zhuǎn)換CSS的display屬性實現(xiàn)元素的轉(zhuǎn)換display常用屬性值值說明none不顯示該元素，也不會保留該元素原先

6、占有的文檔流位置block轉(zhuǎn)換為塊級元素inline轉(zhuǎn)換為行內(nèi)元素inline-block轉(zhuǎn)換為行內(nèi)塊級元素脫離文檔流CSS中可以通過浮動、絕對定位、固定定位等方法實現(xiàn)元素脫離文檔流。為了實現(xiàn)多樣化的網(wǎng)頁布局，自由排版網(wǎng)頁元素，需要將一些網(wǎng)頁元素脫離文檔流。浮動浮動（float）屬性值float屬性值說明left元素向左浮動right元素向右浮動none元素不浮動，顯示在文檔流中inherit繼承父元素的 float 屬性值CSS中通過float屬性實現(xiàn)元素的浮動。浮動的幾種情況當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣。框1右浮動浮動的幾種情況框1向左

7、浮動框3框1當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。浮動的幾種情況所有三個框都向左浮動把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。框2框1框3浮動的幾種情況所有三個框都向左浮動，但含框太窄框2框3框1如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊會向下移動，直到有足夠的空間。浮動的幾種情況所有三個框都向左浮動，但高度不同如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”。框2

8、框3框1浮動元素的特點1243浮動的框可以向左或向右移動，直到它碰到包含框或另一個浮動框的邊框為止。當(dāng)元素設(shè)置了浮動以后，會脫離文檔流，會對緊鄰后面的元素產(chǎn)生影響。當(dāng)元素沒有設(shè)置寬度，而設(shè)置了浮動屬性，寬度隨內(nèi)容的變化而變化。行內(nèi)元素浮動后即具備塊元素的特點。清除浮動清除浮動浮動會對布局產(chǎn)生影響清除浮動值說明left左側(cè)不允許浮動元素right右側(cè)不允許浮動元素both左右兩側(cè)均不允許浮動元素none允許浮動元素出現(xiàn)在兩側(cè)，默認(rèn)值inherit繼承父元素的clear屬性值清除浮動clear屬性值清除浮動一般使用clear屬性來說明元素的哪一側(cè)不允許出現(xiàn)其他浮動元素清除浮動當(dāng)元素浮動導(dǎo)致緊鄰它的

9、后面的元素受到影響時，可以在這個緊鄰的后面元素中設(shè)置清除浮動。解決方法：box2的樣式中設(shè)置clear:leftbox2box3box1設(shè)置box1向左浮動1清除浮動解決方法一：設(shè)置父元素height屬性足夠高 box2box3box1設(shè)置3個box都向左浮動當(dāng)元素浮動導(dǎo)致它的父元素塌陷，而影響網(wǎng)頁結(jié)構(gòu)時，我們可以在父元素中設(shè)置清除浮動。2清除浮動基本語法格式父元素選器:after display: block; content: ; clear: both; 實際開發(fā)中父元素的高度由其內(nèi)部元素決定，有時無法判斷高度，因此推薦使用after偽元素法清除浮動。解決方法二：使用after偽元素法清

10、除浮動清除浮動浮動可以帶來靈活多變的布局，但也會對其周圍元素的位置帶來影響，實際應(yīng)用時，要根據(jù)具體情況，結(jié)合清除浮動來消除影響。每一個細(xì)小的知識點都蘊含著豐富的原理，我們不光要看到簡單表象，更要思考復(fù)雜的應(yīng)用場景，通過實踐，總結(jié)出解決問題的方法。思政小貼士實踐任務(wù) 制作公司網(wǎng)站首頁任務(wù)描述公司網(wǎng)站首頁包含頭部logo、導(dǎo)航欄、圖片橫幅、網(wǎng)頁主體部分和網(wǎng)頁底部，其中網(wǎng)頁主體部分又包含產(chǎn)品展示、新聞中心和公司簡介等信息，網(wǎng)頁效果如圖所示。本任務(wù)要求結(jié)合盒子模型，使用文檔流、浮動等知識點來實現(xiàn)首頁的多行多列布局。相對定位定位布局浮動布局可以實現(xiàn)塊元素的橫向排列，一般用于大版塊的布局，而網(wǎng)頁中有時需要

11、精確定位，這時就需要使用定位布局。定位布局值說明偏移影響static靜態(tài)定位（默認(rèn)值），根據(jù)頁面的正常文檔流進行定位靜態(tài)定位的元素不受top、bottom、left和right屬性的影響relative相對定位，相對于其正常位置進行定位，原本所占的空間仍保留受top、right、bottom和left屬性影響進行偏移absolute絕對定位，相對于最近的定位父元素進行定位，原本所占的空間消失，類似浮動fixed固定定位，相對于瀏覽器窗口定位，原本空間消失，類似浮動，滾動頁面位置不變CSS中使用position屬性指定元素的定位類型position屬性的常用值相對定位#box_relative

12、position: relative; left: 30px; top: 20px; 相對定位是將元素相對于其標(biāo)準(zhǔn)文檔流中的位置進行的定位。相對定位特點相對于原有自身位置進行偏移仍處于標(biāo)準(zhǔn)文檔流中隨即擁有偏移屬性和z-index屬性相對定位z-index屬性相對定位相對定位的元素是以自身初始的位置為參照基準(zhǔn)的，無論是否設(shè)置元素偏移，元素仍然占據(jù)原來的空間。絕對定位絕對定位20px30px絕對定位是將元素相對于最近的已定位的父元素進行的定位。#box position: absolute; left: 30px; top: 20px; 絕對定位元素絕對定位后完全脫離標(biāo)準(zhǔn)文檔流。行內(nèi)元素絕對定位后

13、會變成塊元素。絕對定的元素是相對于已定位的父元素進行的定位。如果沒有已定位的父元素，則相對于瀏覽器進行定位。絕對定的元素?fù)碛衅茖傩院蛕-index屬性。絕對定位元素的特點：相對定位與絕對定位的應(yīng)用相對定位與絕對定位對比position偏移參照物脫離文檔流應(yīng)用場合相對定位relative自己否絕對定位absolute已定位的父元素(如果沒有已定位的父元素則依據(jù)瀏覽器窗口)是用來作為絕對定位元素的容器塊即父元素，并且不設(shè)置偏移量作為子元素，通過設(shè)置偏移量，依據(jù)父元素實現(xiàn)精確定位“子絕父相”案例相對定位與絕對定位的應(yīng)用勇攀高峰 砥礪前行更多產(chǎn)品更多文章 hot！“子絕父相”固定定位固定定位固定定位

14、是相對于瀏覽器窗口的位置進行的定位固定定位#box_fixed position: fixed; top: 20px; left: 30px; 固定定位固定定位元素的特點01040203固定定位的元素會脫離文檔流。固定定位的元素是以瀏覽器為參考，做位置的移動。當(dāng)元素沒有設(shè)置寬度，而設(shè)置了固定定位，寬度隨內(nèi)容的變化而變化。固定定位的行內(nèi)元素會變成塊元素。05固定定位的元素?fù)碛衅茖傩院蛕-index屬性。固定定位定位對比總結(jié)position偏移參照物是否脫離文檔流相對定位relative自己否絕對定位absolute已定位的父元素(如果沒有已定位的父元素則依據(jù)瀏覽器窗口)是固定定位fixed瀏覽器是固定定位網(wǎng)頁中的元素需要合理的定