目标
能夠認識 盒子模型 的組成部分
能夠掌握盒子模型的 邊框、内邊距、外邊距 的作用及簡寫形式
能夠計算盒子的 實際大小
能夠了解 外邊距折疊現象，并知道如何解決 盒子塌陷問題
一、PxCook的基本使用
1. 通過軟體打開設計圖
① 打開軟體 ② 拖拽入設計圖 ③ 建立項目
2. 常用快捷鍵
1. 放大設計圖：ctrl + +
2. 縮小設計圖：ctrl + -
3. 移動設計圖：空格按住不放，滑鼠拖動
3. 常用工具
1. 量尺寸
2. 吸顔色
4. 從psd檔案中直接擷取資料
1. 切換到開發界面，直接點選擷取資料
二、盒子模型
目标：能夠認識 盒子模型的組成 ，能夠掌握盒子模型 邊框、内邊距、外邊距 的設定方法
1. 盒子模型的介紹
1. 盒子的概念
1. 頁面中的每一個标簽，都可看做是一個 “盒子”，通過盒子的視角更友善的進行布局
2. 浏覽器在渲染（顯示）網頁時，會将網頁中的元素看做是一個個的矩形區域，我們也形象的稱之為 盒子
2. 盒子模型
➢ CSS 中規定每個盒子分别由： 内容區域（content）、内邊距區域（padding）、邊框區域（border）、外邊距區域（ margin）構成，這就是 盒子模型
3. 記憶：可以聯想現實中的包裝盒
2. 内容區域的寬度和高度
作用：利用 width 和 height 屬性預設設定是盒子 内容區域 的大小
屬性： width / height
常見取值：數字+px
3. 邊框（ border ）
3.1 邊框（border）- 單個屬性
作用：給設定邊框粗細、邊框樣式、邊框顔色效果
單個屬性：
3.2 邊框（border）- 連寫形式
屬性名：border 屬性值：單個取值的連寫，取值之間以空格隔開
• 如：border : 10px solid red;
快捷鍵：bd + tab
3.3 邊框（border）- 單方向設定
場景：隻給盒子的某個方向單獨設定邊框
屬性名： border - 方位名詞
屬性值：連寫的取值
3.4 盒子實際大小初級計算公式
需求：盒子尺寸 400*400，背景綠色，邊框10px 實線 黑色，如何完成？
• 注意點： ① 設定width和height是内容的寬高！② 設定border會撐大盒子！
盒子實際大小初級計算公式：
• 盒子寬度 = 左邊框 + 内容寬度 + 右邊框
• 盒子高度 = 上邊框 + 内容高度 + 下邊框
解決：當盒子被border撐大後，如何滿足需求？
• 解決： 計算多餘大小，手動在内容中減去（手動内減）
4. 内邊距（ padding ）
4.1 内邊距（padding）- 連寫
作用：設定 邊框 與 内容區域 之間的距離
屬性名：padding
常見取值：
記憶規則： 從上開始指派，然後順時針指派，如果設定指派的，看對面的
4.2 内邊距（padding）- 單方向設定
場景：隻給盒子的某個方向單獨設定内邊距
屬性名： padding - 方位名詞
屬性值：數字 + px
4.3 盒子實際大小終極計算公式
需求：盒子尺寸300*300，背景粉色，邊框10px實線黑色，上下左右20px的内邊距，如何完成？
• 注意點：① 設定width和height是内容的寬高！② 設定border會撐大盒子 ③ 設定padding會撐大盒子
盒子實際大小終極計算公式：
• 盒子寬度 = 左邊框 + 左padding + 内容寬度 + 右padding + 右邊框
• 盒子高度 = 上邊框 + 上padding + 内容寬度 + 下padding + 下邊框
解決：當盒子被border和padding撐大後，如何滿足需求？
• 自己計算多餘大小，手動在内容中減去（手動内減）
4.4 拓展：不會撐大盒子的特殊情況
不會撐大盒子的特殊情況（塊級元素）
1. 如果子盒子沒有設定寬度，此時寬度預設是父盒子的寬度
2. 此時給子盒子設定左右的padding或者左右的border，此時不會撐大子盒子
4.5 CSS3盒模型（自動内減）
需求：盒子尺寸300*300，背景粉色，邊框10px實線黑色，上下左右20px的内邊距，如何完成？
• 給盒子設定border或padding時，盒子會被撐大，如果不想盒子被撐大？
解決方法 ① ：手動内減
• 操作：自己計算多餘大小，手動在内容中減去
• 缺點：項目中計算量太大，很麻煩
解決方法 ② ：自動内減
• 操作：給盒子設定屬性 box-sizing : border-box ; 即可
• 優點：浏覽器會自動計算多餘大小，自動在内容中減去
5. 外邊距（margin）
5.1 外邊距（margin）- 連寫
作用：設定邊框以外， 盒子與盒子之間的距離
屬性名：margin
常見取值：
記憶規則：從上開始指派，然後順時針指派，如果設定指派的，看對面的
5.2 外邊距（margin） - 單方向設定
場景：隻給盒子的某個方向單獨設定外邊距
屬性名： margin - 方位名詞
屬性值：數字 + px
5.3 清除預設内外邊距
場景：浏覽器會預設給部分标簽設定預設的margin和padding，但一般在項目開始前需要先清除這些标簽預設的 margin和padding，後續自己設定
• 比如：body标簽預設有margin：8px
• 比如：p标簽預設有上下的margin
• 比如：ul标簽預設由上下的margin和padding-left
• ……
解決方法：
5.4 外邊距正常情況
場景： 水準布局 的盒子，左右的margin正常，互不影響
結果：最終兩者距離為 左右margin的和
5.5 外邊距折疊現象 – ① 合并現象
場景： 垂直布局 的 塊級元素，上下的margin會合并
結果：最終兩者距離為 margin的最大值
解決方法：避免就好
• 隻給其中一個盒子設定margin即可
5.6 外邊距折疊現象 – ② 塌陷現象
場景： 互相嵌套 的 塊級元素，子元素的 margin-top 會作用在父元素上
結果：導緻父元素一起往下移動
解決方法：
1. 給 父元素設定 border-top 或者 padding-top（分隔父子元素的margin-top）
2. 給 父元素設定 overflow：hidden
3. 轉換成 行内塊元素
4. 設定 浮動
5.7 行内元素的margin和padding無效情況
場景：給行内元素設定margin和padding時
結果：
1. 水準方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中無效！