每天寫博客炕婶，就像每日一記姐赡，相似于日記，又不同于日記柠掂，這玩意是要發(fā)布的雏吭，私密的東西還是悠著點(diǎn)寫，雖然沒什么人看陪踩。閑話少說杖们，談?wù)剬裉鞂W(xué)習(xí)的理解與認(rèn)識吧。今天老師講了很多肩狂，而且對知識挖的深且廣摘完，打破了我以往對前端的認(rèn)識，就像我本來天天褲衩背心的穿著傻谁，突然來了個(gè)人孝治，脫光我的裝束，并且塞給了我一套正裝审磁。

1谈飒，inline 和 block 含義與區(qū)別

display:inline | block | inline-block|none;

block標(biāo)簽的特點(diǎn)：獨(dú)占一行，可以設(shè)置寬高态蒂，寬度不設(shè)置的時(shí)候由父級決定杭措，高度不設(shè)置的時(shí)候由內(nèi)容決定，支持margin和padding钾恢。

inline標(biāo)簽的特點(diǎn)：不獨(dú)占一行手素，不可以設(shè)置寬高鸳址，margin左右，padding左右設(shè)置可以泉懦，上下間距慎用（謹(jǐn)記）稿黍；

inline-block標(biāo)簽的特點(diǎn)：支持盒模型，不獨(dú)占一行崩哩；

2巡球，margin 和 padding

margin（外邊距）：外邊距是指元素的與元素之間的距離，也就是邓嘹，元素的border距離其他元素的border的距離辕漂。margin-left margin-right margin-top margin-bottom 代表四個(gè)方向單位px auto auto是自適應(yīng)的，給元素margin-left margin-right 元素會(huì)向左或向右靠攏吴超，同時(shí)給左右設(shè)置auto元素居中钉嘹，注意不能給上下設(shè)置auto，margin 可以設(shè)置 一個(gè)值 兩個(gè)值 三個(gè)值 四個(gè)值鲸阻，一個(gè)值的時(shí)候代表四個(gè)方向跋涣，兩個(gè)值的時(shí)候代表上下和左右，三個(gè)值的時(shí)候代表上和左右和下鸟悴，四個(gè)值的時(shí)候代表上陈辱，右，下细诸，左沛贪。margin通常作用于元素與元素之間的距離，元素嵌套上下margin慎用

padding（內(nèi)邊距）：內(nèi)邊距是指元素border距離內(nèi)容之間的距離震贵；其他屬性與margin一樣利赋。

盒子與盒子之間用margin 盒子內(nèi)部用padding 盒子尺寸盡量用auto

3，相對路徑和絕對路徑

相對路徑使用場景：在html中引入css文件猩系，圖片文件媚送，JS文件.在css文件中引入圖片文件

絕對路徑是指一個(gè)文件所在的完整路徑，使用場景：在瀏覽器中查找某文件

4寇甸，什么是盒模型

盒子模型由 外邊距margin border邊界 padding內(nèi)邊距 內(nèi)容尺寸width/height 四種樣式組成的

盒模型包括標(biāo)準(zhǔn)盒模型(box-sizing:content-box)和怪異盒模型（box-sizing:border-box）

標(biāo)準(zhǔn)的盒模型是包括內(nèi)容尺寸 盒子尺寸 區(qū)域尺寸 內(nèi)容尺寸：content 盒子尺寸：content+padding+border 區(qū)域尺寸：content +padding+border+margin塘偎；

怪異盒模型是只有盒子尺寸和區(qū)域尺寸，盒子尺寸：content+padding+border區(qū)域尺寸：content +padding+border+margin拿霉；給元素設(shè)置padding border 盒子尺寸不會(huì)變 但是content會(huì)縮幸髦取；

5,css的三種引入方式的優(yōu)缺點(diǎn)

行間樣式：

優(yōu)點(diǎn)：不會(huì)額外的產(chǎn)生請求

缺點(diǎn)：容易產(chǎn)生重復(fù)的代碼绽淘，造成文檔體積變大涵防。不利于維護(hù)。不符合結(jié)構(gòu)與樣式分離的規(guī)范收恢；

內(nèi)部樣式：在html文檔中開辟一個(gè)書寫css語句的區(qū)域

不會(huì)產(chǎn)生額外的請求武学，初步實(shí)現(xiàn)結(jié)構(gòu)與樣式的分離，代碼復(fù)用不方便伦意，適合單頁面網(wǎng)站的使用（如：移動(dòng)端的頁面）火窒；

外部樣式：

優(yōu)點(diǎn)：利于后期維護(hù)，可以重復(fù)使用驮肉，完成實(shí)現(xiàn)結(jié)構(gòu)與樣式的分離熏矿；

缺點(diǎn)：會(huì)產(chǎn)生額外的請求(但是后期我們會(huì)借助工具抹平這個(gè)缺點(diǎn))；

6离钝，css選擇器-基礎(chǔ)選擇器

通配選擇器：*{css語句;}作用于所有標(biāo)簽票编，無論你這個(gè)有沒有寫，有沒有在文檔當(dāng)中出現(xiàn) 不建議使用卵渴。

標(biāo)簽名選擇器：標(biāo)簽名{css語句;}作用于一類標(biāo)簽慧域，方式是通過標(biāo)簽名稱,使用場景：重置某類標(biāo)簽的默認(rèn)樣式。

群組選擇器:選擇器1,選擇器2,...{css語句;} 使用場景：用于優(yōu)化代碼浪读，減少文檔體積

類選擇器：.類名稱{css語句;}命名規(guī)范：不要以數(shù)字開頭昔榴，盡量使用有意義的單詞（見名知意），多個(gè)單詞用下劃線連接

?使用場景：可以應(yīng)付各種場景碘橘，使我們最常用一種選擇器互订。class名可以多個(gè)，多個(gè)class名用空格隔開痘拆。主要用于具有相同樣式的元素設(shè)置上;

后代選擇器：選擇器1 選擇器2 選擇器3...{css語句;}樣式作用于最后一個(gè)選擇器仰禽，前面的選擇器只是用來過濾條件，方便定位纺蛆。