1、介紹一下標(biāo)準(zhǔn)的css的盒子模型？與低版本IE的盒子模型有什么不同的？

2、box-sizing屬性？

3、CSS選擇器有哪些？哪些屬性可以繼承？

4、CSS優(yōu)先級(jí)算法如何計(jì)算？

5、CSS3新增偽類有那些?

6、display有哪些值？說(shuō)明他們的作用?

7、position的值？

8、什么是z-index？

9、CSS3有哪些新特性？

10、請(qǐng)解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

11、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？

.square{       width:0;       height:0;       margin:0 auto;       border:6px solid transparent;       border-top: 6px solid red;   }

12、為什么要初始化CSS樣式

因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

13、display:none與visibility：hidden的區(qū)別？

display：none 不顯示對(duì)應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

visibility：hidden 隱藏對(duì)應(yīng)元素，在文檔布局中仍保留原來(lái)的空間（重繪）

14、position跟display、overflow、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定位的元素，只能是塊元素或表格。

15、對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？

BFC規(guī)定了內(nèi)部的Block Box如何布局。

定位方案：

1. 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置。

2. Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

3. 每個(gè)元素的margin box 的左邊，與包含塊border box的左邊相接觸。

4. BFC的區(qū)域不會(huì)與float box重疊。

5. BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。

滿足下列條件之一就可觸發(fā)BFC

1. 根元素，即html

2. float的值不為none（默認(rèn)）

3. overflow的值不為visible（默認(rèn)）

4. display的值為inline-block、table-cell、table-caption

5. position的值為absolute或fixed

16、為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式？

浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。由于浮動(dòng)元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上。

浮動(dòng)帶來(lái)的問(wèn)題：

1. 父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素

2. 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后

3. 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)。

清除浮動(dòng)的方式：

1. 父級(jí)div定義height

2. 最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both。

3. 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。

4. 父級(jí)div定義zoom

17、設(shè)置元素浮動(dòng)后，該元素的display值是多少？

自動(dòng)變成display:block

18、使用 CSS 預(yù)處理器嗎？

CSS預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專門的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。

可以讓你的CSS更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

比如說(shuō)：Sass（ 基于Ruby寫(xiě)的  ）、LESS（基于Node寫(xiě)的）、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。

預(yù)處理器能力

1.嵌套 反映層級(jí)和約束 

2.變量和計(jì)算 減少重復(fù)代碼 

3.Extend和Mixin 代碼片段復(fù)用 

4.循環(huán) 適用于復(fù)雜有規(guī)律的樣式 

5.import CSS文件模塊化

19、CSS優(yōu)化、提高性能的方法有哪些？

1. 避免過(guò)度約束

2. 避免后代選擇符

3. 避免鏈?zhǔn)竭x擇符

4. 使用緊湊的語(yǔ)法

5. 避免不必要的命名空間

6. 避免不必要的重復(fù)

7. 最好使用表示語(yǔ)義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么

8. 避免！important，可以選擇其他選擇器

9. 盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類里的重復(fù)規(guī)則

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

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會(huì)損失很多性能。

若從右向左匹配，先找到所有的最右節(jié)點(diǎn)，對(duì)于每一個(gè)節(jié)點(diǎn)，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個(gè)分支的遍歷。

兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)），而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面。

而在 CSS 解析完畢后，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree，最終用來(lái)進(jìn)行繪圖。

在建立 Render Tree 時(shí)（WebKit 中的「Attachment」過(guò)程），瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來(lái)確定生成怎樣的 Render Tree。

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

使用偶數(shù)字體。偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。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)變），于是略顯稀疏。

22、margin和padding分別適合什么場(chǎng)景使用？

何時(shí)使用margin：

1. 需要在border外側(cè)添加空白

2. 空白處不需要背景色

3. 上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。

何時(shí)使用padding：

1. 需要在border內(nèi)側(cè)添加空白

2. 空白處需要背景顏色

3. 上下相連的兩個(gè)盒子的空白，希望為兩者之和。

