來到重新學(xué)習(xí)基礎(chǔ)的第二天，我們主要加深了盒子模型的理解，了解到標(biāo)準(zhǔn)盒模型與怪異盒模型的區(qū)別，和css的三種引入方式的優(yōu)缺點，還有css幾種基本選擇器的選擇使用場景。
1.淺談盒子模型
盒子模型作為前端面試題之一的存在，今天刷新了我對它的理解，并不僅僅只是通過將border，content，margin，padding用盒子的方式體現(xiàn)出來
盒子模型分為兩種標(biāo)準(zhǔn)盒模型 和怪異盒模型（IE盒模型），標(biāo)準(zhǔn)盒模型中可以通過box-sizing: border-box將其變成怪異盒模型
1.1.標(biāo)準(zhǔn)盒模型
它的內(nèi)容： width*height；
它的盒子大?。海╳idth+padding+border）*（height+padding+border）
它的區(qū)域尺寸：（width+padding+border+margin）*（height+padding+border+margin）
1.2.怪異盒模型
它的內(nèi)容： （width-padding-border）*（height-padding-border）
它的盒子大?。?width*height
它的區(qū)域大小：（width+margin）* （height+margin）
2.css的三種引入方式
2.1行間樣式表
優(yōu)點：不會產(chǎn)生額外的請求
缺點： 容易產(chǎn)生重復(fù)的代碼，造成文檔體積變大，不利于維護，有違樣式與結(jié)構(gòu)分離的規(guī)范
2.2 內(nèi)部樣式表
優(yōu)點：不會產(chǎn)生額外的請求
初步實現(xiàn)結(jié)構(gòu)與樣式的分離
缺點：代碼復(fù)用不方便
適合單頁面網(wǎng)站應(yīng)用
2.3 外部樣式表
優(yōu)點：利于后期維護，可以重復(fù)使用，實現(xiàn)了結(jié)構(gòu)與樣式的分離
缺點：會產(chǎn)生額外的請求（后期我們會借助工具抹平這個缺點）
3.幾種基礎(chǔ)CSS選擇器的使用
3.1 通配選擇器
* {
}
使用場景：作用于所有標(biāo)簽，無論你有沒有寫，有沒有在文檔中出現(xiàn)
3.2標(biāo)簽選擇器
div {
}
使用場景：作用于一類標(biāo)簽，方式是通過標(biāo)簽名稱，使用場景：重置某類標(biāo)簽的默認(rèn)樣式。
拓展：當(dāng)img標(biāo)簽被a 標(biāo)簽包裹時候，會產(chǎn)生border和outline；
3.3 群組選擇器?
使用場景：常用于優(yōu)化代碼，減少文檔體積
3.4后代選擇器 ? ? 選擇器1 選擇器2 選擇器3 選擇器4 {
}
使用場景：樣式作用于最后一個選擇器，前面的選擇器只是過濾條件，方便定位
3.5 類選擇器
使用場景：可以應(yīng)付各種場景，是我們最常使用的一個選擇器。class名可以多個，多個class名用空格隔開，主要用于多個樣式相同的元素設(shè)置上
<div class="">我是div1</div>
4.inline-block 適用于結(jié)構(gòu)相同的布局，可以設(shè)置寬高支持盒模型，并且不獨占一行。
inline標(biāo)簽 不可以設(shè)置寬高，寬高由內(nèi)容支撐開，inline標(biāo)簽對margin左右，padding左右支持較好，上下間距慎用,inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。
5.相對路徑于絕對路徑
相對路徑 相對當(dāng)前文件，確定引入圖片的位置?
使用場景：1.在html中引入css文件，js文件，圖片等 2.在css中引入圖片；
絕對路徑
6.關(guān)于margin與padding
盒子與盒子之前margin，盒子內(nèi)部用padding，盒子尺寸盡量用auto；
7.BFC應(yīng)用1
防止margin重疊（方法：給父級加上border，觸發(fā)BFC）
浮動相關(guān)問題 （使得父元素包含子元素，常見的方式是為父元素設(shè)置overflow：hidden或者浮動父元素。根本原因在于創(chuàng)建BFC的元素，子浮動元素也會參與其高度計算，即不會產(chǎn)生高度塌陷問題。）
