盒模型基础知识
1. 頁面的制作過程
設計師制作設計圖
前端工程師制作頁面
① 劃分區域
② 填充內容
如何劃分區域:
l 用合適的元素來表示不同的區域
l 設置區域的位置、尺寸、背景等樣式 CSS
劃分區域中的CSS知識：
每個元素都會在頁面中生成一個矩形區域
CSS稱該矩形區域為盒子(box)
盒子的相關知識：
盒模型 單個盒子的組成
視覺格式化模型 多個盒子的排列（盒子之間的相互作用和影響）
布局 實際應用
2. 盒模型概述
盒子的分類
不同的元素產生的盒子類型可能不同
一個元素，產生什么樣的盒子，取決于它CSS的display屬性
盒子的組成：
Margin 外邊距：與其他盒子之間的距離
border 邊框
padding 內邊距：邊框與內容之間的距離
content 內容：內容的寬度和高度
1.盒子內容
補充知識：CSS的尺寸單位
在CSS中，有很多屬性的取值，需要表示為一個尺寸
一個尺寸，由數值和單位組成
CSS中常見的尺寸單位：
px 像素，絕對尺寸 計算機屏幕由很多的小點組成，每一個點，就是一個像素。所以其他尺寸單位，在經過瀏覽器計算后，都會變為px
em 相對尺寸 相對于當前元素的字體大小(px)
% 百分比在不同的CSS屬性中，有不同的含義
content 內容：用于存放文本或其他元素的區域，類似于一個箱子中存放東西的空間
相關CSS屬性：
width 寬度 默認值：auto 撐滿整個可用區域 取值：px，em，%
height 高度 默認值：auto適應內容的高度 取值：px，em，%
overflow 內容溢出時的處理方式 默認值：visible 溢出部分仍然顯示
取值：
hidden 溢出部分隱藏
scroll在水平和垂直方向上出現滾動條，若溢出，則滾動條可用，否則不可用
auto當內容在水平或垂直方向上溢出時，才在該方向上出現滾動條，否則不出現
min-width最小寬度 保證width屬性的值不小于該屬性值 默認值：0px 取值：em，%
max-width最大寬度 保證width屬性的值不大于該屬性值 默認值：none 表示未設置最大寬度，可視為width屬性可以無限大 取值：px，em，%
min-heigh 最小高度 保證height屬性的值不小于該屬性值 默認值：0px 取值：em，%
max-height 最大高度 保證height屬性的值不大于該屬性值 默認值：none 表示未設置最大高度，可視為height屬性可以無限大 取值：px，em，%
2.內邊距：
padding 內邊距、填充區：表示邊框到內容之間的距離，分為上（top）、右（right）、下（bottom）、左（left）四個方向。類似于箱子和內部空間之間的填充物
相關CSS屬性：
padding-top 上內邊距 默認值：0px 取值：em, %
padding-right右內邊距 默認值：0px 取值：em，%
padding-bottom 下內邊距 默認值：0px 取值：em，%
padding-left 左內邊距 默認值：0px 取值：em，%
padding 速寫屬性、簡寫屬性
書寫格式1. padding:上內邊距 右內邊距 下內邊距 左內邊距
2.padding:上內邊距 左右內邊距 下內邊距
3. padding:上下內邊距 左右內邊距
4. padding:上下左右內邊距
3.邊框：
border 邊框分割內部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四個部分組成，類似于箱子壁
相關CSS屬性：
上邊框：
邊框樣式：border-top-style上邊框的樣式 默認值：none 無邊框樣式 取值：solid （實線）dashed （虛線）dotted（點陣）double（雙實線）
邊框厚度：border-top-width 上邊框的厚度 默認值：medium 預設值，表示中等邊框 取值：px，em
邊框顏色：border-top-color上邊框的顏色 默認值：currentcolor表示當前元素的字體顏色 取值：rgb（用紅綠藍三種基本顏色調配而成，每種顏色的取值是十進制的數字：0-255 書寫格式：rgb(紅,綠,藍)）HEX（用紅綠藍三種基本顏色調配而成，每種顏色的取值是十六進制的數字00-ff 書寫格式：#紅綠藍，#號后必須是6個或3個數值）
border-;top 書寫格式border-top:厚度 樣式 顏色
右邊框: border-right-XXX
下邊框: border-bottom-XXX
左邊框：border-left-XXX
border-width：速寫屬性：同時設置所有邊框的厚度
border-style：速寫屬性：同時設置所有邊框的樣式
border-color：速寫屬性：同時設置所有邊框的顏色
速寫屬性：同時設置所有邊框的厚度、樣式、顏色
書寫格式 border:厚度 樣式 顏色
4.外邊框
margin 外邊距：表示邊框和相鄰盒子的距離，分為上（top）、右（right）、下（bottom）、左（left）四個方向，類似于箱子與箱子之間的距離。
相關CSS屬性：
margin-top上外邊距 默認值：0px 取值：em, %
margin-right 右外邊距 默認值：0px 取值：em, %
margin-bottom下外邊距 默認值：0px 取值：em, %
margin-left 左外邊距 默認值：0px 取值：em，%
margin速寫屬性 書寫格式：1. margin:上外邊距 右外邊距 下外邊距 左外邊距2. margin:上外邊距 左右外邊距 下外邊距3. margin:上下外邊距 左右外邊距4. margin:上下左右外邊距
瀏覽器默認樣式中的margin -webkit-XXX -webkit-是瀏覽器廠商前綴
5. 補充知識
子盒子：
邊框盒（border-box）：由border、padding、content組成
瀏覽器調試時，頁面中顯示的元素尺寸是指邊框盒的尺寸【演示】
元素的背景，默認覆蓋邊框盒【演示】，可通過background-clip屬性修改
background-clip屬性
含義：背景覆蓋范圍
不可繼承
默認值：border-box
取值
border-box：背景覆蓋邊框盒
padding-box：背景覆蓋填充盒
content-box：背景覆蓋內容盒
填充盒（padding-box）：由padding、content組成
嚴格意義上，overflow指代的溢出，是指溢出填充盒【演示】
內容盒（content-box）：由content組成
默認情況下，width和height屬性，是指內容盒的寬度和高度
width和height的設置范圍，可通過box-sizing屬性修改
box-sizing屬性
含義：盒子寬高的設置范圍
不可繼承
默認值：content-box
取值
content-box：表示內容盒的寬高
border-box：表示邊框盒的寬高【演示】
盒子尺寸的計算：
box-sizing:content-box的情況下
box-sizing:border-box的情況下
outline屬性
外邊框，用法和border完全一致
總結
- 上一篇： 企业邮箱如何绑定微信？微信怎么添加邮箱？
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？