css 高頻面試題（最新）

1.經(jīng)常遇到的瀏覽器的兼容性有哪些？原因、解決方法是什么？

1）png24為的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。
  2）瀏覽器默認的margin和padding不同，解決方案是加一個全局的* {
  margin: 0;
  padding: 0;
}
來統(tǒng)一。
  3）IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie
  6顯示margin比設(shè)置的大。
  4）浮動ie產(chǎn)生的雙邊距問題：塊級元素就加display：inline；行內(nèi)元素轉(zhuǎn)塊級元素display：inline后面再加display：table。
  .bb {
  background-color: #f1ee18; /*所有識別*/
  .background-color: #00deff\9; /*IE6、7、8識別*/
  +background-color: #a200ff; /*IE6、7識別*/
  _background-color: #1e0bd1; /*IE6識別*/
}

2.常用 Hack 的技巧：

（1）IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；（2）Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。（3）IE下，even對象有x,y屬性，但是沒有pageX,pageY屬性；（4）Firefox下，event對象有pageX,pageY屬性，但是沒有x,y屬性。解決方法是條件注釋，缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。（5）Chrome中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入CSS屬性-webkit-text-size-adjust: none;
來解決。
（6）超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不再具有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)動時給定的角度 rotateX/rotateY/rotateZ：3D 旋轉(zhuǎn)屬性

box-sizing 父級寬高不變，內(nèi)容隨便折騰

animation 動畫

tansaction 過度

transfrom 轉(zhuǎn)換

4.常用的幾種布局方式

  • 固定布局
  • 流式布局（自適應(yīng)布局）
  • 彈性布局（伸縮布局）
  • 定位布局
  • 浮動布局
  • 響應(yīng)式布局（媒體查詢）

