1.11 瀏覽器是怎樣解析CSS選擇器的？

CSS選擇器的解析是從右向左解析的

原因：

從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點(diǎn)(葉子節(jié)點(diǎn))挤巡，而從左向右的匹配規(guī)則的性能都浪

費(fèi)在了失敗的查找上面

1.12 width:auto 和 width:100%的區(qū)別

• width:100%會(huì)使元素box的寬度等于父元素的contentbox的寬度
• width:auto會(huì)使元素?fù)螡M整個(gè)父元素心铃，margin、border、padding姑子、content區(qū)域會(huì)自動(dòng)分配水平空間。

1.13 display测僵、position和float的相互關(guān)系街佑？

• 首先我們判斷display屬性是否為none，如果為none捍靠，則position和float屬性的值不影響元素最后的表現(xiàn)
• 然后判斷position的值是否為absolute或者fixed沐旨，如果是，則float屬性失效榨婆，并且display的值應(yīng)該被 設(shè)置為table或者block磁携，具體轉(zhuǎn)換需要看初始轉(zhuǎn)換值
• 如果position的值不為absolute或者fixed，則判斷float屬性的值是否為none良风，如果不是谊迄，則display 的值則按上面的規(guī)則轉(zhuǎn)換闷供。注意，如果position的值為relative并且float屬性的值存在统诺，則relative相對(duì) 于浮動(dòng)后的最終位置定位
• 如果float的值為none歪脏，則判斷元素是否為根元素，如果是根元素則display屬性按照上面的規(guī)則轉(zhuǎn)換粮呢，如果不是唾糯， 則保持指定的display屬性值不變

總的來(lái)說(shuō)，可以把它看作是一個(gè)類似優(yōu)先級(jí)的機(jī)制鬼贱，"position:absolute"和"position:fixed"優(yōu)先級(jí)最高移怯，有它存在 的時(shí)候，浮動(dòng)不起作用这难，'display'的值也需要調(diào)整舟误；其次，元素的'float'特性的值不是"none"的時(shí)候或者它是根元素 的時(shí)候姻乓，調(diào)整'display'的值嵌溢；最后，非根元素蹋岩，并且非浮動(dòng)元素赖草，并且非絕對(duì)定位的元素，'display'特性值同設(shè)置值剪个。

1.14 IFC 是什么秧骑？

IFC指的是行級(jí)格式化上下文，它有這樣的一些布局規(guī)則：

• 行級(jí)上下文內(nèi)部的盒子會(huì)在水平方向扣囊，一個(gè)接一個(gè)地放置乎折。
• 當(dāng)一行不夠的時(shí)候會(huì)自動(dòng)切換到下一行。
• 行級(jí)上下文的高度由內(nèi)部最高的內(nèi)聯(lián)盒子的高度決定

1.15 為什么不建議使用統(tǒng)配符初始化 css 樣式

• 采用*{pading:0;margin:0;}這樣的寫法好處是寫起來(lái)很簡(jiǎn)單侵歇，但是是通配符骂澄，需要把所有的標(biāo)簽都遍歷一遍，當(dāng)網(wǎng)站較大時(shí)惕虑， 樣式比較多坟冲，這樣寫就大大的加強(qiáng)了網(wǎng)站運(yùn)行的負(fù)載，會(huì)使網(wǎng)站加載的時(shí)候需要很長(zhǎng)一段時(shí)間溃蔫，因此一般大型的網(wǎng)站都有分層次的一 套初始化樣式
• 出于性能的考慮健提，并不是所有標(biāo)簽都會(huì)有padding和margin，因此對(duì)常見(jiàn)的具有默認(rèn)padding和margin的元素初始化即 可酒唉，并不需使用通配符*來(lái)初始化

1.16 CSS3 新特新

1. 新增各種 CSS 選擇器 :not(p) 選擇每個(gè)非p的元素矩桂； p:empty 選擇每個(gè)沒(méi)有任何子級(jí)的p元素（包括文本節(jié)點(diǎn)）
2. 邊框（Borders）
3. 背景 background-clip（規(guī)定背景圖的繪制區(qū)域）沸移，background-origin痪伦，background-size
4. 線性漸變 （Linear Gradients） 向下/向上/向左/向右/對(duì)角方向
5. 文本效果 陰影text-shadow侄榴，textwrap，word-break网沾，word-wrap
6. 2D 轉(zhuǎn)換 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate() 3D轉(zhuǎn)換 perspective()癞蚕；transform是向元素應(yīng)用 2D 或者 3D 轉(zhuǎn)換
7. 過(guò)渡 transition
8. 動(dòng)畫
9. 多列布局 （multi-column layout）
10. 盒模型
11. flex 布局
12. 多媒體查詢 **定義兩套css，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性

