前端面試部分整理

時間 2019-11-13

原文原文鏈接

css/htmljavascript

一、Doctype做用？標準模式與兼容模式各有什麼區別?css

（1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

（2）、標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

二、CSS的盒子模型？html


（1）、有兩種， IE 盒子模型：IE的content部分包含了 border 和 pading;

： 內容(content)、填充(padding)、 邊框(border)、邊界(margin)（2）、標準 W3C 盒子模型

三、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素的區別？前端

（1）、首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。

（2）行內元素有：a b span img input select strong

（3）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（4）常見的空元素：<br> <hr> <img> <input> <link> <meta>

（5）行內元素會在一條直線上排列，都是同一行的，水平方向排列 ； 塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。

（6）塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素

（7）行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上：行內元素設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效

四、CSS有幾種引入方式，分別是？，有什麼區別html5

（1）link跟 @import

（2）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;

（3）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（4）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

五、iframe有那些缺點？java

*iframe會阻塞主頁面的Onload事件； *搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO; *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

六、Label的做用是什麼？是怎麼用的？android

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for="Name">Number:</label>
<input type=「text「name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

七、實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。css3

<div style="height:1px;overflow:hidden;background:#ccc"></div>

八、CSS選擇符有哪些？哪些屬性能夠繼承？git

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標籤選擇器（div, h1, p）
    4.相鄰選擇器（h1 + p）
    5.子選擇器（ul > li）
    6.後代選擇器（li a）
    7.通配符選擇器（ * ）
    8.屬性選擇器（a[rel = "external"]）
    9.僞類選擇器（a: hover, li: nth - child）

*   可繼承的樣式： font-size font-family color, UL LI DL DD DT;

*   不可繼承的樣式：border padding margin width height ;

九、CSS優先級算法如何計算？ * 優先級就近原則，同權重狀況下樣式定義最近者爲準;github

*   載入樣式以最後載入爲準

優先級爲:
   !important >內聯 >  id > class > tag（元素：div{width:300}）

十、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

給div設置一個寬度，而後添加margin:0 auto屬性
```
div{
    width:200px;
    margin:0 auto;
 }
```

　　水平居中一個浮動元素

