面試經(jīng)典合集(html+css)

一、瀏覽器頁面有哪三層構(gòu)成,分別是什么,作用是什么?

構(gòu)成:結(jié)構(gòu)層、表示層、行為層
分別是:HTML、CSS、JavaScript
作用:HTML實(shí)現(xiàn)頁面結(jié)構(gòu),CSS完成頁面的表現(xiàn)與風(fēng)格,JavaScript實(shí)現(xiàn)一些客戶端的功能與業(yè)務(wù)。

二、HTML5的優(yōu)點(diǎn)與缺點(diǎn)?

優(yōu)點(diǎn):

a、網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一、HTML5本身是由W3C推薦出來的。
b、多設(shè)備、跨平臺(tái)
c、即時(shí)更新。
d、提高可用性和改進(jìn)用戶的友好體驗(yàn);
e、有幾個(gè)新的標(biāo)簽,這將有助于開發(fā)人員定義重要的內(nèi)容;
f、可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻);
g、可以很好的替代Flash和Silverlight;
h、涉及到網(wǎng)站的抓取和索引的時(shí)候,對(duì)于SEO很友好;
i、被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。

缺點(diǎn):

a、安全:像之前Firefox4的web socket和透明代理的實(shí)現(xiàn)存在嚴(yán)重的安全問題,同時(shí)web storage、web socket 這樣的功能很容易被黑客利用,來盜取用戶的信息和資料。
b、完善性:許多特性各瀏覽器的支持程度也不一樣。
c、技術(shù)門檻:HTML5簡化開發(fā)者工作的同時(shí)代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí),像web worker、web socket、web storage 等新特性,后臺(tái)甚至瀏覽器原理的知識(shí),機(jī)遇的同時(shí)也是巨大的挑戰(zhàn)
d、性能:某些平臺(tái)上的引擎問題導(dǎo)致HTML5性能低下。
e、瀏覽器兼容性:最大缺點(diǎn),IE9以下瀏覽器幾乎全軍覆沒。

三、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分?它們有何意義?

(1)、 聲明位于文檔中的最前面,處于標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔類型 規(guī)范來解析這個(gè)文檔。
(2)、嚴(yán)格模式的排版和JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
(3)、在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
(4)、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

四、你做的網(wǎng)頁在哪些流覽器測(cè)試過,這些瀏覽器的內(nèi)核分別是什么?

a、 IE: trident 內(nèi)核
b、 Firefox : gecko 內(nèi)核
c、 Safari:webkit 內(nèi)核
d、 Opera: 以前是 presto 內(nèi)核, Opera 現(xiàn)已改用 Google Chrome 的 Blink 內(nèi)核
e、 Chrome:Blink( 基于 webkit , Google 與 Opera Software 共同開發(fā) )

五、說說你對(duì)HTML5認(rèn)識(shí)?(是什么,為什么)

是什么:

HTML5指的是包括 HTML 、 CSS 和 JavaScript 在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)( Plug-in-Based Rich Internet Application , RIA ),例如: AdobeFlash 、 Microsoft Silverlight 與 Oracle JavaFX 的需求,并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。 HTML5 是 HTML 最新版本, 2014 年 10 月由萬維網(wǎng)聯(lián)盟( W3C )完成標(biāo)準(zhǔn)制定。目標(biāo)是替換 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn),以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候,使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到匹配當(dāng)代的網(wǎng)絡(luò)需求。

為什么:

HTML4陳舊不能滿足日益發(fā)展的互聯(lián)網(wǎng)需要,特別是移動(dòng)互聯(lián)網(wǎng)。為了增強(qiáng)瀏覽器功能 Flash 被廣泛使用,但安全與穩(wěn)定堪憂,不適合在移動(dòng)端使用(耗電、觸摸、不開放)。
HTML5增強(qiáng)了瀏覽器的原生功能,符合 HTML5 規(guī)范的瀏覽器功能將更加強(qiáng)大,減少了 Web 應(yīng)用對(duì)插件的依賴,讓用戶體驗(yàn)更好,讓開發(fā)更加方便,另外 W3C 從推出 HTML4.0 到 5.0 之間共經(jīng)歷了 17 年, HTML 的變化很小,這并不符合一個(gè)好產(chǎn)品的演進(jìn)規(guī)則。

六、HTML5空元素有哪些?

br 換行
hr 分隔線
<input> 文本框等
<img> 圖片
<link> <meta>

七、請(qǐng)你描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 請(qǐng)求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù),就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
sessionStorage、 localStorage 、 cookie 都是在瀏覽器端存儲(chǔ)的數(shù)據(jù),其中 sessionStorage 的概念很特別,引入了一個(gè)“瀏覽器窗口”的概念。 sessionStorage 是在同源的同窗口(或 tab )中,始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉,即使刷新頁面或進(jìn)入同源另一頁面,數(shù)據(jù)仍然存在。關(guān)閉窗口后, sessionStorage 即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口,即使是同一頁面, sessionStorage 對(duì)象也是不同的
cookies會(huì)發(fā)送到服務(wù)器端。其余兩個(gè)不會(huì)。

