前端面試題（總結）

ZJW0215發表於2019-02-16
前端面試題

HTML

1.HTML5為何只要寫<!doctype html>

  • HTML5不基於SGML（標準通用標記語言），所以不需要引用DTD，但需要doctype來規範瀏覽器的行為（使得瀏覽器知道應該以何種解析方式對文件進行解析）
  • HTML4.0基於SGML，所以要引用DTD才能告知瀏覽器文件所使用的文件型別

2.講講行內元素、塊元素、空元素有哪些

  • 行內元素：a，span，img，input，select，strong，em，b（標記性元素）
  • 塊元素：div，p，ul，li，ol，dd，dt，dl，h1-h6
  • 空元素：hr，br，input，img，link，meta

3.匯入樣式時，使用link與@import的區別

  • link屬於XHTML標籤，除了可以載入css外，還能定義SSR，定義rel連線屬性等作用，@import是css提供的，只能載入css樣式
  • 頁面載入時，link引入的資源能夠同時被載入，而@import引入的css必須等頁面載入完成後才能進行載入
  • link是XHTML標籤，無相容問題，而@import是css2.1提出的，IE5以下的低版本瀏覽器不支援

4.簡述對HTML5語義化的理解

  • 在沒有css樣式時，以一種文件的形式顯示，並且是容易閱讀的
  • HTML5語義化使頁面的內容結構化，結構更清晰，便於瀏覽器、搜尋引擎解析
  • 有利於哪些有視障的人使用螢幕閱讀器根據標記來訪問網站
  • 有利於團隊的開發和維護
  • 有利於SEO：便於爬蟲抓取更多有效的資訊

5.描述下cookie、localStorage和sessionStorage的區別

  • cookie本是用來客戶端與服務端進行通訊的，因為其有儲存功能，而被借用來儲存資訊，cookie資料會始終在同源http請求中攜帶
  • localStorage和sessionStorage不會自動把資料傳送到伺服器上，僅在本地儲存

  • 儲存大小

    • cookie只有4k；而localStorage和sessionStorage可以達到5M或者更大

  • 過期時間

    • cookie在設定的過期時間前一直有效，
    • localStorage長期有效，關閉瀏覽器資料不會丟失，除非使用者主動刪除資料
    • sessionStorage資料在當前瀏覽器視窗關閉後自動刪除

6.實現不用border畫出1px高的線，在不同瀏覽器裡，標準模式與怪異模式下都能保持一致的效果

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

7.網頁驗證碼的作用及解決的安全問題

區分使用者是人還是機器，可以防止惡意破解密碼、刷票等；可以防止黑客對某一特定註冊使用者以暴力破解的方式不斷的嘗試登入

8.data-屬性的作用

data-*用於儲存頁面或者應用程式的私有自定義的資料，可以在所有的html元素中嵌入data-自定義屬性，可以被js利用來運算元據

注意：data屬性應該為小寫，且data-後至少要有一個字元，不能單單使用data，data屬性值可以是任意字串

9.說說HTML5新特性，移除的元素（說說HTML5）

新特性：

  • 繪畫canvas
  • 用於媒介回放的video、audio元素
  • 本地離線locaStorage長期儲存資料，瀏覽器關閉後資料不丟失
  • sessionStorage在瀏覽器關閉後資料自動刪除
  • 表單控制元件：data、email、search、url、calendar、time
  • 語義化標籤：header、footer、nav、section、article
  • 新的技術：webworker、websocket、Geolocation

移除的元素

  • 純表現元素：basefont、center、font、big、u、tt、strike、s
  • 對可用性產生負面影響的元素：frame、frameset、noframes

CSS

1.介紹下標準的盒子模型和IE的怪異盒子模型

  • w3c標準盒子模型：content的width就是設定的width
  • IE怪異盒子模型：content的width包含border和padding

2.css優先順序計算

  • 優先順序就近原則，同等權重時樣式最近者優先順序更高
  • !import > id > class > tag
  • !import比內聯樣式優先順序更高

3.簡述css檔案為什麼要reset

瀏覽器種類眾多，不同瀏覽器的預設樣式不一樣，需要進行reset統一瀏覽器的樣式

4.如何使兩個div進行水平佈局

  • 使用flex佈局：父元素設定：display：flex
  • 使用浮動佈局（或者使用display：inline-block）
// html
<div class="box">
    <div class="left">fff</div>
    <div class="right">dddf</div>
