HTML和CSS面试题—整理过的48题，关注收藏，持续更新
1:主流瀏覽器的內核分別是什么？
IE：trident內核?[‘traidnt ]
Firefox：gecko 內核?[?ɡek??]
Safari：webkit 內核
Chrome,Opera：Blink內核(基于webkit) ?
2:每個HTML文件開頭都有<!DOCTYPE html>，它的作用是什么
<!DOCTYPE html>聲明位于文檔中的最前面的位置，此標簽告知瀏覽器文檔使用哪種HTML或XHTMl規范（重點：告訴瀏覽器按照何種規范解析頁面）
嚴格模式下：頁面排版及 JS 解析是以該瀏覽器支持的最高標準來執行
混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向后兼容
<!DOCTYPE??html>不存在或格式不正確會導致文檔以混雜模式呈現
3: div+css的布局較table布局有什么優點？
（1）div+css布局的好處：
a.符合W3C標準，結構、樣式和行為分離，代碼結構清晰明了，帶來足夠好的可維護性。
b.布局精準，網站版面布局修改簡單。
c.加快了頁面的加載速度（最重要的）。
d.用只包含結構化內容的HTML代替嵌套的標簽，提高另外搜索引擎對網頁的搜索效率。
a.容易上手。
b.可以形成復雜的變化，簡單快速。
c.表現上更加“嚴謹”，在不同瀏覽器中都能得到很好的兼容。
4:img的alt屬性與title屬性有何異同
alt屬性:在圖片無法加載的時候才會顯示的其值,
title屬性:在圖片正常加載鼠標劃上去顯示的值
5:strong標簽與em標簽的異同
strong:粗體強調標簽，強調，表示內容的重要性
em:斜體強調標簽，更強烈強調，表示內容的強調點
6:漸進增強和優雅降級之間的不同
漸進增強（progressive enhancement）?[pr?u'ɡresiv][?n?hɑ?nsm?nt]
：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級(?graceful degradation)[?ɡre?sfl ,deɡr??de??n]：一開始就構建完整的功能，然后再針對低版本瀏覽器進
行兼容。
漸進增強的觀點關注內容本身
優雅降級的觀點更關注主流瀏覽器，一些特定的瀏覽器，除修復較大的錯誤外，其他的差異將會被直接忽略
7:為什么利用多個域名來存儲網站資源
8:網頁標準和標準制定機構的意義
網頁標準的制定，使得web發展的更健康，提高網站的易用性。
a、開發者遵循統一的標準，降低了開發難度和開發成本
b、SEO優化網頁也會更加方便，不會因為濫用代碼出現各種bug和安全問題。
9:簡述一下 src與 href 的區別
src 用于替換當前元素，href 用于在當前文檔和引用資源之間確立聯系。
Src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在的位置。例如：js腳本，img圖片，frame等。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，這也是為什么將js 腳本放在底部而不是頭部。
href 是 Hypertext Reference 的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用 link 方式來加載 css，而不是使用@import 方式。
10:網頁制作會用的圖片格式有哪些
?Png,jpeg,gif,svg,webp
webp格式：谷歌開發的新的圖片格式，體積小，質量好，但兼容性略差
11:微格式，前端中怎么考慮微格式
微格式（Microformats）是建立在已有的、被廣泛采用的標準基礎之上的一組簡單的、開放的數據格式
作用：
a、在捉取Web內容時，能夠更為準確地識別內容塊的語義；
b、對內容進行操作，包括提供訪問、校對，還可以將其轉化成其他的相關格式，提供給外部程序和Web服務使用。
應用例子：
當用手機瀏覽某公司的網站時，手機瀏覽器識別出了網頁中的 hCard 信息。這個 hCard 標記了該公司的多種聯絡方式，手機瀏覽器很聰明地提示我“是否保存到通訊錄”，于是我很經松地保存了我所需要的信息
12:從用戶刷新網頁開始，一次 js 請求一般情況下有哪些地方會有緩存處理？
DNS緩存，CDN緩存，客戶端(瀏覽器緩存)，服務器緩存
DNS緩存是指在正常訪問ip之后，系統會將這個ip存儲起來，當再次訪問的時候，系統就會把本地的DNS緩存提取顯示，等于是加速了網址的解析。
CDN是Content Delivery NetWork的簡稱，即‘內容分發網絡'的意思，主要用于分地域的集群服務器，當用戶瀏覽網站請求數據時，CDN會選擇一個離用戶最近的CDN邊緣節點來響應用戶的請求。
服務器緩存就是存放頻繁訪問內容的服務器。
13：一個頁面中有大量的圖片（大型電商網站），加載很慢，你有哪些辦法優化這些圖片的加載，給建
a.?圖片懶加載，滾動到相應位置才加載圖片。
b.?圖片預加載，如果為幻燈片、相冊等，將當前展示圖片的前一張和后一張優先下載。
c.?使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。
d.?如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
14.你如何理解 HTML 結構的語義化？
A:在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:裸奔時也好看；
B:用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
C:有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
D:方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備），更好的方式來渲染網頁；
E:便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
15:以前端角度出發，有哪些注意事項有利于SEO?
(1).維護網站，提高內容質量，保持更新
(2).網站結構布局優化：盡量簡單、開門見山，提倡扁平化結構。
(3).控制首頁鏈接數量,要適中
(4).導航優化：
a:盡量采用文字方式
b:搭配圖片導航，但是圖片代碼一定要進行優化，img標簽必須添加“alt”和“title”屬性
c:應該加上面包屑導航
(5).控制頁面的大小:減少http請求，提高網站的加載速度
(6).適量的關鍵詞和網頁描述
title標題，強調重點即可，
meta keywords標簽：關鍵詞，列重要關鍵字即可
meta description標簽：網頁描述，要高度概括
body中的標簽：盡量讓代碼語義化
a標簽：頁內鏈接，要加 “title” 屬性加以說明
img應使用 “alt” 屬性加以說明
strong、em標簽 : 需要強調時使用
巧妙利用CSS布局
謹慎使用 display：none
保留文字效果
16:對DOM設置CSS樣式的方式有哪些？
A:外部樣式表，引入一個外部 css 文件
B:內部樣式表，將 css 代碼放在 <head> 標簽內部，<style>里?
C:內聯樣式，將 css 樣式直接定義在 HTML 元素內部
17:css選擇器有哪些，選擇器的權重優先級
選擇器類型
(1)、ID #id
(2)、class .class
(3)、標簽 p
(4)、通用 *
(5)、屬性 [type="text"]
(6)、偽類 a: hover
(7)、偽元素 li: nth - child
(8)、子選擇器（ul < li） 、相鄰選擇器（h1 + p）、后代選擇器（li a）
權重計算規則
一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。
!important 比 內聯優先級高
(1).?第一等：代表內聯樣式，如: style=””，權值為1000。
(2).?第二等：代表ID選擇器，如：#content，權值為0100。
(3).?第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
(4).?第四等：代表標簽和偽元素選擇器，如div p，權值為0001。
(5).?通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
(6).?繼承的樣式沒有權值。
(7).相同權重
優先級就近原則，樣式定義最近者為準,載入樣式以最后載入的定位為準;
繼承性
可繼承： font-size font-family color;
不可繼承 ：border padding margin width height ;
CSS3 新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。
18:css中，對DOM元素設置不顯示的方式
display:none；隱藏，并且不占位 ，寬高各種屬性值，都‘丟失’
visibility：hidden;隱藏，占位，僅是視覺上‘看不見’
width:0;height:0;overflow:hidden;這只是通過設置元素的大小使元素不顯示
19:超鏈接訪問過后，hover樣式就不出現的問題是什么，如何解決
問題是：a標簽的四種狀態，排序出問題了。
正確排序：L-V-H-A
love hate原則，即l（link）ov（visited）e h（hover）a（active）te。
a:link 普通的、未被訪問的鏈接
a:visited 用戶已訪問的鏈接
a:hover 鼠標指針位于鏈接的上方
a:active 鏈接被點擊的時刻
20:?什么是 Css Hack？ie6,7,8 的 hack 分別是什么？
針對不同的瀏覽器寫不同的 CSS code 的過程，就是 CSS hack。
21. 行內元素和塊級元素的具體區別是什么？行內元素的 padding 和 margin 可設置嗎？
(1):塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
(2):內聯元素(inline)特性：
寬度(width)、高度(height)、內外邊距的上下都不可設置，內外邊距的左右可設置，其大小就是里面文字或圖片的大小。
(3):inline-block 元素
擁有內在尺寸，可設置高寬,但不會自動換行
<input> 、<img> 、<button> 、<texterea> 、<label>。
22:什么是外邊距重疊？重疊的結果是什么？
外邊距重疊就是 margin-collapse。
折疊外邊距 :在 CSS 當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。
折疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
23:rgba()和opacity區別
opacity作用于元素，以及元素內的所有內容的透明度(元素會繼承其屬性)
而rgba()只作用于元素的顏色或其背景色(設置rgba透明的元素的子元素不會繼承透明效果)
24. css 中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？
垂直方向：line-height
水平方向：letter-spacing 增加或減少字符間距。
可用于消除 inline-block 元素間的換行符空格間隙問題。
25:如何垂直居中一個浮動元素
方法一：.child{
? height: 100px;
position: absolute;//父元素相對定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二：.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三：child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
26:如何垂直居中一個img?？
方法一：<img>的容器
.img-container{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法二：方法二
.img-container{
display: flex;
justify-content: center;
align-items: center;}
27. px 和 em 的區別。
px 和 em 都是長度單位，區別是，px 的值是固定的，指定是多少就是多少，計算比較容易。em 得值不是固定的，并且 em 會繼承父級元素的字體大小。
瀏覽器的默認字體高都是 16px。所以未經調整的瀏覽器都符合: 1em=16px。
28:Sass、LESS 是什么？大家為什么要使用他們？
是 CSS 預處理器。他是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成
CSS。
優勢：
結構清晰，便于擴展。
減少了重復代碼的編寫，增加了變量等的功能
可以方便的屏蔽瀏覽器私有語法差異。
可以輕松實現多重繼承。
完全兼容CSS代碼，可以方便地應用到老項目中。less只是在CSS語法上做了擴展，所以老的CSS代碼也可以與less代碼一同編譯。
29:CSS 中 link 和@import 的區別是：
Link 屬于 html 標簽，而@import 是 CSS 中提供的
在頁面加載的時候，link 會同時被加載，而@import 引用的 CSS 會在頁面加載完成后才會加載引用的 CSS ,@import 只有在 ie5 以上才可以被識別，
?link 是 html 標簽，不存在瀏覽器兼容性問題
Link 引入樣式的權重大于@import 的引用（@import 是將引用的樣式導入到當前的頁面中）
30:簡介盒子模型：
CSS 的盒子模型有兩種：IE 盒子模型、標準的 W3C 盒子模型模型
盒模型：內容、內邊距、外邊距（一般不計入盒子實際寬度）、邊框
0417 第二次提問
31:為什么要初始化樣式？
由于瀏覽器兼容的問題，不同的瀏覽器對標簽的默認樣式值不同，若不初始化會造成不同
瀏覽器之間的顯示差異
但是初始化 CSS 會對搜索引擎優化造成小影響
32. BFC 是什么?
BFC（塊級格式化上下文），頁面上的一個隔離的獨立容器，一個創建了新的 BFC 的盒子是獨立布局的，盒子內元素的布
局不會影響盒子外面的元素。在同一個 BFC 中的兩個相鄰的盒子在垂直方向發生 margin
重疊的問題
創建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
33.HTML 與 XHTML——二者有什么區別？
1. 所有的標記都必須要有一個相應的結束標記
2. 所有標簽的元素和屬性的名字都必須使用小寫
3. 所有的 XML 標記都必須合理嵌套
4. 所有的屬性必須用引號 "" 括起來
5. 把所有 < 和 & 特殊符號用編碼表示
6. 給所有屬性賦一個值
7. 不要在注釋內容中使用 "--"
8. 圖片必須有說明文字
34.html 常見兼容性問題？
瀏覽器默認的margin和padding不同
解決方案：加一個全局的 *{margin:0;padding:0;} 來統一
35.對 WEB 標準以及 W3C 的理解與認識
(1).標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、
(2):使用外 鏈 css 和 js 腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、
(3):更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性。
36:常見行內元素有哪些?塊級元素有哪些?CSS 的盒模型?
CSS 規范規定，每個元素都有 display 屬性，確定該元素的類型，每個元素都有默認
的 display 值
塊級元素(默認值是‘block’)?： div ?p??h1-h6?form ul hr table
行內元素(默認值是‘inline’)?: a??b??br??i??span input?img?link?select ?small??strong
Css 盒模型:內容，border ,margin，padding
37:前端頁面的基本構成，分別是?作用是?
結構層??Html
表示層??CSS
行為層 j?s
38:列出 display 的值，并說明他們的作用
display：
none：取消樣式
block：塊級元素
inline：行內元素
inline-block：行內塊元素
normal：默認樣式
flex：彈性布局
39:列出position的值，注意他們的定位參照原點
*absolute
生成絕對定位的元素，相對于離最近的包含塊元素進行定位。
*fixed
生成絕對定位的元素，相對于瀏覽器窗口進行定位。
* relative
生成相對定位的元素，相對于其正常位置進行定位。
* static 默認值。沒有定位，元素出現在正常的流中
* inherit 規定從父元素繼承 position 屬性的值。
40:i標簽與em標簽和b標簽與strong標簽的區別
(1):b標簽和strong標簽都可以對文本進行加粗
(2):i標簽和em標簽同樣也可以對文本進行傾斜
但是strong和em有強調的作用，有利于SEO（搜索引擎優化
所以日常工作中建議用strong和em標簽。
41:瀏覽器標準模式和怪異模式?
??定義
標準模式頁面按照HTML,CSS的定義渲染，
怪異模式就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計,并未嚴格遵循W3C標準而產生的一種頁面渲染模式。
??區別：
兩者盒子模型 渲染模式等的不同
| 三者之間的區別對比： | |||
| 特性 | Cookie | localStorage | sessionStorage |
| 特性 | 一般由服務器生成，可設置失效時間。如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效 | 除非被清除，否則永久保存 | 僅在當前會話下有效，關閉頁面或瀏覽器后被清除 |
| 存放數據大小 | 4K左右 | 一般為5MB | |
| 與服務器端通信 | 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信 | |
| 易用性 | 需要程序員自己封裝，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 | |
相同點：都存儲在客戶端
不同點：
1.存儲大小
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2.有效時間
localStorage ? ?存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage ?數據在當前瀏覽器窗口關閉后自動刪除。
cookie ? ? s? ? ?設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
3. 數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
sessionStorage 用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會
話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此 sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲。而 localStorage 用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
43:IE 的雙邊距 BUG：塊級元素 float 后設置橫向 margin，ie6 顯示的margin 比設置的較大。
解決：加入_display：inline
44:從瀏覽器地址欄輸入url到顯示頁面的步驟 ??
?????瀏覽器根據請求的 URL 交給 DNS 進行域名解析，找到真實 IP 地址，向服務器發起請求；
??????服務器交給后臺處理完成后返回數據，瀏覽器接收文件（HTML、CSS、JS、images等）；
??????瀏覽器對加載到的資源（HTML、CSS、JS、images等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
??????載入解析到的資源文件，渲染頁面，完成。
46:寫出常用的css傳統布局
????表格布局,
????浮動布局，
???????浮動布局主要采用float和clear兩個屬性來構建。
????定位布局 ?
????????position屬性來實現元素的絕對定位和相對定位。
?流體布局的方式
47:簡單描述一下什么是flex布局及常用屬性說明
???????1、 ?flex-direction：排列方向
????????????flex-direction: row | row-reverse | column | column-reverse
???????2、flex-wrap如果一條軸線排不下，如何換行
????????????flex-wrap: nowrap | wrap | wrap-reverse
???????3、flex-flow屬性（上述兩個組合）
????????????flex-flow: flex-direction, flex-wrap
????????????flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
???????4、justify-content屬性（在主軸上的對齊方式）橫向
????????????justify-content: flex-start | flex-end | center | space-between | space-around
???????5、align-items屬性（在交叉軸上如何對齊）縱向
????????align-items: flex-start | flex-end | center | baseline | stretch
???????6、flex-grow屬性（放大比例，默認為0，即如果存在剩余空間，也不放大）
????????flex-grow: 默認為0 ?
???????7、flex-shrink屬性（縮小比例，默認為1，即如果空間不足，則縮小）
????????flex-shrink: 默認為1
???????8、flex-basis屬性（在分配多余空間之前，項目占據的主軸空間）
????????flex-basis: | auto
???????9、flex屬性
????????flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選
????????flex: auto; （1 1 auto）
????????flex: none; （0 0 auto）
48:如何初始化css的樣式
????????css reset
????????normalize css
????????*{}
總結
以上是生活随笔為你收集整理的HTML和CSS面试题—整理过的48题，关注收藏，持续更新的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python barrier_Pytho
- 下一篇： WBE前端笔记1：HTML中一些不熟悉的