html+css面試題合集（一）

時(shí)間：2023-10-02 03:54:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-02 03:54:01 來源：網(wǎng)站運(yùn)營

html+css面試題合集（一）：XHTML與HTML的有何異同？

HTML是一種基于WEB的網(wǎng)絡(luò)設(shè)計(jì)語言，XHTML是基于XML的置標(biāo)語言，XHTML可以認(rèn)為是XML版的HTML，所以它的語法比較嚴(yán)謹(jǐn)：元素必須關(guān)閉，嵌套必須正確，大小寫區(qū)分，屬性值必須用雙引號，id屬性代替name屬性




介紹一下CSS的盒子模型？彈性盒子模型是什么？

盒子模型由content+padding+border+margin組成，分為標(biāo)準(zhǔn)盒子和IE盒子，標(biāo)準(zhǔn)盒子的width指content，IE盒子的width包括content，padding，border

彈性盒子(Flexible Box 或 Flexbox)，是一種用于在頁面上布置元素的布局模式，使得當(dāng)頁面布局必須適應(yīng)不同的屏幕尺寸和不同的顯示設(shè)備時(shí)，元素可預(yù)測地運(yùn)行。

*Doctype的作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

聲明在文檔的第一行，位于html的前面，用于告知瀏覽器的解析器以什么樣的文檔標(biāo)準(zhǔn)來解析這個文檔，如果沒有聲明文檔就會以兼容模式呈現(xiàn)

標(biāo)準(zhǔn)模式的排版和JS都是以瀏覽器支持的最高的標(biāo)準(zhǔn)運(yùn)行

兼容模式頁面以寬松向后兼容的方式顯示，模仿老式瀏覽器，防止站點(diǎn)無法工作




行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

常見的空元素：br hr img input link meta




介紹一下你對瀏覽器內(nèi)核的理解？

瀏覽器內(nèi)核分為渲染引擎和JS引擎




常見的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等

Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]

Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支]




cssSprite是什么 ？有什么優(yōu)缺點(diǎn)？

精靈圖是一種網(wǎng)頁圖片的應(yīng)用技術(shù)，它把背景圖片都整合到一張圖片上，再利用background-position進(jìn)行圖片定位，優(yōu)點(diǎn)是有效的減少了http請求，減少了圖片的字節(jié)，缺點(diǎn)是合成比較麻煩，需要精準(zhǔn)定位




前端頁面有哪三層構(gòu)成？ 分別是什么？ 作用是什么？

結(jié)構(gòu)層由HTML負(fù)責(zé)，負(fù)責(zé)搭建頁面的結(jié)構(gòu)

表示層由CSS負(fù)責(zé)，負(fù)責(zé)頁面的樣式

行為層由JavaScript負(fù)責(zé)，負(fù)責(zé)頁面的交互




css選擇符有哪些？優(yōu)先級算法如何計(jì)算？

標(biāo)簽選擇符，類選擇符，ID選擇符，偽類選擇符，相鄰選擇符，子代選擇符，后代選擇符，通配符選擇符，屬性選擇符

優(yōu)先級：

就近原則，下面覆蓋上面

!important＞內(nèi)聯(lián)＞ID＞類＞標(biāo)簽




HTML中div與span區(qū)別

div是塊級元素，獨(dú)自占一行，寬度默認(rèn)是占滿父級的寬度，可以設(shè)置寬高

span是行內(nèi)元素，排列在一行里，寬度是內(nèi)容的寬度，不能設(shè)置寬高




css實(shí)現(xiàn)垂直水平居中

定位，top和left設(shè)置50%，再通過transform的translate(-50%, -50%)設(shè)置實(shí)現(xiàn)垂直水平居中

定位，top和left設(shè)置50%，再通過margin-top和margin-left自己寬高的一半設(shè)置實(shí)現(xiàn)垂直水平居中

定位，top，bottom，left，right都設(shè)置為0，再通過margin設(shè)置為auto實(shí)現(xiàn)垂直水平居中

flex布局，先設(shè)置justify-content為center實(shí)現(xiàn)水平居中，再設(shè)置align-items為center實(shí)現(xiàn)垂直居中

table布局，設(shè)置父元素display為table-cell，再設(shè)置vertical-align為middle實(shí)現(xiàn)垂直居中，把自己display設(shè)置為inline-block，父級設(shè)置text-align為center實(shí)現(xiàn)水平居中




alt和title分別表示什么含義以及具體應(yīng)用體現(xiàn)

alt是代替圖片的文字，圖片不能顯示時(shí)會顯示alt，title是鼠標(biāo)指上去時(shí)的解釋文字