八、說說你對(duì)HTML語義化的理解?

什么是 HTML 語義化?

<基本上都是圍繞著幾個(gè)主要的標(biāo)簽,像標(biāo)題( H1~H6 )、列表( li )、強(qiáng)調(diào)( strong em )等等 >
根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標(biāo)簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼,
同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。

為什么要語義化?

為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu) : 為了裸奔時(shí)好看;
用戶體驗(yàn):例如title、 alt 用于解釋名詞或解釋圖片信息、 label 標(biāo)簽的活用;
有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重;
方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以意義的方式來渲染網(wǎng)頁;
便于團(tuán)隊(duì)開發(fā)和維護(hù),語義化更具可讀性,是下一步網(wǎng)頁的重要?jiǎng)酉颍裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn),可以減少差異化。

語義化標(biāo)簽

<header></header>
<footer></footer>
<nav></nav>
<section></section>

九、link和@import的區(qū)別?

/*XML/HTML代碼*/
<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />
/*XML/HTML代碼*/
<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>

兩者都是外部引用CSS的方式,但是存在一定的區(qū)別:
區(qū)別1: link 是 XHTML 標(biāo)簽,除了加載 CSS 外,還可以定義 RSS 等其他事務(wù); @import 屬于 CSS 范疇,只能加載 CSS 。
區(qū)別2: link 引用 CSS 時(shí),在頁面載入時(shí)同時(shí)加載; @import 需要頁面網(wǎng)頁完全載入以后加載。
區(qū)別3: link 是 XHTML 標(biāo)簽,無兼容問題; @import 是在 CSS2.1 提出的,低版本的瀏覽器不支持。
區(qū)別4: link 支持使用 Javascript 控制 DOM 去改變樣式;而 @import 不支持。

十、說說超鏈接target屬性的取值和作用?

target這個(gè)屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式。
它的參數(shù)值主要有:
a、 _blank :在新瀏覽器窗口中打開鏈接文件
b、 _parent :將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的,則在瀏覽器全屏窗口中載入鏈接的文件,就象 _self 參數(shù)一。
c、 _self :在同一框架或窗口中打開所鏈接的文檔。此參數(shù)為默認(rèn)值,通常不用指定。
d、 _top :在當(dāng)前的整個(gè)瀏覽器窗口中打開所鏈接的文檔,因而會(huì)刪除所有框架。

十一、介紹一下你對(duì)瀏覽器內(nèi)核的理解?

主要分成兩部分:渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎:負(fù)責(zé)取得網(wǎng)頁的內(nèi)容(HTML、 XML 、圖像等等)、整理訊息(例如加入 CSS 等),以及計(jì)算網(wǎng)頁的顯示方式,然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同,所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則:解析和執(zhí)行 javascript 來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來 JS 引擎越來越獨(dú)立,內(nèi)核就傾向于只指渲染引擎。

十二、常見的瀏覽器內(nèi)核有哪些?

1.Trident內(nèi)核: IE,MaxThon,TT,The World,360, 搜狗瀏覽器等。 [ 又稱 MSHTML]
2.Gecko內(nèi)核: Netscape6 及以上版本, FF,MozillaSuite/SeaMonkey 等
3.Presto內(nèi)核: Opera7 及以上。 [Opera 內(nèi)核原為: Presto ,現(xiàn)為: Blink;]
4.Webkit內(nèi)核: Safari,Chrome 等。 [ Chrome 的: Blink ( WebKit 的分支) ]

十三、Label的作用是什么,是怎么用的?

label標(biāo)簽來定義表單控制間的關(guān)系 , 當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>

注意:label的for屬性值要與后面對(duì)應(yīng)的input標(biāo)簽id屬性值相同
<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>

十四、如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域?

a、 map+area 或者 svg
b、 border-radius
c、純 js 實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等

十五、title與h3的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別?

title屬性沒有明確意義只表示是個(gè)標(biāo)題, H1 則表示層次明確的標(biāo)題,對(duì)頁面信息的抓取也有很大的影響;
strong是標(biāo)明重點(diǎn)內(nèi)容,有語氣加強(qiáng)的含義,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí): <strong> 會(huì)重讀,而 <B> 是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體, em 表示強(qiáng)調(diào)的文本;

十六、HTML5標(biāo)簽的作用?(用途)

a、使Web頁面的內(nèi)容更加有序和規(guī)范
b、使搜索引擎更加容易按照HTML5規(guī)則識(shí)別出有效的內(nèi)容
c、使Web頁面更接近于一種數(shù)據(jù)字段和表