</div>    
// css
.left{
    float: left;
    background: red;
    /*display: inline-block;*/
}
.right{
    overflow: hidden;
    background: green;
    /*display: inline-block;*/
}

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

  • 左邊定寬+設定浮動width：300px；float：left；右邊設定overflow：hidden（或者margin-left：左邊的寬度）
.left{
    float: left;
    width: 300px;
    background: red;
}
.right{
    overflow: hidden;
    background: green;
}
  • 父元素設定display：flex；左邊設定width：300px；右邊設定flex-grow：1
  • 父元素設定display：table；左邊設定width：300px；右邊設定display：table-cell；width：100%；
  • 父元素設定position：relative；左邊設定position：absolute；width：300px；右邊設定margin-left：左邊的寬度

6.兩個div完成兩列布局：要求高度不定（父元素也是），兩個div實時等高（左邊div高度被子元素撐高時，右邊div高度與左邊一致）

  • 父元素設定display：table；右邊設定：display：table-cell
  • 父元素設定display：flex；右邊設定flex-grow：1

7.實現左右兩邊寬度固定，中間自適應

  • 使用左右浮動佈局，中間居中佈局，此時中間div要放在右浮動下面（因為center的div在正常文件流中，佔據全屏寬度，右邊的浮動元素會放置在下一行）
// html
<div class="box">
    <div class="left">fff</div>
    <div class="right">ddddd</div>
    <div class="center">ss</div>
</div>    
// css
.left{
    float: left;
    background: red;
}
.right{
    float: right;
    background: green;
}
.center{
    margin: 0 auto;
    background: yellow;
}
  • 使用flex佈局

父元素設定display：flex；左邊定寬width：300px；右邊定寬width：300px；中間設定flex-grow：1

// html
<div class="box">
    <div class="left">fff</div>
    <div class="center">ss</div>
    <div class="right">ddddd</div>
</div>    
// css
.box{
    display: flex;
}
.left{
    width: 300px;
    background: red;
}
.right{
    width: 300px;
    background: green;
}
.center{
    flex-grow: 1;
    background: yellow;
}
  • 使用絕對定位，左右兩邊絕對定位，脫離文件流，中間使用margin留出定寬的margin值
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    background: red;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    background: green;
}
.center{
    margin: 0 300px;
    background: yellow;
}

8.聖盃佈局（與雙飛翼佈局差不多）

其實是利用負margin值實現，也就是固比固（兩邊盒子寬度固定，中間盒子自適應）

<div class="box">
    <div class="center col">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
        dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg</div>
    <div class="left col"></div>
    <div class="right col"></div>
</div>    

.box{
    overflow: hidden;
    padding: 0 150px;
}
.left{
    left: -150px;
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    right: -150px;
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    position: relative;
    float: left;
}

定位完成後，要進行position：relative；再左右兩欄新增left和right值，使中間的內容不被遮蓋

9.雙飛翼佈局

<div class="box">
    <div class="wrap col">
        <div class="center">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
            dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
        </div>
    </div>
    <div class="left col"></div>
    <div class="right col"></div>
</div>    
.left{
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    float: left;
}
.wrap{
    margin: 0 150px;
}
與聖盃佈局只是中間的div增加了包含的容器，防止遮蓋文字使用了在包含容器中設定margin：0 定寬值；

10.如何水平居中一個浮動元素，如何水平居中一個絕對定位元素

居中浮動元素 

<div class="box">
    <div class="right col"></div>
</div>
.right{
    float：left;
    width: 150px;
    height: 50px;
    margin: 0 0 0 -75px;
    position: relative;
    left: 50%;
    top: 50%;
    background: green;
}

居中絕對定位元素 

.right{
    position: absolute;
    width: 150px;
    height: 50px;
    margin: 0 auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: green;
}

11.position的值relative和absolute的定位原點是哪裡

  • absolute：生成絕對定位元素，相對於值不為static的第一個父元素進行定位
  • fixed：生成絕對定位，相對於瀏覽器視窗進行定位
  • relative：生成相對定位元素，相對於其正常位置進行定位
  • static：沒有定位，元素出現在正常的流中（忽略偏移宣告：top、left、right、bottom、z-index）
  • inherit：從父元素繼承position屬性的值

12.li與li之間有看不見的空白間隔是什麼原因引起的

行框的排列會受到中間空白（回車或者空格）的影響，空格也屬於字元，也會應用樣式，佔據空間
將字元大小設為0就可以將間隔去除

13.優雅降級與漸進增強

  • 漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進，追加功能達到更好的使用者體驗
  • 優雅降級：先構建完整的功能，再針對低版本瀏覽器進行相容

JS 部分等待更新

相關文章