第3章

盒子模型01學習目標02課程思政目標03知識點04本章練習PPT模板/moban/

學習目標理解盒子模型的特點，知曉盒子模型的種類；能記住常見的容器的英文命名；深刻理解標準盒模型的構成，掌握寬高、內外邊距、邊框屬性的代碼格式；掌握通過數值計算，能正確設置稍微復雜點的嵌套結構的容器各項屬性；了解容器溢出、容器坍塌等現象的原因；能根據頁面效果合理地定義、繪制出頁面的容器結構圖；養(yǎng)成給目標容器設置邊框或背景色輔以觀察的良好習慣。第3章

盒子模型1通過本章學習，要求達到以下既定目標：課程思政目標2對盒子各屬性的精確計算，提升一絲不茍的學習態(tài)度、精益求精的工作態(tài)度。通過布局案例，了解“感動中國”的眾多人物，樹立正確的時代價值觀，遠離畸形的追星文化。世界最大單口徑射電望遠鏡——“天眼”，了解中國天眼的技術含量。北京奧運會吉祥物“福娃”，回憶起開幕式各種天馬行空、精彩紛呈的節(jié)目，為中國吶喊，中國人智慧的驕傲。了解本章成語的出處，理解成語含義與知識點理解的結合：“層見疊出”，一個看似復雜的事情，我們也可以拆解為一個個簡單的小項目，理解透徹后再組合起來，強調培養(yǎng)學生由繁入簡，由簡返繁的能力。第3章

盒子模型3知識點3.1盒子模型特點3.2標準盒模型width屬性、height屬性安裝調試用的瀏覽器margin外邊距屬性padding內邊距屬性border邊框屬性background背景屬性第3章

盒子模型3.3盒子模型的相關屬性3.1盒子模型特點3知識點頁面中的每一個標簽，都可看做是一個“盒子”，通過盒子的視角更方便的進行布局，瀏覽器在渲染（顯示）網頁時，會將網頁中的元素看做是一個個的矩形區(qū)域，我們也形象的稱之為盒子。CSS中規(guī)定每個盒子分別由：內容區(qū)域（content）、內邊距區(qū)域（padding）、邊框區(qū)域（border）、外邊距區(qū)域（margin）構成，這就是盒子模型。盒子模型分為兩種：第一種是W3C標準的盒子模型，第二種IE瀏覽器下的IE盒子模型。在ie8版本已上的瀏覽器的瀏覽器默認是標準盒模型，所以目前我們不需要為十幾年前的電腦考慮它的IE瀏覽器版本，畢竟IT行業(yè)中的摩爾定律反映出硬件更新換代速度極快。而IE盒子模型的計算方式就不在本書中論述，怕各位學起來混淆。3.1盒子模型特點3知識點給盒子（容器）定義id或者class選擇器，而這些選擇器的名稱雖然是自定義的，但不能使用毫無意義的abc，或者a1、a2、a3等名字。以下是常用的容器（盒子）名字，如表3-1所示。3.1盒子模型特點容器內容id或class名稱容器內容id或class名稱整個頁面或很大的容器container主內容區(qū)Content、main主導航mainnav子導航subnav頁頭header頁腳footer頂導航topnav邊導航（側邊欄）sidebar公司標志logo海報區(qū)banner菜單menu子菜單submenu標題title圖標icon面包屑導航（當前所處位置提示）breadcrumb搜索search登陸login