肯定容器的寬高 寬500 高 300 的層
  設置層的外邊距

 .div {
      width:500px ; height:300px;//高度能夠不設
      margin: -150px 0 0 -250px;
      position:relative;         //相對定位  水平居中  若是改爲absolute就能夠上下左右居中
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

　　讓絕對定位的div居中

.div {

position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;//若是改爲margin:auto; 那麼就是上下左右同時居中

top: 0; left: 0; bottom: 0; right: 0;


十一、display有哪些值？說明他們的做用

block 象塊類型元素同樣顯示。
  none 缺省值。象行內元素類型同樣顯示。
  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。


十二、position的值relative和absolute定位原點是？

absolute
    生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

  fixed （老IE不支持）
    生成絕對定位的元素，相對於瀏覽器窗口進行定位。

  relative
    生成相對定位的元素，相對於其正常位置進行定位。

  static
    默認值。沒有定位，元素出如今正常的流中
   （忽略 top, bottom, left, right z-index 聲明）。

  inherit
    規定從父元素繼承 position 屬性的值。

1三、用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

1四、一個滿屏品字佈局如何設計?

簡單的方式：
    上面的div寬100%，
    下面的兩個div分別寬50%，
    而後用float或者inline使其不換行便可

css3/html5
一、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
      繪畫 canvas;
      用於媒介回放的 video 和 audio 元素;
      本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
      sessionStorage 的數據在瀏覽器關閉後自動刪除;
      語意化更好的內容元素，好比 article、footer、header、nav、section;
      表單控件，calendar、date、time、email、url、search;
      新的技術webworker, websockt, Geolocation;

移除的元素：
      純表現的元素：basefont，big，center，font, s，strike，tt，u;
      對可用性產生負面影響的元素：frame，frameset，noframes；

二、簡述一下你對HTML語義化的理解？
* 支持HTML5新標籤：
     IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
     能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
     瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

     固然最好的方式是直接使用成熟的框架、好比html5shim;
     <!--[if lt IE 9]>
        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
     <![endif]-->

* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

用正確的標籤作正確的事情。
  html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
  及時在沒有樣式css狀況下也以一種文檔格式顯示，而且是容易閱讀的;
  搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
  使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

三、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。
以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用：
一、頁面頭部像下面同樣加入一個manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
三、在離線狀態時，操做window.applicationCache進行需求實現。

詳細的使用請參考：有趣的HTML5：離線存儲

四、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。
若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，
若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。離線的狀況下，瀏覽器就直接使用離線存儲的資源。

五、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：
    cookie數據大小不能超過4k。
    sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：
    localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
    sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
    cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

六、HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或下某個input 設置爲 autocomplete=off。

七、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

調用localstorge、cookies等本地存儲方式

八、HTML5 爲何只須要寫 <!DOCTYPE HTML>？

（1）、HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

（2）、HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

九、如何在頁面上實現一個圓形的可點擊區域？

一、map+area或者svg
二、border-radius
三、純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

十、CSS3新增僞類有那些？

CSS3新增僞類舉例：
    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
    p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
    p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
    :enabled        :disabled 控制表單控件的禁用狀態。
    :checked        單選框或複選框被選中。

十一、CSS3有哪些新特性

CSS3實現圓角（border-radius:8px），
  陰影（box-shadow:10px），
  文字特效（text-shadow、），
  線性漸變（gradient），
  旋轉（transform）
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增長了更多的CSS選擇器
  多背景 rgba

十二、解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景




關於瀏覽器

一、常見的瀏覽器內核有哪些

（1）Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

（2）Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

（3）Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]

（4）Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

二、瀏覽器內核的理解？

（1）、主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

（2）、渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

（3）、JS引擎則：解析和執行javascript來實現網頁的動態效果。 最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

　詳細文章：瀏覽器內核的解析和對比


其餘

一、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止：惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試；

二、頁面可見性（Page Visibility）API 能夠有哪些用途？

在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

三、常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

  這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

  漸進識別的方式，從整體中逐漸排除局部。

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
          background-color:#f1ee18;/*全部識別*/
          .background-color:#00deff\9; /*IE六、七、8識別*/
          +background-color:#a200ff;/*IE六、7識別*/
          _background-color:#1e0bd1;/*IE6識別*/
      }

*  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
   也可使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性。
   解決方法:統一經過getAttribute()獲取自定義屬性。

*  IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
   Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。

*  解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

*  Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
   可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

四、爲何要初始化CSS樣式。

- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

五、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

六、display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

七、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）

若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，
因此不如隔離開。

由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，
提升了webserver的http請求的解析速度。

未完成

請解釋一下爲何會出現浮動和何時須要清除浮動？清除浮動的方式
移動端的佈局用過媒體查詢嗎？

使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS)

CSS優化、提升性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的？
在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
margin和padding分別適合什麼場景使用？
抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
元素豎向的百分比設定是相對於容器的高度嗎？
全屏滾動的原理是什麼？用到了CSS的那些屬性？
什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）
::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用。
如何修改chrome記住密碼後自動填充表單的黃色背景？
你對line-height是如何理解的？
設置元素浮動後，該元素的display值是多少？（自動變成display:block）
怎麼讓Chrome支持小於12px 的文字？
讓頁面裏的字體變清晰，變細用CSS怎麼作？（-webkit-font-smoothing: antialiased;）
font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
position:fixed;在android下無效怎麼處理？

overflow: scroll時不能平滑滾動的問題怎麼處理？
有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

前端學習網站推薦

1. 極客標籤：     http://www.gbtags.com/

2. 碼農週刊：     http://weekly.manong.io/issues/

3. 前端週刊：     http://www.feweekly.com/issues

4. 慕課網：       http://www.imooc.com/

5. div.io：         http://div.io

6. Hacker News： https://news.ycombinator.com/news

7. InfoQ：       http://www.infoq.com/

8. w3cplus：     http://www.w3cplus.com/

9. Stack Overflow： http://stackoverflow.com/

10.w3school：    http://www.w3school.com.cn/

11.mozilla：     https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

轉載於：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。