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