一.塊級和行級
1.display：顯示；
? ? display：block | inline | inline-block | none;? ? ? 顯示為塊級元素 | 顯示為行級元素 | 顯示為行塊級元素 | 不顯示?
2.塊級標簽特點：
? （1）獨占一行； （2）可以設置尺寸；
? （3）沒有明確寬度的時候，寬度由父級決定；
? （4）沒有明確高度的時候，高度由內(nèi)容決定；
? （5）支持margin 、padding；
3.行級標簽特點
（1）不會獨占一行，可以與其他行級元素并排；
（2）不支持尺寸設置；
（3）對margin左右、padding左右支持較好，上下間距慎用（謹記）；
4.行塊級標簽特點 （display：inline-block;）
? ? ?支持盒模型，但不會獨占一行。
二.margin與padding
?1.margin
（1）margin ? ?外邊距 （盒子與盒子之間的距離 | 盒子外部的距離）
margin-left: auto | px 左邊距? ? ? ? margin-right: 右邊距
margin-top: 上邊距 ? ? ? ? ? ? ? ? ? ? ?margin-bottom: 下邊距
（2）margin:0 0 0 0;上 ? 右 ? 下 ? 左
margin:0 0 0;上 ? 左右 ? 下
margin:0 0;上下 ? ?左右
margin：0；四個方向
2.padding
（1）padding? 內(nèi)邊距? （盒子與盒子內(nèi)元素之間的距離 ）
（2）padding：x ?x ?x ?x；內(nèi)容同margin一樣；
三.盒模型
1.盒子模型由 外邊距margin、 border邊界、 padding內(nèi)邊距、 內(nèi)容尺寸width/height 四 ? ?種樣式組成的 。
2.盒子模型分為標準盒模型，與怪異盒模型
(1)標準盒模型；
(2)怪異盒模型：box-sizing：content-box ?| ?border-box | ?inhreit
3.盒子與盒子之間用margin ? 盒子內(nèi)部用padding ? 盒子尺寸盡量用auto;
四.css樣式
1.css內(nèi)部樣式
優(yōu)點：
（1）不會產(chǎn)生額外請求；
（2）初步實現(xiàn)結(jié)構(gòu)與樣式的分離；
（3）適合單頁面網(wǎng)站應用；
缺點：代碼復用不方便；
2.css行間樣式（綜下所訴：不建議使用它）
優(yōu)點：不會額外的產(chǎn)生請求；
缺點：
（1）容易產(chǎn)生重復的代碼，造成文檔體積變大；
（2）不符合結(jié)構(gòu)與樣式分離的規(guī)范；
（3）不利于維護；
3.css外部樣式
優(yōu)點：
（1）有利于后期維護；
（2）可以重復使用；
（3）完成實現(xiàn)結(jié)構(gòu)與樣式的分離；
缺點：會產(chǎn)生額外的請求(但是后期我們會借助工具抹平這個缺點)；
五.css選擇器—基礎選擇器
1.通配選擇器：作用于所有標簽，無論標簽有沒有寫、有沒有出現(xiàn)，都起作用；
?* ?{
? ? ?}
2.基礎選擇器-群組選擇器：選擇器1，選擇器2，...{
}? ? ? 使用場景：用于優(yōu)化，減少文檔體積。
3.基礎選擇器-類選擇器：. 類名稱{
}? ? ? 使用場景：可以應付各種場景，是我們最常用的一種選擇器，class可以有相同的多 ? ? ? ? ?個class用空格隔開，主要用于具有相同樣式的設置
class 命名規(guī)范：不要以數(shù)字開頭、盡量取得有意義、多個單詞建議使用 _ 連接、盡量不要超過7個。
4.基礎選擇器-后代選擇器：選擇器1 選擇器2 選擇器3 ...{
}? ? ? ? 樣式只作用于最后一個選擇器，前面的只是過濾條件，幫助我們定位。
拓展：
使用margin設置盒子時，BFC 機制：會將父級的盒子一起帶下來
解決辦法：（1）設置邊線border；（2）overflow：hidden；（3）float：xxx（left）；