3知識點標準盒模型如圖3-1所示，width指的是內容區(qū)域content的寬度；height指的是內容區(qū)域content的高度。3.2標準盒模型W3C標準盒模型下盒子的大小=width（content）+border+padding+margin3.1標準盒模型3知識點3.2標準盒模型知識點：標準盒模型記憶關鍵詞：層見疊出關鍵詞解析：層見疊出理解為容器計算寬高數值時要考慮接連不斷的父子嵌套關系。當網頁總體寬高比喻成一個集裝箱，里面有包含大量木箱子，木箱子又裝著若干個中箱子…………從單個箱子容器來說，內容區(qū)以外有三層（內邊距、邊框、外邊距）。裝物品的紙盒可以認為是容器的邊框，那內邊距就是紙盒與物品之間的防撞的填充物，外邊距就是防紙盒被擠壓的木箱子。在精確計算網頁中每個元素的寬高時，我們要先固定總體的寬高值，如同集裝箱尺寸在國際標準中是固定的，一層一層往內部計算各種中小箱子的尺寸，而非從內部最小的箱子開始計算。明·沈德福《萬歷野獲編補遺·場題犯諱》：“蓋上是時方修祈年永命故事，臣下爭進諛詞以求媚，故至誠無息一章，層出疊見，初不計及御名上一字也。”層見疊出——意思是指接連不斷出現，比喻事物很多。3知識點width和height：這兩個屬性定義了盒子的內容區(qū)域的寬度和高度。在W3C盒子模型（標準盒模型）中，width和height指的是內容區(qū)域的寬度和高度。padding：內邊距，定義了內容和邊框之間的空間。border：邊框，定義了盒子邊框的樣式、寬度和顏色。margin：外邊距，定義了盒子與其他元素之間的空間。此外，盒子模型還有一些擴展屬性，如背景屬性、顏色透明度、圓角、圖片邊框、陰影和漸變等，這些屬性為網頁布局提供了更多的視覺效果。3.3盒子模型的相關屬性3.3盒子模型的相關屬性3知識點3.3盒子模型的相關屬性3.3.1width屬性、height屬性width讀音——英[w?dθ]height讀音——英[ha?t]width、height屬性用于定義元素的寬度、高度，通常使用像素px、百分比%等形式來指定高度的數值，其他形式不做深入了解，只需要知道這些單位的應用場景、所起作用即可。像素值（px）：像素值是固定的，不論屏幕分辨率如何變化，它的寬度都是不變的。例如：width:300px;百分比（%）：百分比寬度是相對于父元素的寬度的。例如：width:50%;em單位：這是一個相對單位，通常相對于當前元素的字體大小。例如：width:2em;3知識點3.3盒子模型的相關屬性rem單位：這個單位相對于根元素（html）的字體大小。例如：width:2rem;vw/vh單位：這些單位分別代表視口寬度/高度的一百分之一。例如：width:50vw;auto：當設置為auto時，瀏覽器將自動決定元素的寬度。例如：width:auto;fit-content：這個值會根據內容的多少自動調整元素的寬度，但是最大不會超過它的父元素的寬度。例如：width:fit-content;min-content和max-content：這兩個值會根據內容的最小尺寸或最大尺寸自動調整元素的寬度。例如：width:min-content;或width:max-content;3知識點3.3盒子模型的相關屬性【案例1】完成如圖3-2所示的“推薦信息”版塊的HTML代碼。3知識點3.3盒子模型的相關屬性【案例2】子元素寬度大于父容器寬度時的處理手法。思路一：結合overflow設置超過區(qū)域隱藏，處理圖片與容器大小相差無幾的情況。思路二：強行修改寬高，優(yōu)點是能保留圖片所有內容，缺點是可能出現圖片比例偏差過大。思路三：將圖片設置為背景圖，背景圖片X、Y偏移一定比例的方式，優(yōu)點是不影響原圖比例，缺點是舍棄了圖片四周內容。3知識點3.3盒子模型的相關屬性【案例3】文字超過容器寬度時，后續(xù)文字改成省略號，把過長文字用省略號替代，既起到提示有后續(xù)文字的作用，也不會讓文字被切割的支離破碎。3知識點3.3盒子模型的相關屬性【案例4】容器異常塌陷容器塌陷，可以理解為元素位置偏離我們預期，毫無道理的竄到前面元素的位置。產生塌陷的原因主要來自于前面有元素出現浮動屬性，而父容器未設置高度導致。時刻提醒各位，在標準流布局下容器不設置height屬性，可以由子元素撐開高度，但如果子元素使用了浮動或定位方式后，就會出現該父容器高度值被認為是0px的情況，也就產生了高度塌陷問題。3知識點3.3盒子模型的相關屬性3.3.2margin外邊距屬性margin讀音——英[?mɑ?d??n]margin屬性是CSS中用于設置元素周圍空間的關鍵屬性，它允許開發(fā)者控制元素的上、右、下、左四個方向的外邊距，從而影響元素與其周圍元素的間距。簡單理解成：只要不屬于該容器內部的元素都算“外部”元素，margin用途就是拉開與其他元素的距離，可謂有點“拒人于千里之外”的意味。margin屬性允許使用負值，但建議非特殊場合，不要使用負值寫法。3知識點3.3盒子模型的相關屬性相關屬性詳見表-2所示。屬性描述margin簡寫屬性。在一個聲明中設置所有外邊距屬性。margin-top設置元素的上外邊距。margin-right設置元素的右外邊距。margin-bottom設置元素的下外邊距。margin-left設置元素的左外邊距。margin簡寫：分別寫“上右下左”的外邊距數值（時針0到12點順時針旋轉來記憶），如圖3-35所示。3知識點3.3盒子模型的相關屬性以下是一些示例：margin:10px20px30px40px;/*上邊有10px的邊距，右邊有20px的邊距，下邊有30px的邊距，左邊有40px的邊距。*/margin:10px;/*四個邊都有10px的邊距*/margin:10px20px;/*上/下邊有10px的邊距，左/右邊有20px的邊距*/margin:10px20px30px;/*上邊有10px的邊距，左/右邊有20px的邊距，下邊有30px的邊距*/3知識點3.3盒子模型的相關屬性【案例5】完成如圖3-38所示的淺灰色容器水平居中效果，同時設置各圖片之間的間距，不要求整體圖片集的左右間距對稱。3知識點3.3盒子模型的相關屬性3.3.3padding內邊距屬性padding讀音——英[?p?d??]CSS的padding屬性用于定義元素內部的空間，即元素內容和元素邊框之間的空白區(qū)域。它允許你設置元素的上、下、左、右四個方向的內邊距。padding屬性不允許使用負值，相關屬性詳見表3-3所示。屬性描述padding簡寫屬性。在一個聲明中設置所有內邊距屬性。padding-top設置內容（子元素）與該元素頂部（上邊框）的距離。padding-right設置內容（子元素）與該元素右邊（右邊框）的距離。padding-bottom設置內容（子元素）與該元素底部（下邊框）的距離。padding-left設置內容（子元素）與該元素左邊（左邊框）的距離。3知識點3.3盒子模型的相關屬性【案例6】設置圖片與邊框之間的間距，如圖3-41所示。3知識點3.3盒子模型的相關屬性3.3.4border邊框屬性border讀音——英[?b??d?(r)]border簡寫屬性在一個聲明設置所有的邊框屬性，可以按順序設置如下屬性：border-width、border-style（必需）、border-color。相關屬性詳見表3-4所示。屬性值描述borderborder邊框屬性的簡寫border-width指定邊框的寬度border-style指定邊框的樣式，其中：dotted點線、dashed虛線、solid實線、double定義兩個邊框。border-color指定邊框的顏色，CSS顏色表達的方式有：顏色名稱，如red,blue,green等。十六進制顏色代碼：如#FF0000表示紅色，#0000FF表示藍色。RGB值：如rgb(255,0,0)表示紅色，rgb(0,0,255)表示藍色。RGBA值：類似于RGB，但增加了alpha透明度值，如rgba(255,0,0,0.5)半透明紅色。border-radius設置四個角的圓角半徑（圓角度）。3知識點3.3盒子模型的相關屬性3.3.5background背景屬性background讀音——英[?b?kɡra?nd]background屬性是一個簡寫屬性，用于設置一個或多個背景相關的子屬性。最常用的的語法如下：background:<background-color><background-image><background-repeat><background-position><background-size>;其中：background-color為背景顏色。background-image為背景圖像。background-position為背景圖像的位置。background-repeat 規(guī)定如何重復背景圖像。background-size為背景圖片的尺寸。3知識點3.3盒子模型的相關屬性【案例7】完成精靈圖效果。所謂的精靈圖(sprite)，就是通過將多個小的圖標集合到一張圖片上，然后通過CSS背景定位來顯示需要的圖標。這樣做可以減少HTTP請求的次數，從而加快頁面加載速度。核心的技法就是將容器設置padding-left，這空出的區(qū)域專門用于顯示背景圖。接下來我們使用如圖3-46所示的sprite.png圖像文件，完成三個容器顯示圖標的效果。sprite.png文件版面效果3.3基礎練習4本章練習【練習1】以某公司頁面的產品或新聞列表區(qū)為例，如圖3-50所示，使用Photoshop或畫筆工具繪制它的容器包含關系。3.3基礎練習4本章練習【練習2】以某公司首頁的頁腳區(qū)域為例，如圖3-52所示，使用Photoshop或畫筆工具繪制它的容器包含關系。3.3基礎練習4本章練習【練習3】下圖所示為之前練習的頁面，如圖3-53所示，通過計