好程序員web前端分享HTML5常見面試題集錦三

程序員web前端分享HTML5常見面試題集錦三

1、用線性漸變實(shí)現(xiàn)如下圖的斜線？

答案：<div></div>

<style>

div{margin:50px auto; width:100px;height:100px;border:1px solid #333;

background:linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);

}

</style>

2、用CSS實(shí)現(xiàn)單行居中顯示文字，多行居左顯示效果，如圖：

答案:<div><p>只有一行時居中顯示文字，多行居左顯示多行居左顯示</p></div>

<style>

body,p{ margin: 0; padding: 0;}

div{text-align: center;width: 400px;height: 400px; background: #ddd; margin: 30px auto; font-size: 20px;}

p{display: inline-block;text-align: left;}

</style>

3、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

答案：標(biāo)準(zhǔn)的盒模型是基于 doctype 正確書寫的情況下，并且是高于 IE6 的瀏覽器才會有的。

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin

4、什么是外邊距重疊？重疊的結(jié)果是什么？

答案：在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

折疊結(jié)果遵循下列計(jì)算規(guī)則：

1）兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。

2）兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。

3）兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。

5、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

答案：一個用于頁面布局的全新CSS3功能，F(xiàn)lexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。

較為復(fù)雜的布局還可以通過嵌套一個伸縮容器（flex container）來實(shí)現(xiàn)。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱"項(xiàng)目"。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應(yīng)。在布局上有了比以前更加靈活的空間。

、HTML5 有哪些新特性、移除了哪些元素？

有以下新特性：

圖像 Canvas
多媒體 video、audio
本地存儲 localStorage、sessionStorage
語義化更好的內(nèi)容元素 article、header、footer、nav、section
表單控件 date、time、canlendar、url、search
新的技術(shù) webworker、websocket、Geolocation

移除的元素：

純表現(xiàn)的元素 u、big、center、strike、tt、font、basefont
框架集 frame、frameset、noframes

2、如何區(qū)分 HTML 和 HTML5?

簡化的語法：HTML5 簡化了很多細(xì)微的語法，例如 doctype 的聲明，你只需要寫 <!doctype html> 就行了。
HTML5 <canvas> 標(biāo)簽替代 Flash。
HTML5 新增 <header> 和 <footer> 標(biāo)簽。
HTML5 新增 <section> 和 <article> 標(biāo)簽
HTML5 新增 <menu> 和 <figure> 標(biāo)簽
HTML5 新增 <audio> 和 <video> 標(biāo)簽
全新的表單，HTML5 對 <form> 和 <forminput> 標(biāo)簽進(jìn)行了大量修改，添加了很多新的屬性，也修改了很多屬性。

程序員web前端分享HTML5常見面試題集錦四

1、為什么要初始化CSS樣式？

答案：因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

2、浮動元素引起的問題？

答案：a. 父元素的高度無法被撐開，影響與父元素同級的元素

b. 與浮動元素同級的非浮動元素會跟隨其后

c. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)

3、line-height三種賦值方式有何區(qū)別？（帶單位、純數(shù)字、百分比）？

答案：帶單位：px不用計(jì)算，em則會使元素以其父元素font-size值為參考來計(jì)算自己的行高

純數(shù)字：把比例傳遞給后代，例如父級行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px

百分比：將計(jì)算后的值傳遞給后代

4、:link、:visited、:hover、:active的執(zhí)行順序是怎么樣的？

答案：L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來概括

5、css屬性content有什么作用？有什么應(yīng)用？

答案：css的content屬性專門應(yīng)用在 before/after 偽元素上，用于來插入生成內(nèi)容，可以配合自定義字體顯示特殊符號。。

6、文字超出顯示為省略號？

答案：//單行：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

7、HTML5有哪些新增的表單元素？

答案：datalist datetime output date month week time color number range email url

8、用純CSS創(chuàng)建一個三角形的原理是什么？

答案：首先，需要把元素的寬度、高度設(shè)為0。然后設(shè)置邊框樣式。

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

9、什么時候可以觸發(fā)BFC？

答案：根元素，即html

float的值不為none（默認(rèn)）

overflow的值不為visible（默認(rèn)）

display的值為inline-block、table-cell、table-caption

position的值為absolute或fixed

10、style標(biāo)簽寫在body后與body前有什么區(qū)別？

答案：頁面加載自上而下當(dāng)然是先加載樣式。

寫在body標(biāo)簽后由于瀏覽器以逐行方式對HTML文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題）

在線咨詢

上一篇：React入門：從入口文件到組件化的奧秘
下一篇：CSS?？贾R點(diǎn)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

好程序員web前端分享HTML5常見面試題集錦三

您的項(xiàng)目需求