1.經(jīng)常遇到的瀏覽器的兼容性有哪些？原因、解決方法是什么？
1）png24為的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8柠贤。
2）瀏覽器默認(rèn)的margin和padding不同灵妨，解決方案是加一個(gè)全局的* {
margin: 0;
padding: 0;
}
來(lái)統(tǒng)一宿礁。
3）IE6雙邊距bug:塊屬性標(biāo)簽float后钉寝，又有橫行的margin情況下乍迄，在ie
6顯示margin比設(shè)置的大管引。
4）浮動(dòng)ie產(chǎn)生的雙邊距問(wèn)題：塊級(jí)元素就加display：inline；行內(nèi)元素轉(zhuǎn)塊級(jí)元素display：inline后面再加display：table闯两。
.bb {
background-color: #f1ee18; /*所有識(shí)別*/
.background-color: #00deff\9; /*IE6褥伴、7谅将、8識(shí)別*/
+background-color: #a200ff; /*IE6、7識(shí)別*/
_background-color: #1e0bd1; /*IE6識(shí)別*/
}
2.常用 Hack 的技巧：
（1）IE下噩翠，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性戏自，也可以使用getAttribute()獲取自定義屬性；（2）Firefox下伤锚，只能使用getAttribute()獲取自定義屬性擅笔。解決方法：統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。（3）IE下屯援，even對(duì)象有x,y屬性猛们，但是沒有pageX,pageY屬性；（4）Firefox下狞洋，event對(duì)象有pageX,pageY屬性弯淘，但是沒有x,y屬性。解決方法是條件注釋吉懊，缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)庐橙。（5）Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示，可通過(guò)加入CSS屬性-webkit-text-size-adjust: none;
來(lái)解決借嗽。
（6）超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active了态鳖，解決方法是改變CSS屬性的排列順序：
L-V-H-A : a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
3.css3 新增屬性
border-radius:圓角
box-shadow：陰影
border-image：邊框圖片
text-shadow:文字陰影
transform translate 位移 rotate 旋轉(zhuǎn) scale 縮放 skew 轉(zhuǎn)動(dòng)時(shí)給定的角度 rotateX/rotateY/rotateZ：3D 旋轉(zhuǎn)屬性
box-sizing 父級(jí)寬高不變，內(nèi)容隨便折騰
animation 動(dòng)畫
tansaction 過(guò)度
transfrom 轉(zhuǎn)換
4.常用的幾種布局方式
- 固定布局
- 流式布局（自適應(yīng)布局）
- 彈性布局（伸縮布局）
- 定位布局
- 浮動(dòng)布局
- 響應(yīng)式布局（媒體查詢）
5.CSS 實(shí)現(xiàn)寬度自適應(yīng) 100%,寬高 16:9 的比例的矩形
.rect {
width: 100%;
padding-bottom: 56.25%;
border: 1px solid #000;
}
padding 的值如果用百分比的話是依據(jù)于父元素寬度
6.canvas 和 SVG 的區(qū)別
**Canvas **
1恶导、Canvas 是基于位圖的浆竭，它不能夠改變大小，只能縮放顯示惨寿，放大或縮小時(shí)圖形質(zhì)量會(huì)有所損失
2邦泄、 依賴分辨率，逐像素進(jìn)行渲染的
3裂垦、 Canvas 通過(guò) Java ｓｃｒｉｐｔ 來(lái)繪制 2D 圖形（動(dòng)態(tài)生成）
4顺囊、 不支持事件處理器。Canvas 輸出的是一整幅畫布蕉拢，能夠以 .png 或 .jpg 格式保存結(jié)果圖像
5特碳、 適合像素處理，動(dòng)態(tài)渲染和大數(shù)據(jù)量繪制企量，最適合圖像密集型的游戲（頻繁重繪對(duì)象）
6测萎、 如果圖形位置發(fā)生變化，整個(gè)場(chǎng)景需要重新繪制届巩，包括任何或許已被圖形覆蓋的對(duì)象
**svg **
1硅瞧、SVG 可縮放矢量圖形（Scalable Vector Graphics），是一種使用可擴(kuò)展標(biāo)記語(yǔ)言（XML）描述 2D 圖形的語(yǔ)言
2恕汇、不依賴分辨率,逐元素（DOM 元素）進(jìn)行渲染,能夠很好的處理圖形大小的改變, 放大或縮小時(shí)圖形質(zhì)量不會(huì)有所損失
3腕唧、 基于 XML或辖，用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容
4、 支持事件處理器枣接。SVG 繪制出的每個(gè)圖形元素都是獨(dú)立的 DOM 節(jié)點(diǎn)颂暇，能夠方便的綁定事件
5、 適合靜態(tài)圖片展示但惶，高保真文檔查看和打印的應(yīng)用場(chǎng)景耳鸯，不適合游戲應(yīng)用）
6、 如果對(duì)象屬性發(fā)生變化膀曾，瀏覽器能自動(dòng)重現(xiàn)圖形县爬。也就是說(shuō)，SVG 繪圖很容易編輯添谊，只需要增加或移除相應(yīng)的元素即可
7.如何開啟 CSS3 硬件加速
Chrome, FireFox, Safari, IE9+ 以及最新的 Opera 都支持硬件加速财喳，只要使用特定的 CSS 語(yǔ)句就可以開啟硬件加速:
/**使用3d效果來(lái)開啟硬件加速**/
.speed-up {
-webkit-transform: translate3d(250px, 250px, 250px) rotate3d(
250px,
250px,
250px,
-120deg
)
scale3d(0.5, 0.5, 0.5);
}
如果并不需要用到 transform 變換，僅僅是開啟硬件加速斩狱，可以用下面的語(yǔ)句:
/**原理上還是使用3d效果來(lái)開啟硬件加速**/
.speed-up {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
對(duì)于 safari 以及 chrome耳高，可能會(huì)在使用 animation 或者 transition 時(shí)出現(xiàn)閃爍的問(wèn)題，可以使用以下的解決方法:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/**webkit上也可以用以下語(yǔ)句 **/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
注意事項(xiàng)
硬件加速最好只用在 animation 或者 transform 上所踊。不要濫用硬件加速泌枪，因?yàn)檫@樣會(huì)增加性能的消耗，如果濫用反而會(huì)使動(dòng)畫變得更加卡污筷，這樣就得不償失了工闺。
8.優(yōu)先級(jí)的計(jì)算規(guī)則
-
!important 這個(gè)關(guān)鍵字的優(yōu)先級(jí)最高乍赫。要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問(wèn)題而不是 !important.
下面要引入特殊值 0,0,0,0 每一位為 0~255（基本上不會(huì)超過(guò) 255 的）
內(nèi)聯(lián)樣式. 記做: 1,0,0,0
然后是 ID 選擇器. 記做: 0,1,0,0
類選擇器瓣蛀、屬性選擇器和偽類選擇器. 記做: 0,0,1,0
元素選擇器和偽元素選擇器. 記做: 0,0,0,1
通用選擇器（星號(hào)）、組合符合（+雷厂，>惋增，~，" "）和否定偽類（:not()）不影響優(yōu)先級(jí).
-
如果他們的優(yōu)先級(jí)一樣的話改鲫，則是后聲明的樣式覆蓋前面聲明的樣式.
舉個(gè)簡(jiǎn)單的栗子：
a:hover {
color: red;
}
a:link {
color: yellow;
}
根據(jù)以上的計(jì)算規(guī)則我們可以得到 a:hover 的優(yōu)先級(jí)為 0,0,1,1诈皿，a:link 的優(yōu)先級(jí)也為 0,0,1,1。所以 a:link 的樣式覆蓋了 a:hover像棘。所以我們平常寫這兩個(gè)的不同樣式時(shí)會(huì)把 hover 放在 link 的后面稽亏。
9.讓元素隱藏有幾種方法，及 display:none 和 visibility: hidden 區(qū)別 ?
1.display:none
設(shè)置元素的 display 為 none 是最常用的隱藏元素的方法缕题。 將元素設(shè)置為 display:none 后截歉，元素在頁(yè)面上將徹底消失，元素本來(lái)占有的空間就會(huì)被其他元素占有烟零，也就是說(shuō)它會(huì)導(dǎo)致瀏覽器的重排和重繪瘪松。
2.visibility:hidden
設(shè)置元素的 visibility 為 hidden 也是一種常用的隱藏元素的方法咸作，和 display:none 的區(qū)別在于，元素在頁(yè)面消失后宵睦，其占據(jù)的空間依舊會(huì)保留著记罚，所以它只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排。 visibility:hidden 適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景
3.opacity:0
opacity 屬性我相信大家都知道表示元素的透明度壳嚎，而將元素的透明度設(shè)置為 0 后桐智，在我們用戶眼中，元素也是隱藏的烟馅，這算是一種隱藏元素的方法酵使。
這種方法和 visibility:hidden 的一個(gè)共同點(diǎn)是元素隱藏后依舊占據(jù)著空間，但我們都知道焙糟，設(shè)置透明度為 0 后口渔，元素只是隱身了，它依舊存在頁(yè)面中穿撮。
4.設(shè)置 height缺脉，width 等盒模型屬性及 font-size 為 0
10.px，em悦穿，rem 的區(qū)別
px 像素（Pixel）攻礼。
相對(duì)長(zhǎng)度單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的栗柒。(引自 CSS2.0 手冊(cè))
PX 特點(diǎn)
- IE 無(wú)法調(diào)整那些使用 px 作為單位的字體大薪赴纭；
- 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了 em 或 rem 作為字體單位瞬沦；
- Firefox 能夠調(diào)整 px 和 em太伊，rem。
**em 是相對(duì)長(zhǎng)度單位逛钻。 **
相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸僚焦。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸曙痘。
**rem 特點(diǎn) **
rem 是 CSS3 新增的一個(gè)相對(duì)單位（root em芳悲，根 em），這個(gè)單位引起了廣泛關(guān)注边坤。
這個(gè)單位與 em 的區(qū)別在于使用 rem 為元素設(shè)定字體大小時(shí)名扛，仍然是相對(duì)大小，但相對(duì)的只是 HTML 根元素茧痒。
11.display：inline-block 什么時(shí)候會(huì)出現(xiàn)間隙肮韧？及解決辦法。
出現(xiàn)情況
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</div>
</body>
換行造成的空白符導(dǎo)致的
**解決辦法 **
方法一： 元素之間不換行，代碼如下：
111111111111
方法二： 給其父元素設(shè)置 font-size:0;給其自身設(shè)置實(shí)際需要的字號(hào)大小惹苗。 方法三： 負(fù) margin 方法殿较，需要注意的是這個(gè)間隙跟字號(hào)大小有關(guān)系的，所以間隙不是個(gè)確定值桩蓉。
12.stylus/sass/less區(qū)別
均具有“變量”淋纲、“混合”、“嵌套”院究、“繼承”洽瞬、“顏色混合”五大基本特性
Scss和LESS語(yǔ)法較為嚴(yán)謹(jǐn)，LESS要求一定要使用大括號(hào)“{}”业汰，Scss和Stylus可以通過(guò)縮進(jìn)表示層次與嵌套關(guān)系
Scss無(wú)全局變量的概念伙窃，LESS和Stylus有類似于其它語(yǔ)言的作用域概念
Sass是基于Ruby語(yǔ)言的，而LESS和Stylus可以基于NodeJS NPM下載相應(yīng)庫(kù)后進(jìn)行編譯样漆；
13.知道 css 有個(gè) content 屬性嗎为障？有什么作用？有什么應(yīng)用放祟？
css的content屬性專門應(yīng)用在 before/after偽元素上鳍怨，用于來(lái)插入生成內(nèi)容。最常見的應(yīng)用是利用偽類清除浮動(dòng)跪妥。
14.CSS 在性能優(yōu)化方面的實(shí)踐
-
css壓縮與合并鞋喇、Gzip壓縮 -
css文件放在head里、不要用@import - 盡量用縮寫眉撵、避免用濾鏡侦香、合理使用選擇器
15. link 與@import 的區(qū)別
link是HTML方式，@import是CSS方式
link最大限度支持并行下載纽疟，@import過(guò)多嵌套導(dǎo)致串行下載罐韩，出現(xiàn)FOUC(文檔樣式短暫失效)
link可以通過(guò)rel="alternate stylesheet"指定候選樣式
瀏覽器對(duì) link 支持早于@import，可以使用@import對(duì)老瀏覽器隱藏樣式
@import必須在樣式規(guī)則之前仰挣，可以在css文件中引用其他文件
總體來(lái)說(shuō)：link優(yōu)于@import
<template>
<a href="#" class="top">
<img src="/img/arrow.png">
</a>
</template>
<style>
.top {
bottom: 10px;
position: fixed;
right: 0px;
padding: 5px;
z-index: 1000;
background: rgba(0,0,0,.5);
color: #fff;
border-radius: 5px;
}
.top img {
width: 25px;
}
</style>
