盒模型（box model）

---

• CSS將頁面中所有元素都設定為了一個巨型的盒子；
• 將元素設定為舉行合資後，對頁面的佈局就變成將不同盒子擺放在不同位置;
• 盒子可見框大小，由內容區、內邊距、邊框共同決定；計算盒子大小時，需將三個區域加到一起計算；

組成:

內容區（content）

---

元素中所有子元素和文字內容都在內容區中排列，內容區大小由為width、height設定；

邊框（border）

---

1. 邊框屬於盒子邊緣；
2. 邊框裡邊屬於盒子內部，出了邊框都是盒子外部；
3. 邊框大小會影響盒子的整個大小；

樣式：

1. 邊框寬度(border-width) ：

   ---

   值的情況：
   1、四值：上 下 左 右；
   

   2、三值：上 左右 下；
   

   3、兩值：上下 左右；
   

   4、一值：上下左右；
   

   或 border-xxx-width（xxx可取 top 、right、bottom、left，以此來指定某個邊的寬度）；
   

2. 邊框顏色(border-color)：

   ---

   值的情況：
   1、四值：上 下 左 右；
   

   2、三值：上 左右 下；
   

   3、兩值：上下 左右；
   

   4、一值：上下左右；
   

   也可不寫，則預設使用color顏色值；
   

3. 邊框樣式(border-style)：

   ---

   預設值是none，表示沒有邊框；

   solid	實線
   dotted	點狀虛線
   ashed	虛線
   ouble	雙線

   實線
   
   點狀虛線
   
   虛線
   雙線
   

4. 簡寫屬性：

    	border: 邊框樣式 邊框顏色 邊框寬度;
    	（三者無順序）
   

   

    border-xxx: 邊框樣式 邊框顏色 邊框寬度;
    （三者無順序，xxx可取 top 、right、bottom、left）
   

   

內邊距（padding）

---

內容區和邊框之間的距離；

1. 會影響盒子的大小；

2. 背景顏色會延伸到內邊距上
   
   值的情況（如上）：
   1、四值：上 下 左 右；
   2、三值：上 左右 下；
   3、兩值：上下 左右；
   4、一值：上下左右；
   簡寫屬性：

   padding-xxx：xxpx; 
   （xxx可取 top 、right、bottom、left，以此來指定某個邊的內邊距，如上）；
   

外邊距（margin）

---

1、不影響盒子可見框的大小，但會影響盒子的位置；
2、可設定為負值，往相反方向移動；
3、預設情況下，設定margin-right不會產生任何效果；
4、會影響盒子的實際佔用空間；
5、元素在頁面中是自左向右順序排列，（左、上）元素移動自身，（下、右）會移動其他元素；

值的情況（如上）：
1、四值：上 下 左 右；
2、三值：上 左右 下；
3、兩值：上下 左右；
4、一值：上下左右；
簡寫屬性：

	margin-xxx：xxpx; 
	（xxx可取 top 、right、bottom、left，以此來指定某個邊的外邊距，如上）；

盒子的水平方向佈局

元素在其父元素中水平方向的位置主要由以下幾個屬性決定：

• margin-left

• border-left

• padding-left

• width

• padding-right

• border-right

• margin-right
  一個元素在父元素中，水平佈局必須滿足：
  margin-left+border-left+padding-left+width+padding-right+border-right+margin-right == 其父元素內容區的寬度
  如果相加結果是等式不成立，則稱為過度約束，等式會自動調整；
  調整情況：
  七個值中可調整的三個值為：with 、margin-right 、margin-left

  1、如果七個值中沒有auto，則瀏覽器會自動調整margin-right值使等式滿足；
  
  2、如果七個值中某個值為auto，則會自動調整auto的值使等式成立；
  
  3、如果將一個寬度和一個外邊距設定為auto，則寬度調整到最大，設定auto的外邊距為零；
  
  4、如果將三個值都設定為auto，則外邊距為零，寬度最大；
  

  5、如果將兩個外邊距設定為auto，寬度固定，則外邊距相等，（利用這一特點來使元素在父元素中水平居中）；
  

盒子的垂直方向佈局

1、預設情況下父元素的高度被內容撐開；
2、子元素在父元素的內容區排列；
3、如果子元素的大小超過了父元素就會從父元素中溢位；

overflow屬性來設定父元素中溢位的子元素

可選值	作用
visible	預設值，子元素會從父元素中溢位，在父元素外部展示

可選值	作用
hidden	溢位內容會被剪裁不展示

可選值	作用
scroll	生成兩個滾動條，通過滑動滾動條展示所有內容

可選值	作用
auto	根據需要生成滾動條

overflow-x

overflow-y

垂直外邊距的重疊

1、相鄰的垂直方向外邊距會發生重疊現象；
2、兄弟元素：

• 垂直方向外邊距會取兩兩之間較大值（兩者都是正值）；
• 特殊情況：
  如果一正一負，則取兩者的和；
  如果都是負值，則取兩者中絕對值較大的；
• 兄弟元素垂直方向外邊距對開發是有利的，不需要進行處理；

3、父子元素：

• 父子元素之間垂直方向外邊距，子元素會傳遞給父元素（上左邊距）；
• 父子元素之間垂直方向外邊距會影響該頁面的佈局，需要進行處理；

行內元素的盒模型

1、行內元素不支援設定寬度和高度；
2、行內元素可以設定padding，但垂直方向padding不會影響頁面佈局；
3、行內元素可以設定border，但垂直方向border不會影響頁面佈局；
4、行內元素可以設定margin，但垂直方向margin不會影響頁面佈局；

display用來設定元素的顯示型別：

可選值
inline	將元素設定為行內元素

可選值
block	將元素設定為塊元素

可選值
inline-block	將元素設定為行內塊元素（行內塊：課設寬度和高度又不獨佔一行）

可選值
table	將元素設定為表格

可選值
none	元素不在頁面中顯示（隱藏）

visibility用來設定元素的顯示狀態：

可選值
visible	預設值，元素在頁面中正常顯示

可選值
hidden	元素在頁面中隱藏不顯示，但依然佔據頁面位置

瀏覽器的預設樣式

• 預設情況下，瀏覽器都會為元素設定一些預設樣式；
• 預設樣式的存在會影響頁面的佈局；
• 通常情況下，編寫網頁時必須要去除瀏覽器的預設樣式（PC端的頁面）；

reset.css直接去除瀏覽器的預設樣式
reset.css下載地址