2018前端面試知識整理【上】

時間 2019-11-21

標籤前端面試知識整理欄目快樂工作简体版

原文原文鏈接

最近又迎來一年一度的求職高峯，本人也是準備找工做，因而整理了一下面試中可能出現的知識點。歡迎補充，本集內容只包含html和css。js下期分享吧。

Doctype做用

聲明於html文檔中第一行，告知瀏覽器的解析器用什麼文檔標準解析這個文檔。

頁面樣式導入時候 link 和 @import有什麼區別

link屬於xhtml標籤，除了加載css外，還能定義Rss，定義rel鏈接屬性等。而@import是css提供的，只能用於加載css。

##介紹一下你對瀏覽器內核的理解javascript

主要分兩部分渲染引擎和js引擎。渲染引擎負責獲取網頁內容整理信息 js引擎負責解析和執行javascript來實現網頁的動態效果。

常見瀏覽器內核有哪些

谷歌：-webkit-
火狐：-moz-
ie：-ms-
歐鵬：-o-
qq瀏覽器：雙內核 -webkit- -ms-

H5標籤的新屬性

語義化標籤 header footer nav 有利於代碼可讀性和SEO,語義元素在IE6-8的兼容可使用.css
表單新增功能以往input中的name和value要隨着form表單一塊兒提交，form表單必須包裹input , 而如今能夠經過input的form屬性綁定html
視頻標籤音頻標籤畫布標籤java

如何用html和css寫三角形 transparent屬性爲透明

<style> .box{ height:0px; width:0px; border-top:10px solid red; border-left:10px solid transparent; border-right:10px solid transparent; } </style>
    <body>
    <div class="box"></div>
    </body>
複製代碼

選擇器

僞元素選擇器:操做的不是頁面中真實的dom元素能夠用來處理浮動引起的bug
僞類選擇器：操做頁面中真實的元素

margin-top 的bug問題

margin-top 的bug問題子元素添加margin-top 父元素也掉下來。
緣由：子元素是父元素的第一個元素子元素沒有浮動父元素沒有浮動父元素沒有內填充父元素沒有邊框
解決方法1.父元素添加overflow:hidden 2.父元素添加padding-top減去父元素高度子元素刪除margin-top

浮動

卡頓問題一個元素高度高於其餘元素，就會吧其餘元素擠下去
浮動引起的bug：父元素不設置高度，子元素都浮動，浮動的子元素撐不開父元素的高度，
緣由：浮動元素會脫離文檔流不在一個平面內
解決辦法：1.給父元素添加高度 2.給父元素加overflow：hidden；3.給父元素添加一個最後的子元素添加屬性必須是一個塊元素因此有時候要加display：block clear：both；

右邊寬度固定，左邊自適應

<!--方法1-->
    <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
    
<!--方法2 -->
<style> div { height: 200px; } .left { float: right; width: 200px; background-color: rebeccapurple; } .right { margin-right: 200px; background-color: red; } </style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
複製代碼

水平垂直居中

/*方法1*/

    #container{
        position:relative;
    }
     
    #center{
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
    
/*方法2*/

    #container{
        position:relative;
    }
     
    #center{
        width:100px;
        height:100px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-50px 0 0 -50px;
    }

/*方法3*/
    #container{
        display:flex;
        justify-content:center;
        align-items: center;
    }
複製代碼