連這些都不知道，怎麼去阿里！
本次收錄了一些面試中常常會遇到的經典面試題以及本身面試過程當中遇到的一些問題，而且都給出了我在網上收集的答案。立刻就要過春節了，開年就是嶄新的一年，相信不少的前端開發者會有一些跳槽的悸動，經過對本篇知識的整理以及經驗的總結，但願能幫到更多的前端面試者。（若有錯誤或更好的答案，歡迎指正，水平有限，望各位不吝指教。:）javascript
CSS權重css
CSS權重指的是樣式的優先級，有兩條或多條樣式做用於一個元素，權重高的那條樣式對元素起做用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。html
權重的等級前端
能夠把樣式的應用方式分爲幾個等級，按照等級來計算權重
一、!important，加在樣式屬性值後，權重值爲 10000
二、內聯樣式，如：style=」」，權重值爲1000
三、ID選擇器，如：#content，權重值爲100
四、類，僞類和屬性選擇器，如： content、:hover 權重值爲10
五、標籤選擇器和僞元素選擇器，如：div、p、:before 權重值爲1
六、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲0
複製代碼
權重的計算實例vue
一、實例一：html5
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">這是一個div元素</div>
<!--
兩條樣式同時做用一個div，上面的樣式權重值爲10000+1，下面的行間樣式的權重值爲1000，
因此文字的最終顏色爲red
-->
複製代碼
二、實例二：java
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>這是一個h2標題</h2>
</div>
</div>
<!--
第一條樣式的權重計算： 100+1+10+1，結果爲112；
第二條樣式的權重計算： 100+10+1，結果爲111；
h2標題的最終顏色爲red
-->
複製代碼
CSS3新增選擇器node
一、E:nth-child(n)：匹配元素類型爲E且是父元素的第n個子元素webpack
<style type="text/css">
.list div:nth-child(2){
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第2個子元素div匹配 -->
複製代碼
二、E:first-child：匹配元素類型爲E且是父元素的第一個子元素git
三、E:last-child：匹配元素類型爲E且是父元素的最後一個子元素
四、E > F E元素下面第一層子集
五、E ~ F E元素後面的兄弟元素
六、E + F 緊挨着的後面的兄弟元素
本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。
屬性選擇器：
一、E[attr] 含有attr屬性的元素
<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">這是一個div元素</div>
複製代碼
二、E[attr=’ok’] 含有attr屬性的元素且它的值爲「ok」
三、E[attr^=’ok’] 含有attr屬性的元素且它的值的開頭含有「ok」
四、E[attr$=’ok’] 含有attr屬性的元素且它的值的結尾含有「ok」
五、E[attr*=’ok’] 含有attr屬性的元素且它的值中含有「ok」
CSS3圓角、rgba
CSS3圓角
設置某一個角的圓角，好比設置左上角的圓角：
border-top-left-radius:30px 60px;
同時分別設置四個角： border-radius:30px 60px 120px 150px;
設置四個圓角相同：
border-radius:50%;
rgba（新的顏色值表示法）
一、盒子透明度表示法：
.box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}
複製代碼
二、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度
CSS3 transition動畫
一、transition-property 設置過渡的屬性，好比：width height background-color
二、transition-duration 設置過渡的時間，好比：1s 500ms
三、transition-timing-function 設置過渡的運動方式，經常使用有 linear(勻速)|ease(緩衝運動)
四、transition-delay 設置動畫的延遲
五、transition: property duration timing-function delay 同時設置四個屬性
複製代碼
CSS3 transform變換
一、translate(x,y) 設置盒子位移
二、scale(x,y) 設置盒子縮放
三、rotate(deg) 設置盒子旋轉
四、skew(x-angle,y-angle) 設置盒子斜切
五、perspective 設置透視距離
六、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
七、translateX、translateY、translateZ 設置三維移動
八、rotateX、rotateY、rotateZ 設置三維旋轉
九、scaleX、scaleY、scaleZ 設置三維縮放
十、tranform-origin 設置變形的中心點
十一、backface-visibility 設置盒子背面是否可見
複製代碼
舉例：（翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="back_info">背面文字說明</div>
</div>
</body>
</html>
複製代碼
CSS3 animation動畫
一、@keyframes 定義關鍵幀動畫
二、animation-name 動畫名稱
三、animation-duration 動畫時間
四、animation-timing-function 動畫曲線 linear(勻速)|ease(緩衝)|steps(步數)
五、animation-delay 動畫延遲
六、animation-iteration-count 動畫播放次數 n|infinite
七、animation-direction 動畫結束後是否反向還原 normal|alternate
八、animation-play-state 動畫狀態 paused(中止)|running(運動)
九、animation-fill-mode 動畫先後的狀態 none(缺省)|forwards(結束時停留在最後一幀)|backwards(開始時停留在定義的開始幀)|both(先後都應用)
十、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
複製代碼
理解練習：
一、人物走路動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路動畫</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img src="images/walking.png"></div>
</body>
</html>
複製代碼
CSS3 瀏覽器前綴
瀏覽器樣式前綴
爲了讓CSS3樣式兼容，須要將某些樣式加上瀏覽器前綴：
-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
複製代碼
自動添加瀏覽器前綴
目前的情況是，有些CSS3屬性須要加前綴，有些不須要加，有些只須要加一部分，這些加前綴的工做能夠交給插件來完成，好比安裝： autoprefixer
本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。
能夠在Sublime text中經過package control 安裝 autoprefixer
Autoprefixer在Sublime text中的設置：
一、preferences/key Bindings-User
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
複製代碼
二、Preferences>package setting>AutoPrefixer>Setting-User
{
"browsers": ["last 7 versions"],
"cascade": true,
"remove": true
}
複製代碼
last 7 versions：最新的瀏覽器的7個版本
cascade：縮進美化屬性值
remove：是否去掉沒必要要的前綴
HTML5新增標籤
新增語義標籤
一、<header> 頁面頭部、頁眉
二、<nav> 頁面導航
三、<article> 一篇文章
四、<section> 文章中的章節
五、<aside> 側邊欄
六、<footer> 頁面底部、頁腳
複製代碼
音頻視頻
一、<audio>
二、<video>
複製代碼
PC端兼容h5的新標籤的方法，在頁面中引入如下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
複製代碼
HTML5 新增表單控件
新增類型：網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜索
<label>網址:</label><input type="url" name="" required><br><br>
<label>郵箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>時間:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br>
<label>電話:</label><input type="tel" name=""><br><br>
<label>顏色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
新增經常使用表單控件屬性：
一、placeholder 設置文本框默認提示文字
二、autofocus 自動得到焦點
三、autocomplete 聯想關鍵詞
複製代碼
移動端與PC端頁面佈局區別
視口
視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，能夠用 meta 標籤，name=「viewport 」 來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。
設置方法以下( 快捷方式：meta:vp + tab )：
<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>
複製代碼
視網膜屏幕（retina屏幕）清晰度解決方案
視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素能夠理解爲屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比通常屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/9。
圖像在視網膜屏幕上顯示的大小和在通常屏幕上顯示的大小同樣，可是因爲視網膜屏幕的物理像素點比通常的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，爲了解決這個問題，可使用比原來大一倍的圖像，而後用css樣式強制把圖像的尺寸設爲原來圖像尺寸的大小，就能夠解決模糊的問題。
背景圖強制改變大小，可使用background新屬性
background新屬性
background-size:
length：用長度值指定背景圖像大小。不容許負值。
percentage：用百分比指定背景圖像大小。不容許負值。
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到徹底覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
複製代碼
適配佈局類型
PC及移動端頁面適配方法
設備屏幕有多種不一樣的分辨率，頁面適配方案有以下幾種：
一、全適配：響應式佈局+流體佈局
二、移動端適配：
流體佈局+少許響應式
基於rem的佈局
複製代碼
流體佈局
流體佈局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線沒法用百分比，可使用樣式中的計算函數 calc() 來設置寬度，或者使用 box-sizing 屬性將盒子設置爲從邊線計算盒子尺寸。
calc()
能夠經過計算的方式給元素加尺寸，好比： width：calc(25% - 4px);
複製代碼
box-sizing
一、content-box 默認的盒子尺寸計算方式
二、border-box 置盒子的尺寸計算方式爲從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
複製代碼
響應式佈局
響應式佈局就是使用媒體查詢的方式，經過查詢瀏覽器寬度，不一樣的寬度應用不一樣的樣式塊，每一個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面能夠適配多種終端屏幕（pc、平板、手機）。
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
複製代碼
基於rem的佈局
首先了解em單位，em單位是參照元素自身的文字大小來設置尺寸，rem指的是參照根節點的文字大小，根節點指的是html標籤，設置html標籤的文字大小，其餘的元素相關尺寸設置用rem，這樣，全部元素都有了統一的參照標準，改變html文字的大小，就會改變全部元素用rem設置的尺寸大小。
cssrem安裝
cssrem插件能夠動態地將px尺寸換算成rem尺寸
下載本項目，好比：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages... 複製下載的cssrem目錄到剛纔的packges目錄裏。 重啓Sublime Text。
配置參數 參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉rem的單位比例，默認爲40。 max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。 available_file_types - 啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]。複製代碼
- 1. 連Pycharm都不知道怎麼用，學什麼Python（七）
- 2. 這些都不知道？難怪你混得這麼差...
- 3. CopyOnWriteArrayList你都不知道，怎麼拿offer？
- 4. 連這些都不知道，就別說自己懂Python！
- 5. 面試問道：連Serializable都不知道是什麼，你這幾年都幹些什麼了？
- 6. 面試官：你連RESTful都不知道我怎麼敢要你？
- 7. 哪些你知道或不知道的css，在這裏或許都齊全
- 8. 這些問題都答不上憑什麼拿阿里offer？
- 9. 面試官：大學這幾年幹嗎去了，連異常處理都不知道，我怎麼要你？
- 10. 工做不知道這些電腦的祕密怎麼行！
- 更多相關文章...
- • Scala 函數柯里化(Currying) - Scala教程
- • 您已經學習了 XSLT，現在該怎麼辦？ - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。