1.h5、css3、es6 的新特性分別是哪些

h5：語(yǔ)義化標(biāo)簽、視頻、音頻，獲取DOM節(jié)點(diǎn)的方式（querySelect）等。

css3：動(dòng)畫(huà)、過(guò)渡、陰影、border、平移、旋轉(zhuǎn)等。

es6： const、let、解構(gòu)賦值、promise、箭頭函數(shù)、擴(kuò)展運(yùn)算符、對(duì)象簡(jiǎn)寫(xiě)等。

2.CSS的盒子模型？

① 所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

②類型：怪異盒模型、標(biāo)準(zhǔn)盒子模型

③兩種盒模型的區(qū)別：

標(biāo)準(zhǔn)盒模型中width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content的高度。

標(biāo)準(zhǔn)盒模型下盒子的大小=content+border+padding 。

怪異盒模型中的width指的是內(nèi)容、邊框、內(nèi)邊距總的寬度（content+border+padding）；height指的是內(nèi)容、邊框、內(nèi)邊距總的高度。
? 怪異盒模型下盒子的大小=width（content+border+padding）?+?margin

④設(shè)置盒模型的方式：

box-sizing:content-box 標(biāo)準(zhǔn)盒模型

box-sizing:border-box 怪異盒模型

3.Margin 負(fù)值的問(wèn)題

對(duì) margin 的top、left、right、bottom 設(shè)置負(fù)值，有何效果？

margin-top 和 margin-left 為負(fù)值，元素會(huì)向上、向左移動(dòng)；

margin-right 為負(fù)值，右側(cè)元素會(huì)左移，但自身不會(huì)受影響；

margin-bottom 為負(fù)值，下方元素上移，但自身不會(huì)受影響。

4.margin的傳遞問(wèn)題以及它的解決方式

Margin傳遞問(wèn)題:

頁(yè)面上有一個(gè)父元素和子元素，當(dāng)子元素不設(shè)置margin-top時(shí)，二者都會(huì)位于瀏覽器頂部顯示；當(dāng)子元素設(shè)置margin-top時(shí)，父元素會(huì)緊挨子元素，并且父元素會(huì)被子元素拽下來(lái)，這就是margin傳遞現(xiàn)象。

解決方法：

方式1：父容器加上邊框

方式2：子元素設(shè)置浮動(dòng)

方式3：父元素設(shè)置浮動(dòng)

方式4：子元素設(shè)置絕對(duì)定位（子絕父相）

5.button 和 div 的區(qū)別：

div的默認(rèn)box-sizing屬性為content-box，而button默認(rèn)為border-box，因此div會(huì)比button看上去大一些

6.元素的隱藏：

使用display：none； 可以將元素隱藏，元素將徹底放棄位置，如同沒(méi)有寫(xiě)它的標(biāo)簽一樣；

使用visibility（可見(jiàn)度）：hidden； 也可以將元素隱藏，但是元素不放棄自己的位置。

7.脫離標(biāo)準(zhǔn)文檔流的方法：

浮動(dòng)、絕對(duì)定位、固定定位

8.堆疊順序z-index 屬性：

z-index屬性是一個(gè)沒(méi)有單位的正整數(shù)，數(shù)值大的能夠壓住數(shù)值小的。

9.圖片與下方盒子之間有縫隙解決方法

①將圖片設(shè)置為block；

②設(shè)置圖片的豎直對(duì)齊方式 v-align：bottom ；

③設(shè)置父級(jí)div的 font-size：0 ；

④設(shè)置外層的div 的 line-height：0 ；

10.利用CSS樣式制作三角形

width:0;height:0;border:70px solid transparent;border-left-color:red;

11.瀏覽器漸變需要加私有前綴

用來(lái)對(duì)實(shí)驗(yàn)性質(zhì)的CSS的屬性加以標(biāo)識(shí)

Chrome：-webkit- ；

Firefox：-moz- ；

IE、edge： -ms- ；

歐朋：-o- ；

12. 手寫(xiě)清除浮動(dòng)

.clearfix:after {Content: ’’;Display: table ;Clear: both ;}.clearfix {Zoom:1; // 兼容IE 低版本}

總結(jié)

以上是生活随笔為你收集整理的HTML与CSS面试题汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。