1.什麼是盒子模型
所謂盒子模型，即是將網頁佈局中的元素（能設定寬高的元素）進行擬物化的比喻。
一個盒子是由四個部分組成
①　“內容–content”（盒子內的物件）、
②　“內間距–padding”（物件和盒子的距離）、
③　“邊框–border”（盒子壁）、
④　“外間距–margin”（盒子和其它物體的距離）
2.IE盒子模型與w3c的盒子模型
(1)由於一些“客觀”的原因，IE瀏覽器和標準的盒子模型有一定的差異。
標準的盒子模型
最終盒子的“width”和“height”== content、padding和border；
IE瀏覽器盒子模型
最終盒子的width”和“height == content
(2)盒子模型的選擇與轉換
一方面為為了相容IE瀏覽器，另一方面是IE的盒子模型在實際的佈局中的確更容易控制。所以我們在實際的開發工作中，都是將標準的盒子模型轉換為IE的盒子模型。轉換方式如下：
CSS的樣式屬性
box-sizing：border-box --》IE盒子模型
box-sizing：content-box --》W3C盒子模型
3.盒子寬度，盒子高度，內間距，邊框，外邊距
基本含義
width: 盒子寬度
height： 盒子高度
padding：內邊距：盒子內容與盒子邊框的距離
border： 盒子邊框
margin: 外邊距：盒子邊框與其他標籤的邊框的距離
padding/margin設定
四個方向單獨進行控制
div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
組合值控制
div {
margin: 1rem;
padding: 1rem;
}
當為組合值時的含義：
一個值: 上右下左同時設定
兩個值：上下，左右
三個值：上，左右，下
四個值：上右下左分別設定

Border設定
邊框的三大屬性
①　border-width 設定邊框的寬度。
②　border-style 設定邊框的型別，主要有以下可以設定的值
③　border-color 設定邊框的顏色，

單獨設定各屬性（所有方向）
div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}
只設置某個方向上的border，單獨控制
div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}
邊框可選型別如下：
①　none，無邊框
②　solid，實現邊框
③　dotted，點線邊框
④　dashed，虛線邊框
⑤　double，雙線邊框
⑥　groove，3D凹槽邊框
⑦　ridge，3D凸槽邊框
⑧　inset，內浮雕邊框
⑨　outset，外浮雕邊框
用組合值設定各屬性（所有方向）
div {
border: 0.05rem red solid;
}

各個屬性的位置可以調整改變
只設置某個方向上的border，組合值控制
div {
border-right:1rem solid red;
}

1.圓角的盒子“border-radius”
給每個角進行設定圓角
div {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
給所有角進行設定圓角
div {
border-radius: 5px;
}
2.元素的輪廓“outline”
概述
①　該屬性用於設定一個元素的輪廓線.(input點下會有藍色邊線，那就是輪廓)

②　和“border”不一樣，“outline”無論在什麼“盒子模型”下，都不會佔據頁面的空間

③　並且它不能分別去設定各個方向的值，即不能對“top”、“right”、“bottom”和“left”方向的“outline”進行分別設定，只能進行統一給所有方向設定。（可以對某個分支屬性進行設定）

④　在使用“webkit核心或“blink核心的瀏覽器中，該屬性會在表單元素在獲得焦點後自動出現，本意是讓使用者獲得更好的互動體驗。

但該設定很多時候反而會影響我們對“Web”頁面的風格設定，這個時候我們都是將它的值設定為“none”。
Webkit :
老版本Chrome瀏覽器、Safari瀏覽器以及iOS和Android系統自帶瀏覽器
Blink :
以新版的Chrome瀏覽器和Opera瀏覽器為代表
⑤　另外，“outline”屬性並不受圓角屬性“border-radius”的影響。和“border”屬性大體一致
outline的分支屬性
outline-width 設定輪廓線的寬度
outline-style 設定輪廓線的樣式
outline-color 設定輪廓線的顏色
outline-offset設定輪廓線相對元素邊框的距離
div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 組合值寫法 /
outline-offset: 20px; / 這個值只能單獨寫 */
}

3.可調整元素大小的“resize”
(1)預設情況textarea能夠進行元素標籤大小的調整
如下：

(2)resize的使用
resize這個屬性就是用來專門定義這種大小調整的行為的，使用方式如下：
1)resize應該配合overflow這個css屬性進行使用,
然後overflow值一般為下者之一即可：
hidden/auto/scroll
2)resize應該使用到塊級元素與行內塊元素上。【通過display屬性修改的也算】
3)resize主要有三個值
①　允許垂直改變大小：vertical
②　允許水平改變大小：horizontal
③　允許垂直水平同時改變大小：both
4)resize屬性在大部分ie系列裡面的瀏覽器中都是無效的。
5)預設能夠改變大小，就是預設設定了值為both,
如果我們想讓他只能水平改變大小或者垂直改變大小，或者不能改變大小，我們直接使用設定相應的resize值就可以了，並且無需顯示的去設定“overflow”屬性。
4.元素的陰影“box-shadow”
描述
該屬效能夠讓元素獲得一個“陰影”效果，根據顏色的不同，有時候也可以叫做“發光”效果。“box-shadow”屬性沒有分支屬性，它的值是以“組合值”的形式設定的，它最多允許6個值的組合，按值的順序分別代表：
基本值
h-skewing（必要）
陰影在水平方向的偏移，負數是向左偏移，正數是向右偏移，單位為“px”。
v-skewing（必要）
陰影在垂直方向的偏移，負數是向上偏移，正數是向下偏移，單位為“px”。
blur（可選）
陰影的“模糊距離”或“模糊程度”，單位為“px”。
color（可選）
陰影的顏色，支援Web技術中的常用顏色模式：“顏色英文單詞”、“HEX”、“RGBa”、“HSLa”。
和文字陰影的不同（多了兩個值）
inset（可選）
將預設向外的陰影方向改為向內，然後inset一般是放在陰影顏色的後面。
spread（可選）
陰影的擴充套件範圍,值為數值，其單位可以使用常用單位。rem,em,px.
它應該放在陰影顏色的前面
4.擴充套件
①　給某個元素設定margin-top時，如果他上方元素含有“margin-bottom”，則這兩個值會重疊，並且取較大值作為間距值。
【如果是左右的話，則是正常的相加】
注意
在某些瀏覽器裡面可能
1.在塊級元素的首個子標籤元素中設定margin-top時，會作用到這個父元素上。
2.在塊級元素的最後一個子標籤元素中設定margin-bottom時，會作用到這個父元素上。若父元素已經設定了“padding-bottom”，則與父元素的該值相加取和作為與頁面底部的間距。