有句古話說得好，面試造火箭，工作擰螺絲。經(jīng)歷過職場的小伙伴都清楚，對于一般的工作需求，用不到太過高深的技術(shù)，但是，往往面試過程中，會進行所謂深層次的技術(shù)交流，所以，跳槽，回顧面試題，這大概是每位小伙伴都要做的事情，下面，小編在這里給大家總結(jié)一些常見的企業(yè)級面試題，如有bug，請賜教。

1、如何實現(xiàn)0.5px邊框線

這是考察小伙伴對css的掌握深度，心細的小伙伴去試一下就會發(fā)現(xiàn)，我們設(shè)置0.5像素邊框由于兼容性問題不會生效，跟設(shè)置1px沒有區(qū)別，這也是出現(xiàn)頻率比較高的一題，話不多說直接提供兩個兼容性比較高的方式。

1、使用2D轉(zhuǎn)換中的縮放：transform: scale(0.5);

注：即使使用縮放，也不能直接操作原來的盒子，要重新去定義一個盒子，給新盒子設(shè)置邊框縮放

舉例：

2、通過css3漸變屬性

舉例：

當(dāng)然小伙伴們也可以根據(jù)自己的想法去調(diào)整代碼結(jié)構(gòu)，靈活變通。

2、opacity:0; visibility:hidden; display:none;有什么區(qū)別

3、標(biāo)準(zhǔn)盒模型和怪異盒模型(ie盒模型)有什么區(qū)別

4、transform會改變固定定位的顯示效果

5、::before 和 :after中雙冒號和單冒號有什么區(qū)別？

6、px、rpx、em、rem 、vw/vh、百分比的區(qū)別？

7、CSS3 transiton過渡不支持CSS3 漸變解決辦法

對于之前的開發(fā)，我們可以使用圖片的方式來代替顏色漸變，但是后期發(fā)現(xiàn)，該方法可拓展性差，還影響性能。所以css3引進了線性漸變的方式，書寫漸變色。

語法：

background-image: linear-gradient(red,blue);? ?

新屬性，過渡不支持也正常，如果非要實現(xiàn)顏色漸變過渡，也可以借助一下別的手法，看代碼。

?注意本質(zhì)上并不是過渡的漸變，而是過渡的背景圖尺寸，我們先把背景圖尺寸設(shè)置為200%，這樣只看到一個顏色，當(dāng)然可以根據(jù)盒子尺寸，繼續(xù)增加背景圖尺寸，最后滑過的時候，讓背景圖的尺寸變成寬度100%

8、如何給一個輸入框添加放大鏡作為提示文本

當(dāng)然，很多移動端的收入框，都僅僅只是展示效果，點擊搜索的時候會自動跳轉(zhuǎn)帶搜索頁面，但也保不準(zhǔn)會有個別情景需要直接在首頁上展示的，上操作。

我們這一塊的方式就是使用傳統(tǒng)的阿里圖標(biāo)字體庫。
使用unicode方式引入圖標(biāo)，注意，一定要添加類名 iconfont類名?<input type="text" placeholder="&#xe623; 請輸入目的地" class="iconfont">

9、flex:1 1 0和flex:1 1 auto有什么區(qū)別？

首先我們要知道flex是三個屬性的屬性，即：flex-grow，flex-shrink和flex-basis的縮寫形式。
默認(rèn)值是 flex:0 1 auto;
首先要解析第一個：flex:1 1 0,可放大，可縮小，寬度或者高度為0，
其次要解析第二個：flex:1 1 auto,可放大，可縮小，寬度或者高度跟隨我們自己設(shè)置的寬高，會被內(nèi)容撐開，凸顯自動的含義，

如圖一：3后面還有一點空間，給3設(shè)置flex:1 1 0; 要注意此時主軸是自左而右的，所以3是沒有寬度，但是有內(nèi)容，所以是會被內(nèi)容撐開一點空間，此時效果如圖二，4會上去，占用空間，3有多少空間，就要看橫向父元素還剩下多少空間，現(xiàn)在4的空間是200px全部展示，3的空間是50px,如果給4設(shè)置寬度為250px,那么4就不會上到第一行，因為放不下。如圖三，剩下的空間都是3的。

回到最初狀態(tài)

如圖一：3后面還有一點空間，給3設(shè)置flex:1 1 auto; 要注意此時主軸是自左而右的。效果圖直接如圖三所示，3的基礎(chǔ)寬度是200px,所以剩余空間都是3的。但是要注意拉伸后的空間并不是固定的，內(nèi)容增加還是會撐開元素。

10、元素水平垂直居中的方式

這基本上是必問的一道題目，這里也給大家總結(jié)一下，最起碼要掌握其中的三種方式。

以上七中居中方式，足夠應(yīng)付面試，可以針對性記憶。

11、單選選中添加文本

實現(xiàn)如上效果：

主要是考察到偽元素及偽類選擇器的使用。
使用:checked{}選擇器，匹配到被勾選的單選使用::after{}選擇器，在被選元素內(nèi)容最后添加內(nèi)容