兼容性的問(wèn)題：在IE5 IE6中，為float的盒子指定margin時(shí)，左側(cè)的margin可能會(huì)變成兩倍的寬度。通過(guò)改變padding或者指定盒子的display：inline解決。

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

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

24、全屏滾動(dòng)的原理是什么？用到了CSS的哪些屬性？

原理：有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有5個(gè)需要展示的全屏頁(yè)面，那么高度是500%，只是展示100%，剩下的可以通過(guò)transform進(jìn)行y軸定位，也可以通過(guò)margin-top實(shí)現(xiàn)
overflow：hidden；transition：all 1000ms ease；

25、什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本。

基本原理是通過(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。

頁(yè)面頭部必須有meta聲明的viewport。

26、 ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這2個(gè)偽元素的作用

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。

::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁(yè)面之中。

:before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號(hào)語(yǔ)法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語(yǔ)法被修改成使用雙冒號(hào)，成為::before ::after。

27、你對(duì)line-height是如何理解的？

行高是指一行文字的高度，具體說(shuō)是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒(méi)有定義height屬性，最終其表現(xiàn)作用一定是line-height。

單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中，其實(shí)也可以把height刪除。
多行文本垂直居中：需要設(shè)置display屬性為inline-block。

28、怎么讓Chrome支持小于12px 的文字？

這個(gè)我們?cè)谧鲆苿?dòng)端的時(shí)候，設(shè)計(jì)師圖片上的文字假如是10px，我們實(shí)現(xiàn)在網(wǎng)頁(yè)上之后。往往設(shè)計(jì)師回來(lái)找我們，這個(gè)字體能小一些嗎？我設(shè)計(jì)的是10px？

為啥是12px?其實(shí)我們都知道，谷歌Chrome最小字體是12px，不管你設(shè)置成8px還是10px，在瀏覽器中只會(huì)顯示12px，那么如何解決這個(gè)坑爹的問(wèn)題呢？

針對(duì)谷歌瀏覽器內(nèi)核，加webkit前綴，用transform:scale()這個(gè)屬性進(jìn)行縮放！

<style>p span{    font-size:10px;    -webkit-transform:scale(0.8);    display:block;}</style>

29、讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？

-webkit-font-smoothing在window系統(tǒng)下沒(méi)有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

30、如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。

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

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

解決方法：

1. 可以將<li>代碼全部寫(xiě)在一排

2. 浮動(dòng)li中float：left

3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

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

元素被當(dāng)成行內(nèi)元素排版的時(shí)候，原來(lái)html代碼中的回車換行被轉(zhuǎn)成一個(gè)空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。這些元素之間的間距會(huì)隨著字體的大小而變化，當(dāng)行內(nèi)元素font-size:16px時(shí)，間距為8px。
解決：
1、font-size
2、改變書(shū)寫(xiě)方式
3、使用margin負(fù)值
4、使用word-spacing或letter-spacing

33、有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度

外層div使用position：relative；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0

34、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)畫(huà)效果.

webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點(diǎn)是壓縮的時(shí)間更久了，兼容性不好，目前谷歌和opera支持。

35、style標(biāo)簽寫(xiě)在body后與body前有什么區(qū)別？

頁(yè)面加載自上而下 當(dāng)然是先加載樣式。

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

36、CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?

參數(shù)是scroll時(shí)候，必會(huì)出現(xiàn)滾動(dòng)條。

參數(shù)是auto時(shí)候，子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條。

參數(shù)是visible時(shí)候，溢出的內(nèi)容出現(xiàn)在父元素之外。

參數(shù)是hidden時(shí)候，溢出隱藏。

37、闡述一下CSS Sprites

將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進(jìn)行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能；CSS Sprites能減少圖片的字節(jié)。

38、css可繼承屬性不可繼承屬性

可 font-size, font-family, color

不可 border, padding, margin, width, height

39、flex布局

先給父元素添加上display:flex形成一個(gè)flex容器

flex-direction:控制主軸的方向

1. row 水平從左到右（默認(rèn)）

2. row-reverse 水平從右到左

3. column垂直從上到下

