盒模型理解及基本選擇器初識

來到重新學習基礎的第二天，我們主要加深了盒子模型的理解，瞭解到標準盒模型與怪異盒模型的區別，和css的三種引入方式的優缺點，還有css幾種基本選擇器的選擇使用場景。

1.淺談盒子模型

盒子模型作為前端面試題之一的存在，今天重新整理了我對它的理解，並不僅僅只是通過將border，content，margin，padding用盒子的方式體現出來

盒子模型分為兩種標準盒模型 和怪異盒模型（IE盒模型），標準盒模型中可以通過box-sizing: border-box將其變成怪異盒模型

1.1.標準盒模型

它的內容： width*height；

它的盒子大小：（width+padding+border）*（height+padding+border）

它的區域尺寸：（width+padding+border+margin）*（height+padding+border+margin）

標準盒模型

1.2.怪異盒模型

它的內容： （width-padding-border）*（height-padding-border）

它的盒子大小： width*height

它的區域大小：（width+margin）* （height+margin）

怪異盒模型

2.css的三種引入方式

2.1行間樣式表

行間樣式表

優點：不會產生額外的請求

缺點： 容易產生重複的程式碼，造成文件體積變大，不利於維護，有違樣式與結構分離的規範

2.2 內部樣式表

優點：不會產生額外的請求

初步實現結構與樣式的分離

缺點：程式碼複用不方便

適合單頁面網站應用

2.3 外部樣式表

優點：利於後期維護，可以重複使用，實現了結構與樣式的分離

缺點：會產生額外的請求（後期我們會藉助工具抹平這個缺點）

3.幾種基礎CSS選擇器的使用

3.1 通配選擇器

* {

}

使用場景：作用於所有標籤，無論你有沒有寫，有沒有在文件中出現

3.2標籤選擇器

div {

}

使用場景：作用於一類標籤，方式是通過標籤名稱，使用場景：重置某類標籤的預設樣式。

擴充：當img標籤被a 標籤包裹時候，會產生border和outline；

3.3 群組選擇器 

使用場景：常用於優化程式碼，減少文件體積

3.4後代選擇器     選擇器1 選擇器2 選擇器3 選擇器4 {

}

使用場景：樣式作用於最後一個選擇器，前面的選擇器只是過濾條件，方便定位

3.5 類選擇器

使用場景：可以應付各種場景，是我們最常使用的一個選擇器。class名可以多個，多個class名用空格隔開，主要用於多個樣式相同的元素設定上

<div class="">我是div1</div>

4.inline-block 適用於結構相同的佈局，可以設定寬高支援盒模型，並且不獨佔一行。

inline標籤 不可以設定寬高，寬高由內容支撐開，inline標籤對margin左右，padding左右支援較好，上下間距慎用,inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

5.相對路徑於絕對路徑

相對路徑 相對當前檔案，確定引入圖片的位置 

使用場景：1.在html中引入css檔案，js檔案，圖片等 2.在css中引入圖片；

絕對路徑

絕對路徑

6.關於margin與padding

盒子與盒子之前margin，盒子內部用padding，盒子尺寸儘量用auto；

7.BFC應用1

防止margin重疊（方法：給父級加上border，觸發BFC）

浮動相關問題 （使得父元素包含子元素，常見的方式是為父元素設定overflow：hidden或者浮動父元素。根本原因在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題。）