十七、談?wù)勀銓?duì)canvas的理解?

canvas是HTML5中新增一個(gè)HTML5標(biāo)簽與操作canvas的javascript API,它可以實(shí)現(xiàn)在網(wǎng)頁中完成動(dòng)態(tài)的2D與3D圖像技術(shù)。標(biāo)記和 SVG以及 VML 之間的一個(gè)重要的不同是,有一個(gè)基于 JavaScript 的繪圖 API,而 SVG 和 VML 使用一個(gè) XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成,但功能明顯要弱一些。 canvas可以完成動(dòng)畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。

十八、表單提交中Get和Post方式的區(qū)別?

(1)、 get 是從服務(wù)器上獲取數(shù)據(jù), post 是向服務(wù)器傳送數(shù)據(jù)。
(2)、 get 是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的 ACTION 屬性所指的 URL 中,值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng),在 URL 中可以看到。 post 是通過 HTTP post 機(jī)制,將表單內(nèi)各個(gè)字段與其內(nèi)容放置在 HTML HEADER 內(nèi)一起傳送到 ACTION 屬性所指的 URL 地址 , 用戶看不到這個(gè)過程。
(3)、對(duì)于 get 方式,服務(wù)器端用 Request.QueryString 獲取變量的值,對(duì)于 post 方式,服務(wù)器端用 Request.Form 獲取提交的數(shù)據(jù)。
(4)、 get 傳送的數(shù)據(jù)量較小,不能大于 2KB 。 post 傳送的數(shù)據(jù)量較大,一般被默認(rèn)為不受限制。但理論上, IIS4 中最大量為 80KB , IIS5 中為 100KB 。
(5)、 get 安全性低, post 安全性較高。

十九、HTML5 廢棄了哪些 HTML4 標(biāo)簽?

HTML5 廢棄了一些過時(shí)的,不合理的HTML 標(biāo)簽:
· frame
· frameset
· noframe
· applet
· big
· center
· basefront

二十、HTML5 存儲(chǔ)類型有什么區(qū)別?

HTML5 能夠本地存儲(chǔ)數(shù)據(jù),在之前都是使用 cookies 使用的。 HTML5 提供了下面兩種本地存儲(chǔ)方案:
localStorage 用于持久化的本地存儲(chǔ),數(shù)據(jù)永遠(yuǎn)不會(huì)過期,關(guān)閉瀏覽器也不會(huì)丟失。
sessionStorage 同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ),僅僅是會(huì)話級(jí)別的存儲(chǔ)。

二十一、列出display的值并說明他們的作用?

none: 隱藏對(duì)象。與visibility屬性的hidden值不同,其不為被隱藏的對(duì)象保留其物理空間
inline: 指定對(duì)象為內(nèi)聯(lián)元素。
block: 指定對(duì)象為塊元素。
list-item: 指定對(duì)象為列表項(xiàng)目。
inline-block: 指定對(duì)象為內(nèi)聯(lián)塊元素。(CSS2)
table: 指定對(duì)象作為塊元素級(jí)的表格。類同于html標(biāo)簽<table>(CSS2)

二十二、如何居中div, 如何居中一個(gè)浮動(dòng)元素?

(1)、非浮動(dòng)元素居中:可以設(shè)置 margin:0 auto 令其居中, 定位 ,父級(jí)元素text-align:center等等
(2)、浮動(dòng)元素居中:
方法一:設(shè)置當(dāng)前div的寬度,然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時(shí)左浮動(dòng),然后父元素相對(duì)左移動(dòng)50%,再然后子元素相對(duì)左移動(dòng)-50%。
方法三:position定位等等。

二十三、請(qǐng)列舉幾種清除浮動(dòng)的方法(至少兩種)?

(1)、父級(jí)div定義 height
原理:父級(jí)div手動(dòng)定義height,就解決了父級(jí)div無法自動(dòng)獲取到高度的問題。
優(yōu)點(diǎn):簡單、代碼少、容易掌握
缺點(diǎn):只適合高度固定的布局,要給出精確的高度,如果高度和父級(jí)div不一樣時(shí),會(huì)產(chǎn)生問題
建議:不推薦使用,只建議高度固定的布局時(shí)使用
(2)、結(jié)尾處加空div標(biāo)簽 clear:both
原理:添加一個(gè)空div,利用css提高的clear:both清除浮動(dòng),讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn):簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn):不少初學(xué)者不理解原理;如果頁面浮動(dòng)布局多,就要增加很多空div,讓人感覺很不好
建議:不推薦使用,但此方法是以前主要使用的一種清除浮動(dòng)方法
(3)、父級(jí)div定義 偽類:after 和 zoom
原理:IE8以上和非IE瀏覽器才支持:after,原理和方法2有點(diǎn)類似,zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題
優(yōu)點(diǎn):瀏覽器支持好、不容易出現(xiàn)怪問題(目前:大型網(wǎng)站都有使用,如:騰迅,網(wǎng)易,新浪等等)
缺點(diǎn):代碼多、不少初學(xué)者不理解原理,要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議:推薦使用,建議定義公共類,以減少CSS代碼。
(4)、父級(jí)div定義 overflow:hidden
原理:必須定義width或zoom:1,同時(shí)不能定義height,使用overflow:hidden時(shí),瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn):簡單、代碼少、瀏覽器支持好
缺點(diǎn):不能和position配合使用,因?yàn)槌龅某叽绲臅?huì)被隱藏。
建議:只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
(5)、父級(jí)div定義 overflow:auto
原理:必須定義width或zoom:1,同時(shí)不能定義height,使用overflow:auto時(shí),瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn):簡單、代碼少、瀏覽器支持好
缺點(diǎn):內(nèi)部寬高超過父級(jí)div時(shí),會(huì)出現(xiàn)滾動(dòng)條。
建議:不推薦使用,如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。