4. column-reverse垂直從下到上

justify-content:控制子元素在子元素在主軸的對(duì)齊方式

1. flex-start 從主軸起點(diǎn)到主軸終點(diǎn)

2. flex-end 從主軸終點(diǎn)到起點(diǎn)

3. center 居中

4. space-between 兩端分布

5. space-around 環(huán)繞分布

6. space-evenly 均衡分布

align-items 控制子元素在側(cè)軸的對(duì)齊方式

1. flex-start 從側(cè)軸起點(diǎn)到終點(diǎn)

2. flex-end 從側(cè)軸終點(diǎn)到起點(diǎn)

3. center 居中

4. stretch 拉伸對(duì)齊，想要拉伸效果得子元素設(shè)置高度

flex-wrap 控制子元素是否換行

1. nowrap 默認(rèn)，不換行

2. wrap 換行

align-content 控制子元素在側(cè)軸的對(duì)齊方式（多行）

1. flex-start 從主軸起點(diǎn)到主軸終點(diǎn)

2. flex-end: 從主軸的終點(diǎn)到起點(diǎn)

3. center: 居中對(duì)齊

4. space-between 兩端分布

5. space-around 環(huán)繞分布

6. space-evenly 均衡分布

7. stretch: 拉伸分布 要拉伸效果 子元素不要設(shè)置高度

40、移動(dòng)端的布局用過(guò)媒體查詢嗎？

<head>

<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">

CSS : 

@media only screen and (max-device-width:480px) {/css樣式/}

41、文字溢出時(shí)顯示點(diǎn)點(diǎn)點(diǎn)

單行

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

多行

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;  //這里是在第二行有省略號(hào)overflow: hidden;

42、CSS有哪些布局

float布局的兼容性比較好。解決辦法：給橙色塊添加overflow: hidden（生成了一個(gè)BFC）。浮動(dòng)元素父元素還存在高度塌陷問(wèn)題，解決方法：父元素生成一個(gè)BFC。

absolute布局的有點(diǎn)是簡(jiǎn)單直接，兼容性好。缺點(diǎn)，脫離了文檔流。

flex布局的優(yōu)點(diǎn)，布局簡(jiǎn)單、靈活，移動(dòng)端友好；缺點(diǎn)是ie8以下不兼容。

table布局的優(yōu)點(diǎn)是兼容性好，有時(shí)候布局相對(duì)簡(jiǎn)單。缺點(diǎn)是它是對(duì)TABLE標(biāo)簽的不正規(guī)使用，一直以來(lái)被大家所詬病。當(dāng)需要內(nèi)容高度不一致時(shí)并不適應(yīng)。

grid布局優(yōu)點(diǎn)，是第一個(gè)基于二維方向的布局模塊。它是第一個(gè)基于網(wǎng)格的原生布局系統(tǒng)。缺點(diǎn)是對(duì)低版本瀏覽器兼容性不好。

43、CSS3文本屬性

text-shadow:2px 2px 8px #000;參數(shù)1為向右的偏移量，參數(shù)2為向左的偏移量，參數(shù)3為漸變的像素，參數(shù)4為漸變的顏色

text-overflow:規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情 text-overflow:ellipsis(省略)

text-wrap:規(guī)定文本換行的規(guī)則

word-break 規(guī)定非中日韓文本的換行規(guī)則

word-wrap 對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行

white-space: 規(guī)定如何處理元素中的空白 white-space:nowrap 規(guī)定段落中的文本不進(jìn)行換行

44、CSS3漸變

CSS3 定義了兩種類型的漸變（gradients）：

1. 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向

2. 徑向漸變（Radial Gradients）- 由它們的中心定義

線性漸變

background-image: linear-gradient(direction || angle, color-stop1, color-stop2, ...);

第一個(gè)參數(shù)：漸變方向（可選，默認(rèn)從上到下），取值：（to bottom、to top、to right、to left、to bottom right等等）

徑向漸變

background-image: radial-gradient(position, shape size, start-color, stop-color);

box-shadow: h-shadow v-shadow blur spread color inset;