1.17 position 跟 display辉哥、float 這些特性相互疊加后會(huì)怎么樣桦山？

• display 屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型醋旦；float屬性是一種布局方式恒水，定義元素在哪個(gè)方向浮動(dòng)。
• 類似于優(yōu)先級(jí)機(jī)制：position：absolute/fixed優(yōu)先級(jí)最高饲齐，有他們?cè)跁r(shí)钉凌，float不起作用，display值需要調(diào)整捂人。float 或者absolute定位的元素御雕，只能是塊元素或表格。

1.18 什么是CSS 預(yù)處理器滥搭？為什么使用酸纲？

• Less、Sass瑟匆、Stylus闽坡，用來(lái)預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性愁溜，還有層級(jí)无午、mixin、變量祝谚、循環(huán)宪迟、函數(shù)等，具有很方便的UI組件模塊化開(kāi)發(fā)能力交惯，極大的提高工作效率

為什么要使用次泽？

• 可嵌套性
• 變量
• Mixins(混合@mixin)：可重用性高，可以注入任何東西
• @extend：允許一個(gè)選擇器繼承另一個(gè)選擇器
• @function:函數(shù)功能席爽，用戶使用@function 可以去編寫自己的函數(shù)
• 引用父元素&：在編譯時(shí)意荤，&將被替換成父選擇符
• 計(jì)算功能
• 組合連接： #{} :變量連接字符串
• 循環(huán)語(yǔ)句：（很少用到）
• if 語(yǔ)句：（很少用到）

1.19 瀏覽器是怎樣解析的？

1. HTML 被 HTML 解析器解析成 DOM 樹(shù)只锻；2. CSS 被 CSS 解析器解析成 CSSOM 樹(shù)玖像；
2. 結(jié)合 DOM 樹(shù)和 CSSOM 樹(shù)，生成一棵渲染樹(shù)(Render Tree)齐饮，這一過(guò)程稱為 Attachment捐寥；
3. 生成布局(flow)笤昨，瀏覽器在屏幕上“畫”出渲染樹(shù)中的所有節(jié)點(diǎn)；
4. 將布局繪制(paint)在屏幕上握恳，顯示出整個(gè)頁(yè)面瞒窒。

1.20 在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢乡洼？

• 使用偶數(shù)字體
• Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開(kāi)始只提供 12崇裁、14、16 px 這三個(gè)大小的點(diǎn)陣束昵，而 13拔稳、15、17 px時(shí)用的是小一號(hào)的點(diǎn)锹雏。（即每個(gè)字占的空間大了 1 px壳炎，但點(diǎn)陣沒(méi)變），于是略顯稀疏

1.21 元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎逼侦？

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)匿辩，它是相對(duì)于父容器的寬度計(jì)算的，但是榛丢，對(duì)于一些表示豎向距離的屬性铲球，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時(shí)晰赞，依據(jù)的也是父容器的寬度稼病，而不是高度

1.22 怎么讓谷歌支持小于12px的文字？

使用 scale

1.23 li 與 li 之間有看不見(jiàn)的空白間隔是什么原因引起的掖鱼？有什么解決辦法然走？

行框的排列會(huì)受到中間空白（回車空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式戏挡，占據(jù)空間芍瑞，所以會(huì)有間隔，把字符大小設(shè)為0褐墅，就沒(méi)有空格了

解決方法：

1. 可以將代碼全部寫在一排
2. 浮動(dòng)li中float：left
3. 在ul中用font-size：0（谷歌不支持）拆檬；
4. 可以將 ul{letter-spacing: -4px;};li{letter-spacing: normal;}

1.24 display:inline-block 什么時(shí)候會(huì)顯示間隙？

1. 有空格時(shí)候會(huì)有間隙 解決：s除空格
2. margin正值的時(shí)候 解決：margin使用負(fù)值
3. 使用font-size時(shí)候 解決：font-size:0妥凳、letter-spacing竟贯、word-spacing

