HTML&&CSS面試題收集

1. 怎么讓一個不定寬高的 DIV，垂直水平居中？

/*
* flex 方法
*/
display: flex;
align-items: center;
justify-cotent: center;
/*
* 知道盒子寬高 margin負值配合定位
*/
.son1{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
.son2{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*
* CSS3 transform
*/
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
/*
*使用display:table-cell方法
*/
.parent{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
.son{
    display:inline-block;
    vertical-align:middle;
}

2.position 幾個屬性的作用？

static -- 默認值 沒有定位
fixed  -- 絕對定位 相對于瀏覽器窗口
absolute -- 絕對定位 相對于 static 定位以外的第一個父元素進行定位。
relative -- 相對定位 相對于其正常位置進行定位。
inherit -- 規(guī)定應該從父元素繼承 position 屬性的值。

3. px，em，rem 的區(qū)別？

  • px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

    1. IE無法調(diào)整那些使用px作為單位的字體大?。?/li>
    2. 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
    3. Firefox能夠調(diào)整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。

  • em是相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。

    1. em的值并不是固定的；
    2. em會繼承父級元素的字體大小。

  • rem是CSS3新增的一個相對單位（root em，根em），使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

    rem一般可以經(jīng)過動態(tài)設置根元素大小來實現(xiàn)適配各種分辨率屏幕

4. 什么是 BFC？

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

更詳細解釋

5. CSS 引入的方式有哪些? link 和@import 的區(qū)別是?

  • link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。
  • link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
  • link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
  • ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

6. 描述 css reset 的作用和用途？

HTML標簽在瀏覽器中都有默認的樣式，不同的瀏覽器的默認樣式之間存在差別。例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin實現(xiàn)的，而在Firefox下卻是由padding實現(xiàn)的。開發(fā)時瀏覽器的默認樣式可能會給我們帶來多瀏覽器兼容性問題，影響開發(fā)效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式?！案采w”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉！這就是CSS reset。

css-reset文件地址

7. 解釋 css sprites，如何使用？

精靈圖：簡單來說就是把一些圖標匯集到一張png上 通過像素點來顯示不同位置的圖片

8. 清除浮動的幾種方式？

  1. 額外標簽法：給誰清除浮動，就在其后額外添加一個空白標簽 。

    .clear{
 clear: both;
}

  1. 父級添加overflow方法: 可以通過觸發(fā)BFC的方式，實現(xiàn)清楚浮動效果。

    .parent{
 overflow: hidden;
}

  2. 使用after偽元素清除浮動: :after方式為空元素的升級版，好處是不用單獨加標簽了。（較常用）

    .clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1
}

  3. 使用before和after雙偽元素清除浮動: （較常用）

    .clearfix:before, .clearfix:after {
 content: '';
    display:table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom:1;
}

9. 能否簡述一下如何使一套設計方案，適應不同的分辨率，有哪些方法可以實現(xiàn)？

  • 百分比布局
  • flex彈性盒子
  • rem適配
  • 各種框架的布局系統(tǒng) 如：bootstrap的柵格系統(tǒng)
  • css媒體查詢實現(xiàn)不同相應分辨率顯示相應效果
  • ......

10. 你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎？

漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優(yōu)雅降級（Graceful Degradation）：一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構(gòu)建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

11. 合理的頁面布局中常聽過結(jié)構(gòu)與表現(xiàn)分離，那么結(jié)構(gòu)是什么？表現(xiàn)是什么？

結(jié)構(gòu)：HTML ( 骨架 )

表現(xiàn)：CSS

12. 簡述對 Web 語義化的理解？

  • 正確的標簽做正確的事情
  • 頁面內(nèi)容結(jié)構(gòu)化
  • 無CSS樣子時也容易閱讀，便于閱讀維護和理解
  • 便于瀏覽器、搜索引擎解析。 利于爬蟲標記、利于SEO

13. CSS 都有哪些選擇器？CSS 選擇器的優(yōu)先級是怎么樣定義的？

  • 選擇器

    1. 標簽名選擇器
    2. 類選擇器（class）
    3. id選擇器 （#box）
    4. 后代選擇器（空格隔開）
    5. 群組選擇器（逗號隔開）

  • 優(yōu)先級

    ? 行內(nèi) > id > 類 > 標簽

14. display： none；與 visibility： hidden 的區(qū)別是什么？

  • 如果給一個元素設置了display: none，那么該元素以及它的所有后代元素都會隱藏，它是前端開發(fā)人員使用頻率最高的一種隱藏方式。隱藏后的元素無法點擊，無法使用屏幕閱讀器等輔助設備訪問，占據(jù)的空間消失。
  • 給元素設置visibility: hidden也可以隱藏這個元素，但是隱藏元素仍需占用與未隱藏時一樣的空間，也就是說雖然元素不可見了，但是仍然會影響頁面布局

15. 用 CSS 定義 p 標簽，要求實現(xiàn)以下效果：字體顏色在 IE6 下為黑色(#000000)；IE7下為紅色(#ff0000)；而其他瀏覽器下為綠色(#00ff00)

p {
    color: green;
    *color: blue;
    _color: black;
}

16. HTML 與 XHTML——二者有什么區(qū)別

  • XHTML 元素必須被正確地嵌套。

  • XHTML 元素必須被關(guān)閉。

  • 標簽名必須用小寫字母。

  • 所有的 XHTML 元素必須被嵌套于 <html> 根元素中。

17. Doctype 作用? 嚴格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?

  • Doctype: <!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標簽

  • 嚴格模式:又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。

    混雜模式:又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。

    如何區(qū)分:瀏覽器解析時到底使用嚴格模式還是混雜模式，與網(wǎng)頁中的 DTD 直接相關(guān)。

18. 盒模型：

W3C 標準中，如果設置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在 Quirks 模式下，IE 的寬度和高度還包含了 padding 和 border。

19. Css Hack？ie6,7,8 的 hack 分別是什么？

針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。

 background-color:blue;      /*firefox*/

background-color:red\9;      /*all ie*/

background-color:yellow;    /*ie8*/

+background-color:pink;        /*ie7*/

_background-color:orange;       /*ie6*/    } 

:root #test { background-color:purple\9; }  /*ie9*/

@media all and (min-width:0px){ #test {background-color:black;} }  /*opera*/

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

20. 請用 div+css 寫出左側(cè)固定(width:200px;),右側(cè)自適應頁面寬度.

<style>
    .container{
        padding: 10px;
        border: 1px solid #ffa200;
        margin-bottom: 40px;
    }
    .container .left{
        background-color: #4b83e2;
    }
    .container .right {
        background-color: #ff3b30;
    }
    /*左浮動固定寬度，右邊盒子overflow:hidden觸發(fā)bfc，使其不與浮動盒子區(qū)域重疊，因此會重新計算寬度。*/
    .container1 .left{
        float: left;
        width: 200px;
    }
    .container1 .right {
        overflow: hidden;
    }
    /*清除浮動*/
    .container1:after{
        content: "";
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    /*左浮動固定寬度,右邊margin-left*/
    .container2 .left{
        float: left;
        width: 200px;
    }
    .container2 .right{
        margin-left: 200px;
    }
    /*清除浮動*/
    .container2:after{
        content: "";
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    /*左邊絕對定位，右邊設置margin-left，缺點：當左邊高于右邊時，左邊會超出父元素，需要使用js補救。*/
    .container3 {
        position: relative;
    }
    .container3 .left{
        position: absolute;
        left: 10px;
        top: 10px;
        width: 200px;
    }
    .container3 .right{
        margin-left: 200px;
    }
    /*雙display:inline-block*/
    .container4{
        font-size: 0;
    }
    .container4 .left{
        width: 200px;
    }
    .container4 .left,.container4 .right{
        display: inline-block;
        font-size: 16px;
        vertical-align: top;
    }
    .container4 .right{
        width: calc(100% - 200px);
    }
    /*table*/
    .container5{
        display: table;
    }
    .container5 .left,.container5 .right{
        display: table-cell;
    }
    /*flex*/
    .container6{
        display: flex;
    }
    .container6 .right{
        flex-grow: 1;
    }
    /*grid*/
    .container7{
        display: grid;
    }
    .container7 .left{
        grid-column:1;
    }   
    .container7 .right{
        grid-column:2;
    }
</style>
<div class="container container1">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
<div class="container container2">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
<div class="container container3">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
<div class="container container4">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
<div class="container container5">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
<div class="container container6">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
<div class="container container7">
    <div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
    <div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>

21. display：inline-block 什么時候會顯示間隙？

間隙產(chǎn)生的原因是因為，換行或空格會占據(jù)一定的位置

? 解決：夫元素設置：

font-size:0;
letter-spaceing:-4px;

22. overflow 有哪些屬性值？

  • visible: 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
  • hidden: 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
  • scroll: 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
  • auto: 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
  • inherit: 規(guī)定應該從父元素繼承 overflow 屬性的值。

23. css 去掉 iPhone、iPad 默認按鈕樣式

input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

24. CSS 樣式初始化的目的

  • CSS初始化是指重設瀏覽器的樣式。不同的瀏覽器默認的樣式可能不盡相同，所以開發(fā)時的第一件事可能就是如何把它們統(tǒng)一。如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面差異。

  • 每次新開發(fā)網(wǎng)站或新網(wǎng)頁時候通過初始化CSS樣式的屬性，為我們將用到的CSS或html標簽更加方便準確，使得我們開發(fā)網(wǎng)頁內(nèi)容時更加方便簡潔，同時減少CSS代碼量，節(jié)約網(wǎng)頁下載時間。

  • 初始化CSS為我們節(jié)約網(wǎng)頁代碼，節(jié)約網(wǎng)頁下載時間；還會使得我們開發(fā)網(wǎng)頁內(nèi)容時更加方便簡潔，不用考慮很多。

  • 如果不初始化，整個頁面做完會很糟糕，重復的css樣式很多。

25. 用 div+css 網(wǎng)站布局的好處

  • div+css布局比table布局節(jié)省頁面代碼，代碼結(jié)構(gòu)也更清晰明了.

  • div+css的頁面對搜索引擎支持好，而且速度更快了,能夠比table 更加快速的顯示網(wǎng)站內(nèi)容.

  • div+css布局使網(wǎng)站版面布局修改變的更簡單,因為版面代碼都寫在獨立的css文件里修改起來方便多了,不象table要在頁面中修改很多信息.

26. 用表格 table 對 seo 的影響

待補充。。。。。。

27. console 有哪些常用方法?（答出三種并說出它的用法即可，想考察你有沒有工作經(jīng)驗）

  • console.log(): 最常用的
  • console.dir(): 將傳入對象的屬性，包括子對象的屬性以列表形式輸出
  • console.assert(): 接收至少兩個參數(shù)，第一個參數(shù)的值或返回值為false的時候，將會在控制臺上輸出后續(xù)參數(shù)的值。
  • console.count(): 輸出執(zhí)行到該行的次數(shù)，可選參數(shù) label 可以輸出在次數(shù)之前
  • console.error():用于輸出錯誤信息，用法和常見的console.log一樣，不同點在于輸出內(nèi)容會標記為錯誤的樣式，便于分辨。

28. 為什么利用多個域名來存儲網(wǎng)站資源會更有效？

  • CDN 緩存更方便

  • 突破瀏覽器并發(fā)限制

  • 節(jié)約 cookie 帶寬

  • 節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應速度

  • 防止不必要的安全問題

29. 網(wǎng)頁的重繪與重排以及重構(gòu)

  • 重繪: 瀏覽器加載文檔

    瀏覽器從下載文檔到顯示頁面的過程是個復雜的過程，這里包含了重繪和重排。各家瀏覽器引擎的工作原理略有差別，但也有一定規(guī)則。簡單講，通常在文檔初次加載時，瀏覽器引擎會解析HTML文檔來構(gòu)建DOM樹，之后根據(jù)DOM元素的幾何屬性構(gòu)建一棵用于渲染的樹。渲染樹的每個節(jié)點都有大小和邊距等屬性，類似于盒子模型（由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）。當渲染樹構(gòu)建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據(jù)渲染樹節(jié)點的樣式屬性繪制出頁面。由于瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計算才能確定好其在渲染樹中節(jié)點的屬性，通常要花3倍于同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因。

    重繪是一個 **元素外觀 ** 的改變所觸發(fā)的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。重繪不會帶來重新布局，并不一定伴隨重排。

  • 重排（回流）: 重排是更明顯的一種改變，可以理解為渲染樹需要重新計算。

    • DOM元素的幾何屬性變化

      當DOM元素的幾何屬性變化時，渲染樹中的相關(guān)節(jié)點就會失效，瀏覽器會根據(jù)DOM元素的變化重新構(gòu)建渲染樹中失效的節(jié)點.
      重排一定會引起瀏覽器的重繪，一個元素的重排通常會帶來一系列的反應，甚至觸發(fā)整個文檔的重排和重繪，性能代價是高昂的。

    • DOM樹的結(jié)構(gòu)變化
      當DOM樹的結(jié)構(gòu)變化時，例如節(jié)點的增減、移動等，也會觸發(fā)重排。瀏覽器引擎布局的過程，類似于樹的前序遍歷，是一個從上到下從左到右的過程。通常在這個過程中，當前元素不會再影響其前面已經(jīng)遍歷過的元素。所以，如果在body最前面插入一個元素，會導致整個文檔的重新渲染，而在其后插入一個元素，則不會影響到前面的元素。

    • 獲取某些屬性
      瀏覽器引擎可能會針對重排做了優(yōu)化。比如Opera，它會等到有足夠數(shù)量的變化發(fā)生，或者等到一定的時間，或者等一個線程結(jié)束，再一起處理，這樣就只發(fā)生一次重排。但除了渲染樹的直接變化，當獲取一些屬性時，瀏覽器為取得正確的值也會觸發(fā)重排。這樣就使得瀏覽器的優(yōu)化失效了。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用這些值時應進行緩存。

    • 其他
      改變?yōu)g覽器窗口大小、改變一些元素的樣式

  • 重構(gòu): 一般指項目重構(gòu)，換框架等等

30. 談談以前端角度出發(fā)做好 SEO 需要考慮什么

  • 經(jīng)常更新網(wǎng)站內(nèi)容，優(yōu)質(zhì)的原創(chuàng)內(nèi)容越多，搜索引擎收錄越多，權(quán)重越高。
  • 優(yōu)化meta標簽的關(guān)鍵詞，啟用Keep-Alive；為每個頁面單獨命名，要符合頁面內(nèi)容。
  • 優(yōu)化網(wǎng)站、代碼結(jié)構(gòu)，簡潔，清晰，結(jié)構(gòu)鮮明的代碼容易被搜索引擎爬取。
  • 確保每個頁面都可以通過至少一個文本鏈接到達
  • 重要的內(nèi)容，應該能從首頁或者網(wǎng)站結(jié)構(gòu)中比較淺的層次訪問到
  • 使用文字而不是flash、圖片、Javascript等來顯示重要的內(nèi)容或鏈接，為圖片的alt添加文本。
  • ......

31. rgba()和 opacity 的透明效果有什么不同？

  • opacity 是屬性，rgba()是函數(shù)，計算之后是個屬性值；
  • opacity 作用于元素和元素的內(nèi)容，內(nèi)容會繼承元素的透明度，取值0-1；
  • rgba() 一般作為背景色 background-color 或者顏色 color 的屬性值，透明度由其中的 alpha 值生效，取值0-1；

32. Sass、LESS 是什么？大家為什么要使用他們？

CSS 預處理器。他是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。

  • 結(jié)構(gòu)清晰，便于擴展。

  • 可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。

  • 可以輕松實現(xiàn)多重繼承。

  • 完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。

33. 行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？樣式之間的轉(zhuǎn)換

  • 行內(nèi)元素: a、b、span、img、input、strong、select、label、em、button、textarea
  • 塊級元素:div、ul、li、dl、dt、dd、p、h1-h6
  • 空元素:即系沒有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img

強制轉(zhuǎn)換成塊元素
display：block
強制轉(zhuǎn)換成行內(nèi)元素
display：inline
強制轉(zhuǎn)換成行內(nèi)擴張元素
display：inline-block

34. CSS3 新特性有哪些？

  • 彈性布局 flex
  • 柵格布局 grid
  • 選擇器
  • 過渡
  • 動畫
  • 媒體查詢

35. CSS3 選擇器有哪些？

  • 屬性選擇器
  • 結(jié)構(gòu)性偽類選擇器—root: 等同于<html>元素
  • 結(jié)構(gòu)性偽類選擇器—not: 可以選擇除某個元素之外的所有元素
  • 結(jié)構(gòu)性偽類選擇器—empty:用來選擇沒有任何內(nèi)容的元素
  • 結(jié)構(gòu)性偽類選擇器—target: 用來匹配文檔(頁面)的url的某個標志符的目標元素。
  • 結(jié)構(gòu)性偽類選擇器—first-child: 選擇元素中的第一個子元素
  • 結(jié)構(gòu)性偽類選擇器—last-child:選擇元素的最后一個子元素
  • 結(jié)構(gòu)性偽類選擇器—nth-child(n):定位某個父元素的一個或多個特定的子元素
  • only-child選擇器:選擇父元素中只有一個子元素，而且只有唯一的一個子元素。
  • ......

36. 移動端優(yōu)先使用彈性布局（flex）來解決布局問題，請列出彈性布局的相關(guān)屬性，并說明屬性用途

  • flex-direction

flex-direction屬性決定主軸的方向（即項目的排列方向）。

  • row（默認值）：主軸為水平方向，起點在左端。

  • row-reverse：主軸為水平方向，起點在右端。

  • column：主軸為垂直方向，起點在上沿。

  • column-reverse：主軸為垂直方向，起點在下沿。

  • flex-wrap

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

  • nowrap（默認）：不換行。
  • wrap：換行，第一行在上方。
  • wrap-reverse：換行，第一行在下方。
  • flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

  • justify-content:

justify-content屬性定義了項目在主軸上的對齊方式。

  • flex-start（默認值）：左對齊
  • flex-end：右對齊
  • center： 居中
  • space-between：兩端對齊，項目之間的間隔都相等。
  • space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
  • align-items

align-items屬性定義項目在交叉軸上如何對齊。

  • flex-start：交叉軸的起點對齊。
  • flex-end：交叉軸的終點對齊。
  • center：交叉軸的中點對齊。
  • baseline: 項目的第一行文字的基線對齊。
  • stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
  • align-content

? align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

  • flex-start：與交叉軸的起點對齊。
  • flex-end：與交叉軸的終點對齊。
  • center：與交叉軸的中點對齊。
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
  • space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（默認值）：軸線占滿整個交叉軸。

37. CSS3 的兼容問題怎么處理？

-moz-border-radius: 2px; /* Firefox */
-webkit-border-radius: 2px; /* Safari 和 Chrome */
border-radius: 2px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */
-o-border-radius:2px;
-khtml-border-radius: 2px;   /* 針對Konqueror瀏覽器 */

38. CSS3 動畫和 JS 動畫主要的不同點是什么？

  • CSS動畫

優(yōu)點:

瀏覽器可以對動畫進行優(yōu)化。

瀏覽器使用與 requestAnimationFrame 類似的機制，requestAnimationFrame比起setTimeout，setInterval設置動畫的優(yōu)勢主要是:

  • requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成,并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率,一般來說,這個頻率為每秒60幀。
  • 在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和內(nèi)存使用量。

強制使用硬件加速 （通過 GPU 來提高動畫性能）

缺點:

  • 運行過程控制較弱,無法附加事件綁定回調(diào)函數(shù)。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉(zhuǎn)動畫，不能變換時間尺度，不能在特定的位置添加回調(diào)函數(shù)或是綁定回放事件,無進度報告
  • 代碼冗長。想用 CSS 實現(xiàn)稍微復雜一點動畫,最后CSS代碼都會變得非常笨重。
  • JS動畫

優(yōu)點:

  • JavaScript動畫控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
  • JS動畫的效果比css3動畫豐富,有些動畫效果，比如曲線運動,沖擊閃爍,視差滾動效果，只有JavaScript動畫才能完成
  • CSS3有兼容性問題，而JS大多時候沒有兼容性問題

缺點:

  • JavaScript在瀏覽器的主線程中運行，而主線程中還有其它需要運行的JavaScript腳本、樣式計算、布局、繪制任務等,對其干擾導致線程可能出現(xiàn)阻塞，從而造成丟幀的情況。
  • JS動畫代碼的復雜度高于CSS動畫

39. 請用 Css 寫一個簡單的幻燈片效果頁面

.......

40. Rem 的使用方法

  • 簡易JS

    (function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
            if (docEl.clientWidth > 750) {
                docEl.style.fontSize = "100px";
                doc.getElementById("app").style.width = "750px";
            } else {
                var width = docEl.clientWidth / 7.5;
                docEl.style.fontSize = width + "px";
                doc.getElementById("app").style.width = "auto";
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

  • postcss-px2rem

41. 用 css 畫一個三角形，圓，橢圓？

......

42. html5 有哪些新特性、移除了那些元素？如何處理 HTML5 新標簽的瀏覽器兼容問題？

html5 新增

  • 語義化標簽
  • 增強型表單
  • 新增視頻 <video> 和音頻 <audio> 標簽
  • Canvas繪圖
  • SVG繪圖
  • 地理定位
  • 拖放API
  • Web Worker
  • Web Storage
  • WebSocket

新元素

  • header
  • footer
  • nav
  • section
  • time
  • aside
  • ......

移除的元素

  • 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
  • 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；

43. HTML5 中新增的操作 DOM 的方法？

  • document.querySelector(" ");　　 單個元素獲取
  • document.querySelectorAll(" "); 　　多個元素獲取
  • 加：
box.classList.add("active");
  • 刪：
box.classList.remove("active");
  • 判斷：
box.classList.contains("active")； >>>>返回值是一個布爾值，true or false
  • 切換：
box.classList.toggle("active");

44. image 和 canvas 在處理圖片的時候有什么區(qū)別？

......

45. HTML5 中的本地存儲概念是什么？生命周期有多長？

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用于本地存儲一個會話中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀，因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。

cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容