div{   box-shadow: 10px 10px 5px #888888;}

transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]

transform: rotate | scale | skew | translate |matrix;

animation: name duration timing-function delay iteration-count direction;

@keyframes myFadeIn {  from {    opacity: 0;  }  to {    opacity: 1;  }}.target{  background: #f0f;  width: 100px;  height: 100px;  animation: myFadeIn 1s;}

手機(jī)瀏覽器會(huì)把頁(yè)面放入到一個(gè)虛擬的“視口”（viewpoint）中，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域大，也可能比瀏覽器的可視區(qū)域小。通常這個(gè)虛擬的“視口”（viewport）比屏幕寬，會(huì)把網(wǎng)頁(yè)擠到一個(gè)很小的窗口。

如果不顯示地設(shè)置viewport，那么瀏覽器就會(huì)把width默認(rèn)設(shè)置為980。但后果是瀏覽器出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域的寬度比默認(rèn)的viewport的寬度小。 

然后瀏覽器引進(jìn)了 viewport 這個(gè) meta tag，讓網(wǎng)頁(yè)開(kāi)發(fā)者來(lái)控制 viewport 的大小和縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

49、CSS實(shí)現(xiàn)寬度自適應(yīng)100%，寬高16:9的比例的矩形

第一步先計(jì)算高度，假設(shè)寬100%，那么高為h=9/16=56.25%

第二步利用之前所說(shuō)設(shè)置padding-bottom方法實(shí)現(xiàn)矩形

<div class="box">  <div class="scale">這是一個(gè)16：9的矩形</div></div><style>.box {  width: 80%;}.scale {  width: 100%;  padding-bottom: 56.25%;  height: 0;  position: relative;}</style>

50、rem布局的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：能讓我們?cè)谑謾C(jī)各個(gè)機(jī)型的適配方面；大大減少我們代碼的重復(fù)性，是我們的代碼更兼容。

缺點(diǎn)：目前ie不支持 對(duì)pc頁(yè)面來(lái)講使用次數(shù)不多；

數(shù)據(jù)量大：所有的圖片，盒子都需要我們?nèi)ソo一個(gè)準(zhǔn)確的值；才能保證不同機(jī)型的適配；

px轉(zhuǎn)換成rem需要手動(dòng)，計(jì)算方式：量的大小除以100，就等于rem，例如：量的設(shè)計(jì)稿元素寬度是120，那么就寫(xiě)成{width: 1.2rem}。實(shí)現(xiàn)代碼如下：

<script>        function resetFontSize() {var baseFontSize = 100var designWidth = 750            var width = window.innerWidth            var currentFontSize = (width / designWidth) * baseFontSize            document.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px'        }        window.onresize = function () {            resetFontSize()        };        resetFontSize()</script>

51、如何解決1px問(wèn)題（1像素邊框問(wèn)題）

移動(dòng)端web開(kāi)發(fā)中，UI設(shè)計(jì)稿中設(shè)置邊框?yàn)?像素，前端在開(kāi)發(fā)過(guò)程中如果出現(xiàn)border:1px，測(cè)試會(huì)發(fā)現(xiàn)在某些機(jī)型上，1px會(huì)比較粗，即是較經(jīng)典的 移動(dòng)端1px像素問(wèn)題。

1.transform: scale(0.5) 

a、設(shè)置height: 1px，根據(jù)媒體查詢結(jié)合transform縮放為相應(yīng)尺寸。