1.25 png、jpg逝钥、gif 這些圖片格式解釋一下叙甸，分別什么時(shí)候用锨能。有沒(méi)有了解過(guò)webp慢显？

• png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無(wú)損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高，色彩好沃琅。 大多數(shù)地方都可以用。
• jpg是一種針對(duì)相片使用的一種失真壓縮方法选酗，是一種破壞性的壓縮阵难，在色調(diào)及顏色平滑變化做的不錯(cuò)岳枷。在www上芒填，被用來(lái)儲(chǔ)存和傳輸照片的格式。
• gif是一種位圖文件格式空繁，以8位色重現(xiàn)真色彩的圖像殿衰。可以實(shí)現(xiàn)動(dòng)畫效果.
• webp格式是谷歌在2010年推出的圖片格式盛泡，壓縮率只有jpg的2/3闷祥，大小比png小了45%。缺點(diǎn)是壓縮的時(shí)間更久了傲诵，兼容性不好凯砍，目前谷歌和opera支持。

1.26 style 標(biāo)簽寫在 body 后與 body前有什么區(qū)別拴竹？

頁(yè)面加載自上而下 當(dāng)然是先加載樣式悟衩。
寫在 body 標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺?style 標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染栓拜，等待加載且解析樣式表完成之后重新渲染座泳，在windows的IE下可能會(huì)出現(xiàn) FOUC 現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）

1.27 ::before 和::after 中雙冒號(hào)和單冒號(hào)有什么區(qū)別、作用幕与？

區(qū)別

在css中偽類一直用:表示挑势，如 :hover，:active等

偽元素在CSS1中已存在啦鸣，當(dāng)時(shí)語(yǔ)法使用 : 表示 潮饱，如：:before和:after

后來(lái)在CSS3中修訂，偽元素用 ::表示诫给，如 ::before 和 ::after饼齿，以此區(qū)分偽元素和偽類

由于低版本 IE 對(duì)雙冒號(hào)不兼容，開(kāi)發(fā)者為了兼容性各瀏覽器蝙搔，繼續(xù)使使用 :after 這種老語(yǔ)法表示偽元素

單冒號(hào): CSS3表示偽類缕溉；雙冒號(hào)::CSS3偽元素

作用：

::before 和::after 的主要作用是在元素內(nèi)容前后加上指定內(nèi)容

偽類與偽元素都是用于向選擇器加特殊效果

偽類與偽元素的本質(zhì)區(qū)別就是是否抽象創(chuàng)造了新元素

偽類只要不是互斥可以疊加使用

偽元素在一個(gè)選擇器中只能出現(xiàn)一次，并且只能出現(xiàn)在末尾

偽類與偽元素優(yōu)先級(jí)分別與類吃型、標(biāo)簽優(yōu)先級(jí)相同

1.28 CSS3新增偽類证鸥，以及偽元素？

CSS3 新增偽類

p:first-of-type 選擇屬于其父元素的首個(gè)<p>元素的每個(gè)<p>元素

p:last-of-type 選擇屬于其父元素的最后<p>元素的每個(gè)<p>元素

p:nth-child(n) 選擇屬于其父元素的第 n 個(gè)子元素的每個(gè)<p>元素

p:nth-last-child(n) 選擇屬于其父元素的倒數(shù)第 n 個(gè)子元素的每個(gè)<p>元素

p:nth-of-type(n) 選擇屬于其父元素第 n 個(gè)<p>元素的每個(gè)<p>元素

p:nth-last-of-type(n)

選擇屬于其父元素倒數(shù)第 n 個(gè)<p>元素的每個(gè)<p>元素

p:last-child 選擇屬于其父元素最后一個(gè)子元素的每個(gè)<p>元素

p:target

選擇當(dāng)前活動(dòng)的<p>元素

:not(p) 選擇非<p>元素的每個(gè)元素

:enabled 控制表單控件的可用狀態(tài)

:disabled

控制表單控件的禁用狀態(tài)

:checked

單選框或復(fù)選框被選中

偽元素

::first-letter 將樣式添加到文本的首字母

::first-line 將樣式添加到文本的首行

::before 在某元素之前插入某些內(nèi)容

::after 在某元素之后插入某些內(nèi)容