拓展：瀏覽器一次可以向服務(wù)器并發(fā)8個請求菜枷，第九個需要等到下一次
1拉庶、元素的顯示方式
????? div標簽：塊級元素(block)獨占一行
????? span標簽：行級元素(inline)不會獨占一行
（1）颜骤、塊級(block)標簽的特點：
?????????? 1、獨占一行
?????????? 2美旧、可以設(shè)置尺寸
????? ? ?? 3凡简、沒有明確寬度的時候，寬度由父級決定
?????????? 4呀闻、沒有明確高度的時候化借，高度由內(nèi)容決定
（2）、行級inline元素的特點：對margin左右捡多，padding左右支持較好蓖康，上? 下 間距慎用
?????????? 1铐炫、不會獨占一行可以與其他行級元素并排
???? ? ? ? 2、不支持尺寸設(shè)置
?????????? 3钓瞭、大小由內(nèi)容決定
（3）驳遵、inline-block行塊級的特點
?????????? 1、支持盒模型山涡，但不會獨占一行堤结，一行里面可以顯示多個
???? ? ? ? 2、可以設(shè)置寬高
2鸭丛、盒模型
（1）竞穷、盒模型的具體內(nèi)容由外邊距margin border邊界 padding內(nèi)邊距 內(nèi)容尺寸width/height 四種樣式組成的
?????????? 盒子的外邊距：margin
?????????? 盒子的邊框：border
?????????? 盒子的內(nèi)邊距：padding
?????????? 盒子的內(nèi)容：內(nèi)容
(2)、margin外邊距盒子與盒子之間的間距
?????? margin-top
?????? margin-right
?????? margin-bottom
?????? margin-left
?????? 連寫margin:0 0 0 0 ;上右下左
????? margin:0 0;上下 左右
????? margin:0;四個方向
margin誤區(qū)：
????? 1鳞溉、 如果小盒子外面的大盒子沒有邊框瘾带，設(shè)置小盒子margin的時候大盒子會一塊移動
?? ? ? ? ?? 解決方案：1、在大盒子樣式中設(shè)置overflow：hidden或者float：left
????????????????????????????? 2熟菲、給大盒子設(shè)置一個邊框
（3）看政、padding:內(nèi)邊距會影響盒子的大小
????????? padding設(shè)置選項與margin一樣
（4）、盒子模型分為標準盒子模型和怪異盒子模型
???? 怪異盒模型樣式中有box-size:border-box;不改變盒子的尺寸抄罕，而使內(nèi)容的尺寸縮小
???? 標準盒模型 內(nèi)容尺寸(width*height)
??????????????????????? 盒子尺寸(width,height,padding,border)
??? ? ? ? ? ? ? ? ? ? ? 區(qū)域尺寸(width,height,padding,border,margin)
(4)允蚣、margin與padding對塊級元素和行級元素得作用
????? margin、padding對塊級元素正常影響
???? margin左右設(shè)置呆贿、padding左右設(shè)置對行級元素有用嚷兔，上下慎用
（5）、總結(jié)：盒子與盒子之間用margin 做入，盒子內(nèi)部用padding 冒晰，盒子尺寸盡量用auto
3、css基礎(chǔ)選擇器
1竟块、基礎(chǔ)選擇器--通配選擇器：作用于所有的標簽壶运，無論標簽有沒有在文檔中出現(xiàn)
?? * {
?????????? ...........
?? }
2、基礎(chǔ)選擇器--標簽名選擇器：作用于一類標簽,通過標簽名稱浪秘，重置標簽的樣式
div {
????? width: 200px;
????? height: 200px;
????? background-color: pink;
}
3前弯、基礎(chǔ)選擇器--群組選擇器：選擇器1，選擇器2秫逝，...{} 作用于列出的標簽，常用于優(yōu)化代碼询枚，減少文檔的體積
.class,h1,h2 {
??????????????????? margin: 0;
??????????????????? padding: 0;
}
4违帆、基礎(chǔ)選擇器--類選擇器： .類名{}
使用場景：可以應(yīng)用于各種場景，是最常用的選擇器金蜀，class名可以取多個刷后，多個class名之間用空格隔開的畴，主要用于具有相同樣式的元素的設(shè)置
.f10 {
??????? font-size: 10px;
}
.auto {
??????? margin: 0 auto;
}
5、基礎(chǔ)選擇器--后代選擇器：選擇器1 選擇器2 選擇器3 {}
樣式作用于最后一個選擇器尝胆，前面的選擇器知識一個過濾條件丧裁，幫助我們定位到最后一個選擇器
span div {
????????????? /*作用于span里面的div*/
}
4、css代碼樣式（存放位置）
（1）含衔、行間樣式
優(yōu)點：不會額外的產(chǎn)生請求?
缺點：1煎娇、容易產(chǎn)生重復(fù)的代碼，造成文檔體積過大
???????????? 2贪染、不利于維護
???????????? 3缓呛、不符合結(jié)構(gòu)與樣式分離的規(guī)范
?? 綜上所述：不建議使用行間樣式
（2）、內(nèi)部樣式：在html文檔中開辟一個書寫css語句的區(qū)域
?????? 不會產(chǎn)生額外的請求
?????? 初步實現(xiàn)結(jié)構(gòu)與樣式的分離
?????? 代碼復(fù)用不方便
?????? 適合單頁面網(wǎng)站的應(yīng)用
<style>
???????? body {
?????????????? margin: 0;
?????????????? padding: 0;
??????? }
</style>
(3)杭隙、外部樣式
首先在.html文件中利用link標簽引入.css文件
在.css文件中直接寫樣式哟绊，不用style標簽
優(yōu)點：1、利于后期維護
?? ? ? ? ? 2痰憎、可以重復(fù)使用
?????????? 3票髓、完成實現(xiàn)結(jié)構(gòu)與樣式的分離
缺點：會產(chǎn)生額外的請求（但是后期我們還會借助工具抹平這個缺點）