div {    height:1px;    background:#000;    -webkit-transform: scaleY(0.5);    -webkit-transform-origin:0 0;    overflow: hidden;}

b、用::after和::befor,設(shè)置border-bottom：1px solid #000,然后在縮放-webkit-transform: scaleY(0.5);可以實(shí)現(xiàn)兩根邊線的需求

div::after{    content:'';    width:100%;    border-bottom:1px solid #000;    transform: scaleY(0.5);}

2.媒體查詢利用設(shè)備像素比縮放，設(shè)置小數(shù)像素；

優(yōu)點(diǎn)：簡(jiǎn)單，好理解
缺點(diǎn)：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系統(tǒng)都是顯示0px。

• 1.）css可以寫(xiě)成這樣：

.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2) {    .border { border: 0.5px solid #999 }}@media screen and (-webkit-min-device-pixel-ratio: 3) {    .border { border: 0.333333px solid #999 }}

• 2.）js 可以寫(xiě)成這樣：

<body><div id="main" style="border: 1px solid #000000;"></div></body><script type="text/JavaScript">    if (window.devicePixelRatio && devicePixelRatio >= 2) {        var main = document.getElementById('main');        main.style.border = '.5px solid #000000';    }</script>

二者任選其一；

3.媒體查詢 + transfrom

/* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {    .border-bottom::after {        -webkit-transform: scaleY(0.5);        transform: scaleY(0.5);    }}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {    .border-bottom::after {        -webkit-transform: scaleY(0.33);        transform: scaleY(0.33);    }}

4.box-shadow 方案

利用陰影也可以實(shí)現(xiàn)，優(yōu)點(diǎn)是沒(méi)有圓角問(wèn)題，缺點(diǎn)是顏色不好控制

div {    -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);}

52、CSS允許使用哪些不同的媒介類型？

@media屬性主要有四種類型（包括screen）：

all—適用于所有設(shè)備。

print—打印預(yù)覽模式/打印頁(yè)面。

speech——適用于“朗讀”頁(yè)面的屏幕閱讀器

screen——計(jì)算機(jī)屏幕（默認(rèn)）

53、CSS有哪些單位?

CSS 有兩種類型的長(zhǎng)度單位：相對(duì)和絕對(duì)。設(shè)置 CSS 長(zhǎng)度的屬性有 width, margin, padding, font-size, border-width, 等。

相對(duì)長(zhǎng)度：

提示: rem與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。

絕對(duì)長(zhǎng)度：

像素或許被認(rèn)為是最好的"設(shè)備像素"，而這種像素長(zhǎng)度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。px實(shí)際上是一個(gè)按角度度量的單位。

54、用于控制背景圖像滾動(dòng)的屬性是什么？

background-attachment：該屬性設(shè)置背景圖像是隨頁(yè)面其余部分滾動(dòng)還是固定滾動(dòng)。

body {  background-image: url("img_tree.gif");  background-repeat: no-repeat;  background-attachment: fixed;}

55、什么是供應(yīng)商前綴？

瀏覽器供應(yīng)商有時(shí)會(huì)在實(shí)驗(yàn)性或非標(biāo)準(zhǔn)CSS屬性和JavaScript API中添加前綴，因此，從理論上講，開(kāi)發(fā)人員可以嘗試新的想法，同時(shí)從理論上防止在標(biāo)準(zhǔn)化過(guò)程中依賴他們的實(shí)驗(yàn)，然后破壞Web開(kāi)發(fā)人員的代碼。

開(kāi)發(fā)人員應(yīng)等待包括未添加前綴的屬性，直到瀏覽器行為標(biāo)準(zhǔn)化為止。

主流瀏覽器使用以下前綴：

-webkit- （Chrome，Safari，Opera的較新版本，幾乎所有的iOS瀏覽器（包括Firefox for iOS）；基本上是任何基于WebKit的瀏覽器）
-moz- （Firefox）
-o- （舊的，WebKit之前的Opera版本）
-ms- （Internet Explorer和Microsoft Edge）

56、CSS中 link 和@import 的區(qū)別是？

link屬于HTML標(biāo)簽，而@import是CSS提供的，頁(yè)面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載
import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無(wú)兼容問(wèn)題
link方式的樣式的權(quán)重 高于@import的權(quán)重.

57、使元素消失的方法有哪些？

opacity：0，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件的

visibility：hidden，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，但是不會(huì)觸發(fā)該元素已經(jīng)綁定的事件

display：none，把元素隱藏起來(lái)，并且會(huì)改變頁(yè)面布局，可以理解成在頁(yè)面中把該元素刪除掉。

感謝你的閱讀。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)