二十四、有哪些性能優(yōu)化的方法?

回答一:

(1)、減少http請(qǐng)求次數(shù):CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網(wǎng)頁Gzip,CDN托管,data緩存 ,圖片服務(wù)器。
(2)、前端模板 JS+數(shù)據(jù),減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi),前端用變量保存AJAX請(qǐng)求結(jié)果,每次操作本地變量,不用請(qǐng)求,減少請(qǐng)求次數(shù)
(3)、用innerHTML代替DOM操作,減少DOM操作次數(shù),優(yōu)化javascript性能。
(4)、當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
(5)、少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。
(6)、避免使用CSS Expression(css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。
(7)、圖片預(yù)加載,將樣式表放在頂部,將腳本放在底部 加上時(shí)間戳。

回答二:

(1)、減少HTTP請(qǐng)求次數(shù)
(2)、使用CDN
(3)、避免空的src和href
(4)、為文件頭指定Expires
(5)、使用gzip壓縮內(nèi)容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避 免使用CSS表達(dá)式
(9)、將CSS和JS放到外部文件中
(10)、避免跳轉(zhuǎn)
(11)、可緩存的AJAX
(12)、使用GET來完成AJAX請(qǐng)求

二十五、為什么要初始化CSS樣式?

因?yàn)闉g覽器的兼容問題,不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的,如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
當(dāng)然,初始化樣式會(huì)對(duì)SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
最簡單的初始化方法就是: * {padding: 0; margin: 0;} (不建議)

二十六、解釋下浮動(dòng)和它的工作原理?清除浮動(dòng)的技巧?

浮動(dòng)元素脫離文檔流,不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。
(1)、使用空標(biāo)簽清除浮動(dòng)。
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
(2)、使用overflow。
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after偽對(duì)象清除浮動(dòng)。
該方法只適用于非IE瀏覽器。

二十七、瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?

所謂的標(biāo)準(zhǔn)模式是指,瀏覽器按W3C標(biāo)準(zhǔn)解析執(zhí)行代碼;怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼,因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣,所以我們稱之為怪異模式。瀏覽器解析時(shí)到底使用標(biāo)準(zhǔn)模式還是怪異模式,與你網(wǎng)頁中的DTD聲明直接相關(guān),DTD聲明定義了標(biāo)準(zhǔn)文檔的類型(標(biāo)準(zhǔn)模式解析)文檔類型,會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示,忽略DTD聲明,將使網(wǎng)頁進(jìn)入怪異模式(quirks mode)。

二十八、說說隱藏元素的方式有哪些?

a、使用CSS的display:none,不會(huì)占有原來的位置
b、使用CSS的visibility:hidden,會(huì)占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden",不會(huì)占有原來的位置

二十九、如何解決多個(gè)元素重疊問題?

使用z-index屬性可以設(shè)置元素的層疊順序

z-index屬性
語法:z-index: auto | <integer>
默認(rèn)值:auto
適用于:定位元素。即定義了position為非static的元素
取值:
auto: 元素在當(dāng)前層疊上下文中的層疊級(jí)別是0。元素不會(huì)創(chuàng)建新的局部層疊上下文,除非它是根元素。
整數(shù): 用整數(shù)值來定義堆疊級(jí)別??梢詾樨?fù)值。 說明:
檢索或設(shè)置對(duì)象的層疊順序。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別,并確定該元素是否創(chuàng)建新的局部層疊上下文。
當(dāng)多個(gè)元素層疊在一起時(shí),數(shù)字大者將顯示在上面。

三十、overflow :hidden是否形成新的塊級(jí)格式化上下文?

會(huì)形成,觸發(fā)BFC的條件有:

  • float的值不為none。
  • overflow的值不為visible。
  • display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。
  • position的值不為relative 和static。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。