5.CSS 實現(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 是基于位圖的，它不能夠改變大小，只能縮放顯示，放大或縮小時圖形質(zhì)量會有所損失
2、 依賴分辨率，逐像素進行渲染的
3、 Canvas 通過 Java ｓｃｒｉｐｔ 來繪制 2D 圖形（動態(tài)生成）
4、 不支持事件處理器。Canvas 輸出的是一整幅畫布，能夠以 .png 或 .jpg 格式保存結(jié)果圖像
5、 適合像素處理，動態(tài)渲染和大數(shù)據(jù)量繪制，最適合圖像密集型的游戲（頻繁重繪對象）
6、 如果圖形位置發(fā)生變化，整個場景需要重新繪制，包括任何或許已被圖形覆蓋的對象

**svg **

1、SVG 可縮放矢量圖形（Scalable Vector Graphics），是一種使用可擴展標記語言（XML）描述 2D 圖形的語言
2、不依賴分辨率,逐元素（DOM 元素）進行渲染,能夠很好的處理圖形大小的改變, 放大或縮小時圖形質(zhì)量不會有所損失
3、 基于 XML，用文本格式的描述性語言來描述圖像內(nèi)容
4、 支持事件處理器。SVG 繪制出的每個圖形元素都是獨立的 DOM 節(jié)點，能夠方便的綁定事件
5、 適合靜態(tài)圖片展示，高保真文檔查看和打印的應(yīng)用場景，不適合游戲應(yīng)用）
6、 如果對象屬性發(fā)生變化，瀏覽器能自動重現(xiàn)圖形。也就是說，SVG 繪圖很容易編輯，只需要增加或移除相應(yīng)的元素即可

7.如何開啟 CSS3 硬件加速

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera 都支持硬件加速，只要使用特定的 CSS 語句就可以開啟硬件加速:

/**使用3d效果來開啟硬件加速**/
.speed-up {
  -webkit-transform: translate3d(250px, 250px, 250px) rotate3d(
      250px,
      250px,
      250px,
      -120deg
    )
    scale3d(0.5, 0.5, 0.5);
}

如果并不需要用到 transform 變換，僅僅是開啟硬件加速，可以用下面的語句:

/**原理上還是使用3d效果來開啟硬件加速**/
.speed-up {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

對于 safari 以及 chrome，可能會在使用 animation 或者 transition 時出現(xià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上也可以用以下語句  **/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

注意事項

硬件加速最好只用在 animation 或者 transform 上。不要濫用硬件加速，因為這樣會增加性能的消耗，如果濫用反而會使動畫變得更加卡，這樣就得不償失了。

8.優(yōu)先級的計算規(guī)則

  • !important 這個關(guān)鍵字的優(yōu)先級最高。要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important.

    下面要引入特殊值 0,0,0,0 每一位為 0~255（基本上不會超過 255 的）

  • 內(nèi)聯(lián)樣式. 記做: 1,0,0,0

  • 然后是 ID 選擇器. 記做: 0,1,0,0

  • 類選擇器、屬性選擇器和偽類選擇器. 記做: 0,0,1,0

  • 元素選擇器和偽元素選擇器. 記做: 0,0,0,1

  • 通用選擇器（星號）、組合符合（+，>，~，" "）和否定偽類（:not()）不影響優(yōu)先級.

  • 如果他們的優(yōu)先級一樣的話，則是后聲明的樣式覆蓋前面聲明的樣式.

    舉個簡單的栗子：

a:hover {
  color: red;
}
a:link {
  color: yellow;
}

根據(jù)以上的計算規(guī)則我們可以得到 a:hover 的優(yōu)先級為 0,0,1,1，a:link 的優(yōu)先級也為 0,0,1,1。所以 a:link 的樣式覆蓋了 a:hover。所以我們平常寫這兩個的不同樣式時會把 hover 放在 link 的后面。

9.讓元素隱藏有幾種方法，及 display:none 和 visibility: hidden 區(qū)別 ?

1.display:none
設(shè)置元素的 display 為 none 是最常用的隱藏元素的方法。 將元素設(shè)置為 display:none 后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導(dǎo)致瀏覽器的重排和重繪。

2.visibility:hidden
設(shè)置元素的 visibility 為 hidden 也是一種常用的隱藏元素的方法，和 display:none 的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會重排。 visibility:hidden 適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景

3.opacity:0
opacity 屬性我相信大家都知道表示元素的透明度，而將元素的透明度設(shè)置為 0 后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
這種方法和 visibility:hidden 的一個共同點是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為 0 后，元素只是隱身了，它依舊存在頁面中。

4.設(shè)置 height，width 等盒模型屬性及 font-size 為 0

10.px，em，rem 的區(qū)別

px 像素（Pixel）。

相對長度單位。像素 px 是相對于顯示器屏幕分辨率而言的。(引自 CSS2.0 手冊)
PX 特點

  1. IE 無法調(diào)整那些使用 px 作為單位的字體大??；
  2. 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了 em 或 rem 作為字體單位；
  3. Firefox 能夠調(diào)整 px 和 em，rem。

**em 是相對長度單位。 **

相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。

**rem 特點 **

rem 是 CSS3 新增的一個相對單位（root em，根 em），這個單位引起了廣泛關(guān)注。
這個單位與 em 的區(qū)別在于使用 rem 為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是 HTML 根元素。

11.display：inline-block 什么時候會出現(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è)置實際需要的字號大小。 方法三： 負 margin 方法，需要注意的是這個間隙跟字號大小有關(guān)系的，所以間隙不是個確定值。

12.stylus/sass/less區(qū)別

均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性

Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮進表示層次與嵌套關(guān)系

Scss無全局變量的概念，LESS和Stylus有類似于其它語言的作用域概念

Sass是基于Ruby語言的，而LESS和Stylus可以基于NodeJS NPM下載相應(yīng)庫后進行編譯；

13.知道 css 有個 content 屬性嗎？有什么作用？有什么應(yīng)用？

css的content屬性專門應(yīng)用在 before/after偽元素上，用于來插入生成內(nèi)容。最常見的應(yīng)用是利用偽類清除浮動。

14.CSS 在性能優(yōu)化方面的實踐

  • css壓縮與合并、Gzip壓縮
  • css文件放在head里、不要用@import
  • 盡量用縮寫、避免用濾鏡、合理使用選擇器

15. link 與@import 的區(qū)別

link是HTML方式，@import是CSS方式

link最大限度支持并行下載，@import過多嵌套導(dǎo)致串行下載，出現(xiàn)FOUC(文檔樣式短暫失效)

link可以通過rel="alternate stylesheet"指定候選樣式

瀏覽器對 link 支持早于@import，可以使用@import對老瀏覽器隱藏樣式

@import必須在樣式規(guī)則之前，可以在css文件中引用其他文件

總體來說：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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.行內(nèi)元素和塊級元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級元素? 行內(nèi)元素：和有他元素都在一行上，高度、行高及外...
    極樂君閱讀 2,601評論 0贊 20
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,371評論 0贊 8
  • 一、理論基礎(chǔ)知識部分 1.1、講講輸入完網(wǎng)址按下回車，到看到網(wǎng)頁這個過程中發(fā)生了什么 a. 域名解析 b. 發(fā)起T...
    我家媳婦蠢蠢噠閱讀 3,247評論 2贊 106
  • 目錄 1. 介紹一下盒子模型 2. box-sizing屬性 3. CSS選擇器的權(quán)重的概念 4. 介紹一下BFC...
    嘻哈圣閱讀 1,430評論 0贊 4
  • 我是紫君 我的原創(chuàng) 導(dǎo)語：昨天下午，王瑾給我電話，約我一定到她的小公寓看看。說是只能今天去看，要不就不方便了。 1...
    昭潔紫君閱讀 372評論 2贊 0

友情鏈接更多精彩內(nèi)容