天津地鐵建設(shè)網(wǎng)站網(wǎng)站鏈接提交
在又到了金三銀四的招聘季,不管你是剛?cè)胄械男“?#xff0c;亦或是混跡職場的老鳥,還在為面試前端工程師時不知道面試官要問什么怎么回答而苦惱嗎?為了幫助你獲得面試官的青睞,順利通過面試,跳槽進(jìn)入大廠,走上人生巔峰,整理了一些前端面試,希望對在面試中或?qū)W習(xí)工作中的你有所幫助!
01、CSS3的新特性
盒子陰影:(box-shadow);
邊框:邊框圓角 (border-radius)、邊框背景圖片 (border-image);
IE(怪異)盒模型:(box-sizing:border-box);
背景:背景圖片尺寸(background-size)、規(guī)定背景圖片的位置相對于什么位置來定位(background-origin)、背景的繪制區(qū)域(background-clip);
彈性布局:flex;
漸變:線性漸變(linear-gradient)、徑向漸變(radial-gradient);
過渡效果:transition;
2D轉(zhuǎn)換:transform:移動translate(x,y)、旋轉(zhuǎn)rotate(x,y)、翻轉(zhuǎn)skew(x,y)、縮放scale(x,y);
3D轉(zhuǎn)換:translate3d(tx,ty,tz)、rotate3d(x, y, z, a)、scale3d(sx, sy, sz)、perspective(l)等;
自定義動畫:animation;
媒體查詢:@media。
02、H5的新增特性
新增語義化標(biāo)簽:header、nav、article、section、aside、footer;
新增數(shù)據(jù)存儲方法:sessionStorage、localStorage;
新增視頻 video 標(biāo)簽和音頻 audio 標(biāo)簽;
新增繪畫canvas和svg元素;
新增input標(biāo)簽的type屬性類型:date、time、month、email、url、search、range、color、number;
新增表單input元素驗(yàn)證:required、pattern;
新增獲取用戶地理位置定位API:Geolocation。
03、簡述盒模型
盒模型分為兩種:標(biāo)準(zhǔn)盒模型(W3C盒模型)和怪異盒模型(IE盒模型)。
盒模型是依次由margin(外邊距)+ border(邊框)+ padding(內(nèi)邊距)+ content(內(nèi)容)組成的。
標(biāo)準(zhǔn)盒模型的width指的是內(nèi)容content的寬度,height指的是內(nèi)容content的高度;怪異盒模型(IE盒模型)的width指的是content(內(nèi)容) + padding(內(nèi)邊距)+ border(邊框)的總寬度,height也是同樣。
在IE瀏覽器的IE6、IE7、IE8版本中會觸發(fā)怪異模式(IE盒模型),在其它瀏覽器中默認(rèn)為W3C標(biāo)準(zhǔn)模式。標(biāo)準(zhǔn)(W3C)盒模型的CSS屬性為box-sizing: content-box,怪異(IE)盒模型的CSS屬性為box-sizing: border-box。
04、link標(biāo)簽和import的區(qū)別
link 屬于 html 標(biāo)簽,可以加載css文件,還可以定義RSS、rel連接屬性等;而@import 是 css 提供的,是有導(dǎo)入樣式的作用。
頁面被加載時,link 會同時被加載,而@import 引用的 css 會等到頁面加載結(jié)束后加載。
link 是 html 標(biāo)簽,因此沒有兼容性,而@import 只有 IE5 以上才能識別。
link 方式樣式的權(quán)重高于@import 的。
link可以使用js動態(tài)創(chuàng)建并導(dǎo)入,@import則不行。
05、水平垂直居中的實(shí)現(xiàn)方式
CSS中實(shí)現(xiàn)元素水平垂直居中的幾種方法總結(jié),總有一種適合你!
06、CSS中的BFC
一文弄懂CSS中的BFC
07、塊元素和行元素區(qū)別
行內(nèi)元素會在一行上顯示,當(dāng)此行上剩余的空間無法承載當(dāng)前的行內(nèi)元素時,此行內(nèi)元素才會在新的一行上顯示,每個元素是水平排列的;每個塊級元素各占據(jù)一行,每個元素時豎直方向排列的。
塊級元素可以包含行內(nèi)元素和塊級元素,寬度默認(rèn)100%,即和瀏覽器同寬。行內(nèi)元素不能包含塊級元素。
行內(nèi)元素與塊級元素屬性的不同,主要是盒模型屬性上。
常見的塊元素有div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、header、section、article、footer等。
常見的行元素以及行內(nèi)塊元素有span、img、a、label、input、em、i、textarea、select、strong等。
轉(zhuǎn)為塊元素:display: block;
轉(zhuǎn)為行元素:display: inline;
轉(zhuǎn)為行內(nèi)塊元素:display: inline-block。
08、高度塌陷和清除浮動
高度塌陷:
標(biāo)準(zhǔn)的文檔流,在不給父元素設(shè)置高度的情況下,父元素的高度是由子元素?fù)伍_的,子元素多高,父元素就多高,但當(dāng)子元素設(shè)置浮動后,子元素會脫離標(biāo)準(zhǔn)文檔流,從而導(dǎo)致不占位置,父元素的高度就會變?yōu)?0,這種現(xiàn)象,叫做高度塌陷。
高度塌陷大部分都是由子元素脫標(biāo)不占位置導(dǎo)致的父元素高度的丟失,一般在子元素浮動后會產(chǎn)生高度塌陷。所以,解決的辦法可以使用清除浮動的方式來解決。
清除浮動的方式:
浮動的元素會脫離標(biāo)準(zhǔn)文檔流,脫離標(biāo)準(zhǔn)文檔流的元素在文檔流中不占位置。
給浮動元素的父元素設(shè)置高度;
給父元素設(shè)置overflow: hidden屬性;
在父元素內(nèi)部的最后面添加一個塊級元素的空標(biāo)簽,并給這個空標(biāo)簽設(shè)置clear: both;
單偽元素:
.clearfix::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; zoom: 1;
}
雙偽元素(推薦使用):
.clearfix::before, .clearfix::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; zoom: 1;
}
09、position的屬性及作用
position 幾個屬性一般都要配合"left"、“top”、"right"以及 “bottom” 屬性使用。
相對定位relative:如果對一個元素進(jìn)行相對定位,它將出現(xiàn)在它所在的位置上。然后,可以通過設(shè)置垂直或水平位置,讓這個元素“相對于”它的起點(diǎn)進(jìn)行移動。在使用相對定位時,無論是否進(jìn)行移動,元素仍然占據(jù)原來的空間。因此,移動元素會導(dǎo)致它覆蓋其它元素。
絕對定位absolute:絕對定位的元素的位置相對于最近的已定位父元素,如果元素沒有已定位的父元素,那么它的位置相對于。absolute 定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。absolute 定位的元素和其他元素重疊。
固定定位fixed:元素的位置相對于瀏覽器窗口是固定位置,即使窗口是滾動的它也不會移動。Fixed 定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。Fixed 定位的元素和其他元素重疊。
粘性定位sticky:元素先按照普通文檔流定位,然后相對于該元素在流中的 flow root(BFC)和 containing block(最近的塊級祖先元素)定位。而后,元素定位表現(xiàn)為在跨越特定閾值前為相對定位,之后為固定定位。
默認(rèn)定位static:默認(rèn)值。沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
inherit:規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
10、實(shí)現(xiàn)元素隱藏的方法
設(shè)置透明度為0:opacity: 0;
元素顯示設(shè)為無:display: none(在網(wǎng)頁中不占位置);
隱藏元素:visibility: hidden(網(wǎng)頁中依然占據(jù)位置);
讓元素縮小到0:transform: scale(0);
設(shè)置元素的層級:z-index: 9999,元素需要設(shè)置position: absolute。
11、css reset的作用
重置瀏覽器的css默認(rèn)屬性,因?yàn)楦鱾€品牌瀏覽器的默認(rèn)樣式不用,使用css reset重置,使在各個瀏覽器上樣式統(tǒng)一。
12、css sprites(css精靈)的作用
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中,它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當(dāng)訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了,減輕服務(wù)器對圖片的請求數(shù)量。原理就是利用CSS的background-image、background- repeat、background-position的組合進(jìn)行背景定位,background-position可以用數(shù)字精確的定位出背景圖片的位置。
13、css有哪些選擇器,優(yōu)先級如何
主要的選擇器有:id、class、標(biāo)簽、偽元素、偽類、屬性選擇、通配符、繼承等。
同一元素引用了多個樣式時,排在后面的樣式屬性的優(yōu)先級高;
樣式選擇器的類型不同時,優(yōu)先級順序?yàn)?#xff1a;id 選擇器 > class 選擇器 > 標(biāo)簽選擇器;
標(biāo)簽之間存在層級包含關(guān)系時,后代元素會繼承祖先元素的樣式。如果后代元素定義了與祖先元素相同的樣式,則祖先元素的相同的樣式屬性會被覆蓋。繼承的樣式的優(yōu)先級比較低,至少比標(biāo)簽選擇器的優(yōu)先級低;
帶有!important 標(biāo)記的樣式屬性的優(yōu)先級最高;
樣式表的來源不同時,優(yōu)先級順序?yàn)?#xff1a;內(nèi)聯(lián)樣式> 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶
自定義樣式 > 瀏覽器默認(rèn)樣式。
優(yōu)先級:!important > 行內(nèi)樣式 > id > class > 標(biāo)簽/偽類/屬性選擇 > 偽元素 > 繼承 >通配符
14、transition和animation的區(qū)別
transition 是過渡效果,只有兩個狀態(tài):起始狀態(tài)和結(jié)束狀態(tài),主要強(qiáng)調(diào)樣式值的變化過程,不可設(shè)置中間狀態(tài);需要某個事件的觸發(fā)(例如:鼠標(biāo)經(jīng)過、點(diǎn)擊等)。
animation 是動畫,也叫關(guān)鍵幀,可以設(shè)置多個關(guān)鍵幀;可以再任意一個中間幀設(shè)置狀態(tài);不需要依附事件的觸發(fā)就可以自動執(zhí)行。
15、css去掉iPhone的默認(rèn)按鈕樣式
input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;
}
textarea { -webkit-appearance: none;
}
16、Doctype的作用
DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明,它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器,它應(yīng)該使用什么樣的文檔類型定義(DTD)來解析文檔。只有確定了一個正確的文檔類型,超文本標(biāo)記語言或可擴(kuò)展超文本標(biāo)記語言中的標(biāo)簽和層疊樣式表才能生效,甚至對JavaScript腳本都會有所影響。
標(biāo)簽完整格式為<!DOCTYPE>。
17、嚴(yán)格模式和混雜模式的區(qū)別
標(biāo)準(zhǔn)模式是指瀏覽器按照W3C的標(biāo)準(zhǔn)對文檔進(jìn)行解析和渲染;怪異模式瀏覽器按照舊有的、非標(biāo)準(zhǔn)的實(shí)現(xiàn)方式對文檔進(jìn)行解析和渲染。瀏覽器解析時到底使用標(biāo)準(zhǔn)模式還是怪異模式,與你網(wǎng)頁中的文檔類型定義(DTD)聲明直接相關(guān),文檔類型定義(DTD)聲明定義了標(biāo)準(zhǔn)文檔的類型(標(biāo)準(zhǔn)模式解析)文檔類型,會使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示,忽略文檔類型定義(DTD)聲明,將使網(wǎng)頁進(jìn)入怪異模式。
為什么會產(chǎn)生這兩種模式呢?
現(xiàn)代的瀏覽一般都有兩種渲染模式:標(biāo)準(zhǔn)模式(Standard Mode)和怪異模式(Quirks Mode)。在標(biāo)準(zhǔn)模式下,瀏覽器按照HTML和CSS標(biāo)準(zhǔn)對文檔進(jìn)行解析和渲染;而在怪異模式下瀏覽器則按照舊有的非標(biāo)準(zhǔn)的實(shí)現(xiàn)方式對文檔進(jìn)行解析和渲染,對于舊有的網(wǎng)頁,瀏覽器就會啟動怪異模式能夠使得舊網(wǎng)頁正常顯示。
觸發(fā)嚴(yán)格模式:
<!-- HTML 4.01 嚴(yán)格型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML 1.0 嚴(yán)格型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
觸發(fā)混雜模式
<!-- HTML 4.01 過渡型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!-- HTML 4.01 框架集型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"><!-- XHTML 1.0 過渡型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- XHTML 1.0 框架集型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
18、雙邊距重疊問題(外邊距折疊)
多個相鄰(兄弟或者父子關(guān)系)普通流的塊元素垂直方向 marigin 會重疊。
折疊的結(jié)果為:
兩個相鄰的外邊距都是正數(shù)時,折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負(fù)數(shù)時,折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負(fù)時,折疊結(jié)果是兩者的相加的和。
19、清除元素模式轉(zhuǎn)化為行內(nèi)塊后出現(xiàn)的縫隙
元素的模式轉(zhuǎn)換為行內(nèi)塊后,行內(nèi)塊元素之間會產(chǎn)生縫隙,往往是因?yàn)榇a換行導(dǎo)致的。
給父元素設(shè)置 font-size:0;給行內(nèi)塊元素重新設(shè)置 font-size 大小(推薦);
給行內(nèi)塊元素設(shè)置左外邊距或右外邊距,并將值設(shè)置為負(fù)值;
使用 display:table;和 display:table-cell;屬性代替 display:inline-block;
在父元素上設(shè)置 display:flex;屬性(推薦);
手動刪除行內(nèi)塊之間的換行。
20、rgba()和opacity的透明效果區(qū)別
rgba()和 opacity 都能實(shí)現(xiàn)透明效果,但最大的不同是 opacity 作用于元素,以及元素內(nèi)的所有內(nèi)容的透明度;rgba() 只作用于元素的顏色或其背景色。(設(shè)置 rgba 透明的元素的子元素不會繼承透明效果!)
總結(jié)
感謝您的閱讀!本篇文章就先總結(jié)到這里,近期會一直更新web前端的面試,包括html+css、js、es6、vue等專題內(nèi)容,希望這些前端知識對您面試或者工作學(xué)習(xí)中有所幫助提升。想要文章,您可以移步到wxgzh【前端胡說】的菜單欄【優(yōu)質(zhì)文章】中觀看閱讀。
原文鏈接:2023前端面試題集(含答案)之HTML+CSS篇(一)