HTML+CSS(47-72)

問答題47 /72

常見瀏覽器兼容性問題與解決方案浪默？

參考答案

(1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下侄泽，各自的margin 和padding差異較大滑进。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題经窖，幾乎所有的CSS文件開頭都會用通配符來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。
(2)瀏覽器兼容問題二：塊屬性標(biāo)簽float后彭沼，又有橫行的margin情況下缔逛，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?br> 碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了姓惑，而div就是一個(gè)典型的塊屬性標(biāo)簽褐奴，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)于毙，這就是一個(gè)必然會碰到的兼容性問題敦冬。
(3)瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6望众，IE7匪补，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制烂翰，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度夯缺。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度甘耿。即使你的標(biāo)簽是空的踊兜，這個(gè)標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高。
(4)瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽佳恬，設(shè)置display:block后采用float布局捏境，又有橫行的margin的情況于游，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高垫言，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)贰剥。在用float布局并有橫向的margin后，在IE6下筷频，他就具有了塊屬性float后的橫向margin的bug蚌成。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們再加上display:inline的話凛捏，它的高寬就不可設(shè)了担忧。這時(shí)候我們還需要在display:inline后面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候坯癣，有些瀏覽器會有默認(rèn)的間距瓶盛，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽示罗，所以只要不超出容器寬度惩猫，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個(gè)間距鹉勒。去掉這個(gè)間距使用float是正道帆锋。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決禽额，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法锯厢，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px脯倒，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時(shí)实辑，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)藻丢。容器的高度為300px剪撬；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高悠反，而不是出現(xiàn)滾動條残黑。這時(shí)候我們就會面臨這個(gè)兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
一般在ie中用的是filter:alpha(opacity=0);這個(gè)屬性來設(shè)置div或者是塊級元素的透明度斋否，而在firefox中梨水，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個(gè)都寫上就行茵臭，就能實(shí)現(xiàn)兼容

none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內(nèi)聯(lián)元素奇徒。
block：指定對象為塊元素雏亚。
list-item：指定對象為列表項(xiàng)目。
inline-block：指定對象為內(nèi)聯(lián)塊元素摩钙。（CSS2）
table：指定對象作為塊元素級的表格罢低。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題胖笛。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格奕短。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組匀钧。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對象作為表格列組顯示谬返。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對象作為表格標(biāo)題組之斯。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象遣铝。（CSS3）
box：將對象作為彈性伸縮盒顯示佑刷。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示酿炸。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示瘫絮。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示填硕。（伸縮盒最新版本）（CSS3）

問答題49 /72

如何居中div, 如何居中一個(gè)浮動元素?

參考答案

(1)麦萤、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度扁眯，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半壮莹。
方法二:父元素和子元素同時(shí)左浮動，然后父元素相對左移動50%姻檀，再然后子元素相對左移動-50%命满。
方法三:position定位等等。

問答題50 /72

CSS中l(wèi)ink 和@import 的區(qū)別是绣版？

參考答案

(1)胶台、link屬于HTML標(biāo)簽渺蒿，而@import是CSS提供的;
(2)控硼、頁面被加載的時(shí)，link會同時(shí)被加載宁否，而@import引用的CSS會等到頁面被加載完再加載;
(3)默怨、import只在IE5以上才能識別讯榕，而link是HTML標(biāo)簽，無兼容問題;
(4)、link方式的樣式的權(quán)重高于@import的權(quán)重.

問答題51 /72

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)愚屁、父級div定義 height
原理：父級div手動定義height济竹，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點(diǎn)：簡單霎槐、代碼少送浊、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度丘跌，如果高度和父級div不一樣時(shí)袭景，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時(shí)使用
(2)闭树、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div耸棒，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點(diǎn)：簡單报辱、代碼少与殃、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理碍现；如果頁面浮動布局多幅疼，就要增加很多空div，讓人感覺很不好
建議：不推薦使用昼接，但此方法是以前主要使用的一種清除浮動方法
(3)爽篷、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似慢睡，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點(diǎn)：瀏覽器支持好逐工、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅漂辐，網(wǎng)易钻弄，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理者吁，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持窘俺。
建議：推薦使用，建議定義公共類复凳，以減少CSS代碼瘤泪。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1育八，同時(shí)不能定義height对途，使用overflow:hidden時(shí)，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單髓棋、代碼少实檀、瀏覽器支持好
缺點(diǎn)：不能和position配合使用惶洲，因?yàn)槌龅某叽绲臅浑[藏。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用膳犹。
(5)恬吕、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時(shí)不能定義height须床，使用overflow:auto時(shí)铐料，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少豺旬、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級div時(shí)钠惩，會出現(xiàn)滾動條。
建議：不推薦使用族阅，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧篓跛。

問答題52 /72

block，inline和inlinke-block細(xì)節(jié)對比坦刀？

參考答案

?
display:block
a举塔、block元素會獨(dú)占一行，多個(gè)block元素會各自新起一行求泰。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度计盒。
b渴频、block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行北启。
c卜朗、block元素可以設(shè)置margin和padding屬性。
? display:inline
a咕村、inline元素不會獨(dú)占一行场钉，多個(gè)相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下懈涛，才會新?lián)Q一行逛万，其寬度隨元素的內(nèi)容而變化。
b批钠、inline元素設(shè)置width,height屬性無效宇植。
c、inline元素的margin和padding屬性埋心，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果指郁；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產(chǎn)生邊距效果。
? display:inline-block
a拷呆、簡單來說就是將對象呈現(xiàn)為inline對象闲坎，但是對象的內(nèi)容作為block對象呈現(xiàn)疫粥。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值腰懂，使其既具有block的寬度高度特性又具有inline的同行特性梗逮。
補(bǔ)充說明
a、一般我們會用display:block悯恍，display:inline或者display:inline-block來調(diào)整元素的布局級別库糠，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種，僅僅是比較常用而已涮毫。
b瞬欧、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block罢防，理論上IE是不識別的艘虎，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象咒吐。

問答題53 /72

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)野建？

參考答案

優(yōu)雅降級： Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器恬叹，則代碼會檢查以確認(rèn)它們是否能正常工作候生。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案绽昼，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始唯鸭，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)硅确，它們會自動地呈現(xiàn)出來并發(fā)揮作用目溉。

問答題54 /72

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個(gè)元素浮動菱农，則該元素之前的元素也需要浮動缭付，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)循未，對于問題(1)陷猫，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)的妖、額外標(biāo)簽法烙丛，<div
style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
(2)羔味、使用after偽類

parent:after{

content:" ";
??height:0;
??visibility:hidden;
??display:block;
??clear:both;
}
(3)河咽、浮動外部元素
(4)、設(shè)置overflow為hidden或者auto

問答題55 /72

你有哪些性能優(yōu)化的方法赋元？

參考答案

回答一：

（1）忘蟹、減少http請求次數(shù)：CSS Sprites, JS飒房、CSS源碼壓縮、圖片大小控制合適媚值；網(wǎng)頁Gzip狠毯，CDN托管，data緩存
，圖片服務(wù)器。
（2）虾啦、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)献酗，前端用變量保存AJAX請求結(jié)果，每次操作本地變量坷牛，不用請求罕偎，減少請求次數(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(動態(tài)屬性)。
（7）萌丈、圖片預(yù)加載赞哗，將樣式表放在頂部，將腳本放在底部加上時(shí)間戳辆雾。

回答二：

(1)肪笋、減少HTTP請求次數(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請求

問答題56 /72

為什么要初始化CSS樣式褐缠？

參考答案

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

問答題57 /72

解釋下浮動和它的工作原理？清除浮動的技巧登失？

參考答案

浮動元素脫離文檔流遏佣，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留揽浙。
(1)状婶、使用空標(biāo)簽清除浮動。
這種方法是在所有浮動標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both. 弊端就是增加了無意義標(biāo)簽馅巷。
(2)膛虫、使用overflow。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6钓猬。
(3)稍刀、使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器敞曹。具體寫法可參照以下示例账月。使用中需注意以下幾點(diǎn)。一澳迫、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0局齿，否則該元素會比實(shí)際高出若干像素；

問答題58 /72

CSS樣式表根據(jù)所在網(wǎng)頁的位置橄登，可分為哪幾種樣式表抓歼？

參考答案

行內(nèi)樣式表，內(nèi)嵌樣式表拢锹，外部樣式表

問答題59 /72

談?wù)勀銓SS中刻度的認(rèn)識谣妻？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位。
a卒稳、特殊值0可以省略單位蹋半。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負(fù)長度值充坑，或者有一定的范圍限制湃窍。如果不支持負(fù)長度值闻蛀，那應(yīng)該變換到能夠被支持的最近的一個(gè)長度值。
c您市、長度單位包括：相對單位和絕對單位觉痛。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置茵休，則相對于瀏覽器的默認(rèn)字體尺寸薪棒。(相對父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）榕莺，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素俐芯，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式钉鸯，多數(shù)是可以被修改的吧史，但chrome不能直接修改，可以被用戶樣式覆蓋唠雕。

問答題60 /72

請你說說em與rem的區(qū)別贸营？

參考答案

rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）岩睁，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位钞脂。簡單的說它就是一個(gè)相對單位。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局捕儒，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化冰啃，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸刘莹。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置阎毅，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位点弯。它與rem之間其實(shí)很相似扇调，區(qū)別在。（相對是的HTML元素的字體大蒲拉，默認(rèn)16px）
em與rem的重要區(qū)別：它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算

問答題61 /72

請你說說box-sizing屬性的的用法肃拜？

參考答案

設(shè)置或檢索對象的盒模型組成模式

a痴腌、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)雌团。對象的實(shí)際寬度等于設(shè)置的width值和border、padding之和士聪，即( Element width = width + border + padding锦援，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
b剥悟、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)灵寺。對象的實(shí)際寬度就等于設(shè)置的width值曼库，即使定義有border和padding也不會改變對象的實(shí)際寬度，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型略板。

問答題62 /72

瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么毁枯？

參考答案

在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計(jì)叮称、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式种玛。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式瓤檐，而如果它缺失則瀏覽器將會采用怪異模式赂韵。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下挠蛉，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中祭示，
box width = content width + padding left + padding right + border left + border
right，
box height = content height + padding top + padding bottom + border top +
border bottom谴古。
而在 W3C 標(biāo)準(zhǔn)的盒模型中质涛，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素讥电，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline蹂窖。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)际插，如table的單元格table-cell松蒜。在 IE Quirks Mode 下窗慎，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom讹挎，因此熟丸，在圖片底部會有幾像素的空間嘉裤。
（3）<table>元素中的字體:
CSS 中莉测，描述font的屬性有font-family撇簿，font-size恢口，font-style孝宗，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下耕肩，對于table 元素因妇，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性猿诸。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下婚被，non-replaced inline 元素?zé)o法自定義大小，而在IE Quirks Mode 下梳虽，定義這些元素的width和height 屬性址芯，能夠影響該元素顯示的大小尺寸。
（5）
元素的百分比高度:
a、CSS 中對于元素的百分比高度規(guī)定如下谷炸，百分比為元素包含塊的高度北专，不可為負(fù)值。如果包含塊的高度沒有顯式給出旬陡，該值等同于“auto”（即取決于內(nèi)容的高度）拓颓。所以百分比的高度必須在父元素有聲明高度時(shí)使用。
b描孟、當(dāng)一個(gè)元素使用百分比高度時(shí)录粱，在IE Standards Mode 下，高度取決于內(nèi)容的變化画拾，而在Quirks Mode 下啥繁，百分比高度則被正確應(yīng)用。
（6）
元素溢出的處理：
在 IE Standard Mode 下青抛，overflow取默認(rèn)值 visible旗闽，即溢出可見，這種情況下蜜另，溢出內(nèi)容不會被裁剪适室，呈現(xiàn)在元素框外。而在Quirks Mode 下举瑰，該溢出被當(dāng)做擴(kuò)展box來對待捣辆，即元素的大小由其內(nèi)容決定，溢出不會被裁剪此迅，元素框自動調(diào)整汽畴，包含溢出內(nèi)容。

問答題63 /72

怪異Quirks模式是什么耸序，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別忍些？

參考答案

從IE6開始，引入了Standards模式坎怪，標(biāo)準(zhǔn)模式中罢坝，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟搅窿，所以IE5等之前的瀏覽器對CSS的支持很差嘁酿， IE6將對CSS提供更好的支持，然而這時(shí)的問題就來了男应，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的闹司，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面殉了，又提供新的渲染機(jī)制呢开仰？

在寫程序時(shí)我們也會經(jīng)常遇到這樣的問題拟枚，如何保證原來的接口不變薪铜，又提供更強(qiáng)大的功能众弓，尤其是新功能不兼容舊功能時(shí)。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支隔箍，即當(dāng)某個(gè)參數(shù)為真時(shí)谓娃，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)蜒滩，就使用舊功能滨达，這樣就能不破壞原有的程序，又提供新功能俯艰。IE6也是類似這樣做的捡遍，它將DTD當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻撁娲蠹叶疾粫慏TD竹握，所以IE6就假定如果寫了DTD画株，就意味著這個(gè)頁面將采用對CSS支持更好的布局，而如果沒有啦辐，則采用兼容之前的布局方式谓传。這就是Quirks模式（怪癖模式，詭異模式芹关，怪異模式）续挟。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別侥衬。

盒模型：在W3C標(biāo)準(zhǔn)中诗祸，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度轴总，而在Quirks 模式下贬媒，IE的寬度和高度還包含了padding和border。

設(shè)置行內(nèi)元素的高寬：在Standards模式下肘习，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效际乘，而在quirks模式下，則會生效漂佩。
設(shè)置百分比的高度：在standards模式下脖含，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度投蝉，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中养葵，但在quirks模式下卻會失效。
（還有很多瘩缆，答出什么不重要关拒，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的，甚至完全不知道着绊。）

問答題64 /72

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會合并成一個(gè)外邊距（margin）
相鄰：沒有被非空內(nèi)容谐算、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計(jì)算:
a归露、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值洲脂。
b、參與折疊的margin 都是負(fù)值：取的是其中絕對值較大的剧包，然后恐锦，從0 位置，負(fù)向位移疆液。
c一铅、參與折疊的margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對值中最大的堕油，然后馅闽，和正margin 值中最大的 margin 相加。

問答題65 /72

內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別馍迄？

參考答案

Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型福也，一類為塊級元素，另一類是行內(nèi)元素攀圈，許多人也把行內(nèi)稱為內(nèi)聯(lián)暴凑，所以叫內(nèi)聯(lián)元素，其實(shí)就是一個(gè)意思赘来。為了很好的布局现喳，必須理解它們間的區(qū)別。

問答題66 /72

說說隱藏元素的方式有哪些犬辰？

參考答案

a嗦篱、使用CSS的display:none，不會占有原來的位置
b幌缝、使用CSS的visibility:hidden灸促，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"涵卵，不會占有原來的位置

問答題67 /72

為什么重置瀏覽器默認(rèn)樣式浴栽，如何重置默瀏覽器認(rèn)樣式窃这？

參考答案

每種瀏覽器都有一套默認(rèn)的樣式表最冰，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時(shí)蛛枚，按瀏覽器內(nèi)置的樣式表來渲染坏晦。這是合理的萝玷，像word中也有一些預(yù)留樣式嫁乘，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的球碉。但這樣會有很多兼容問題蜓斧。

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}汁尺。

b、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣多律。

c痴突、normalize：也許有些cssreset過于簡單粗暴，有點(diǎn)傷及無辜狼荞，normalize是另一個(gè)選擇辽装。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式，比普通的cssreset要精細(xì)一些相味，保留瀏覽器有用的默認(rèn)樣式拾积，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對HTML5元素丰涉、排版拓巧、列表、嵌入的內(nèi)容一死、表單和表格都進(jìn)行了一般化肛度。

天貓使用的css reset重置瀏覽器默認(rèn)樣式：

@charset
"gb2312";body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd,
ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td
{margin: 0;padding: 0}body, button, input, select, textarea
{font: 12px "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,
h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a
{text-decoration: none;cursor:pointer}a:hover
{text-decoration: underline}img {border: 0}button, input, select,
textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear
{clear:both}.fr {float:right}.fl {float:left}.block
{display:block;text-indent:-999em}

問答題68 /72

談?wù)勀銓FC與IFC的理解？(是什么投慈，如何產(chǎn)生承耿，作用)

參考答案

(1)、什么是BFC與IFC
a伪煤、BFC（Block Formatting Context）即“塊級格式化上下文”加袋， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流抱既、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)职烧。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文，你可以把BFC想象成一個(gè)大箱子防泵，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用阳堕。

b、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念择克，它決定了元素如何對其內(nèi)容進(jìn)行定位恬总，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候肚邢，Block Formatting Context提供了一個(gè)環(huán)境壹堰，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局拭卿。一個(gè)環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動元素會形成BFC贱纠，浮動元素內(nèi)部子元素的主要受該浮動元素影響峻厚，兩個(gè)浮動元素之間是互不影響的。也可以說BFC就是一個(gè)作用范圍谆焊。

c惠桃、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block 辖试，或者是 inline 辜王，但不能同時(shí)屬于這兩者。并且罐孝，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化呐馆， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。

(2)莲兢、如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)汹来，都可以產(chǎn)生Block Formatting Context：
a、float的值不為none
b改艇、overflow的值不為visible
c收班、display的值為table-cell, table-caption, inline-block中的任何一個(gè)
d、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static谒兄，relative的情況下觸發(fā)闺阱，float也是一種定位方式。

(3)舵变、BFC的作用與特點(diǎn)
a酣溃、不和浮動元素重疊，清除外部浮動纪隙，阻止浮動元素覆蓋

如果一個(gè)浮動元素后面跟著一個(gè)非浮動的元素赊豌，那么就會產(chǎn)生一個(gè)重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流绵咱、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)碘饼，當(dāng)float不為none時(shí)，position為absolute悲伶、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流艾恼。

問答題69 /72

說說你對頁面中使用定位(position)的理解？

參考答案

使用css布局position非常重要麸锉，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static钠绍，center、page花沉、sticky是CSS3中新增加的值柳爽。
(1)媳握、static
可以認(rèn)為靜態(tài)的，默認(rèn)元素都是靜態(tài)的定位磷脯，對象遵循常規(guī)流蛾找。此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用，也就是使用left赵誓，right打毛，bottom，top將不會生效俩功。
(2)幻枉、relative
相對定位，對象遵循常規(guī)流绑雄，并且參照自身在常規(guī)流中的位置通過top展辞，right奥邮，bottom万牺，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會影響常規(guī)流中的任何元素。
(3)洽腺、absolute
a脚粟、絕對定位，對象脫離常規(guī)流蘸朋，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素核无，如果沒有定位的祖先元素，則一直回溯到body元素藕坯。盒子的偏移位置不影響常規(guī)流中的任何元素团南，其margin不與其他任何margin折疊。
b炼彪、元素定位參考的是離自身最近的定位祖先元素吐根，要滿足兩個(gè)條件，第一個(gè)是自己的祖先元素辐马，可以是父元素也可以是父元素的父元素拷橘，一直找，如果沒有則選擇body為對照對象喜爷。第二個(gè)條件是要求祖先元素必須定位冗疮，通俗說就是position的屬性值為非static都行。
(4)檩帐、fixed
固定定位术幔，與absolute一致，但偏移定位是以窗口為參考湃密。當(dāng)出現(xiàn)滾動條時(shí)特愿，對象不會隨著滾動仲墨。
(5)、center
與absolute一致揍障，但偏移定位是以定位祖先元素的中心點(diǎn)為參考目养。盒子在其包含容器垂直水平居中。（CSS3）
(6)毒嫡、page
與absolute一致癌蚁。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊兜畸，否則取決于每個(gè)absolute模式努释。（CSS3）
(7)龄章、sticky
對象在常態(tài)時(shí)遵循常規(guī)流蔑穴。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版拆吆，當(dāng)卷動到屏幕外時(shí)則表現(xiàn)如fixed肛鹏。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果逸邦。（CSS3）

問答題70 /72

如何解決多個(gè)元素重疊問題？

參考答案

使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素在扰。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級別是0缕减。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素芒珠。
整數(shù)：用整數(shù)值來定義堆疊級別桥狡。可以為負(fù)值皱卓。說明：
檢索或設(shè)置對象的層疊順序裹芝。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文娜汁。
當(dāng)多個(gè)元素層疊在一起時(shí)嫂易，數(shù)字大者將顯示在上面。

問答題71 /72

頁面布局的方式有哪些存炮？

參考答案

方式：雙飛翼炬搭、多欄、彈性穆桂、流式宫盔、瀑布流、響應(yīng)式布局（1）享完、雙飛翼布局經(jīng)典三列布局灼芭，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來般又，在中國也有叫法是雙飛翼布局彼绷，它的布局要求有幾點(diǎn)：a巍佑、三列布局，中間寬度自適應(yīng)寄悯，兩邊定寬萤衰； b、中間欄要在瀏覽器中優(yōu)先展示渲染猜旬； c脆栋、允許任意列的高度最高； d洒擦、要求只用一個(gè)額外的DIV標(biāo)簽椿争； e、要求用最簡單的CSS熟嫩、最少的HACK語句秦踪；在不增加額外標(biāo)簽的情況下，圣

方式：雙飛翼掸茅、多欄椅邓、彈性、流式倦蚪、瀑布流希坚、響應(yīng)式布局

（1）边苹、雙飛翼布局
經(jīng)典三列布局陵且，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來个束，在中國也有叫法是雙飛翼布局慕购，它的布局要求有幾點(diǎn)：
a、三列布局茬底，中間寬度自適應(yīng)沪悲，兩邊定寬；
b阱表、中間欄要在瀏覽器中優(yōu)先展示渲染殿如；
c、允許任意列的高度最高最爬；
d涉馁、要求只用一個(gè)額外的DIV標(biāo)簽；
e爱致、要求用最簡單的CSS烤送、最少的HACK語句；
在不增加額外標(biāo)簽的情況下糠悯，圣杯布局已經(jīng)非常完美帮坚，圣杯布局使用了相對定位妻往，以后布局是有局限性的，而且寬度控制要改的地方也多试和。在淘寶UED（User Experience Design）探討下讯泣，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距阅悍，這就是我們所說的雙飛翼布局判帮。
(2)、多欄布局
a溉箕、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局晦墙，在bootstrap中用的非常多。
b肴茄、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）晌畅，CSS3為了滿足這個(gè)要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局寡痰，即伸縮布局盒模型（Flexible Box）抗楔，用來提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里項(xiàng)目布局拦坠，即使它們的大小是未知或者動態(tài)的连躏，這里簡稱為Flex。
Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面贞滨，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變入热，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。

Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間晓铆，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置勺良。例如，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目骄噪，當(dāng)然尚困，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小链蕊，使其不溢出伸縮容器事甜。

綜合而言碉纺，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)：
a强衡、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局芝发；
b漩蟆、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）烙肺，從而調(diào)整伸縮項(xiàng)目的大写辞А掏秩；
c疯特、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間，分配到伸縮項(xiàng)目之前勇婴、之后或之間忱嘹；
d、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍耕渴；
e拘悦、可以控制元素在頁面上的布局方向；
f橱脸、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序础米。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序。
(4)添诉、瀑布流布局
瀑布流布局是流式布局的一種屁桑。是當(dāng)下比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局栏赴，隨著頁面滾動條向下滾動蘑斧，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest须眷，逐漸在國內(nèi)流行開來竖瘾。
優(yōu)點(diǎn)
a、有效的降低了界面復(fù)雜度花颗，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了捕传。
b、對觸屏設(shè)備來說扩劝，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中庸论，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕今野。
c葡公、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上罐农，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中条霜。
缺點(diǎn)
a、有限的用例：
無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容涵亏。
例如宰睡，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁面之間切換气筋，這種情況下拆内，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中宠默。
b麸恍、額外的復(fù)雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊抹沪，你必須做好充分的測試與調(diào)整工作刻肄。
c、再見了融欧，頁腳：
如果使用了比較典型的無限滾動加載模式敏弃，這就意味著你可以和頁腳說拜拜了。
最好考慮一下頁腳對于你的網(wǎng)站噪馏，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接麦到，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。
千萬不要耍弄你的用戶欠肾，當(dāng)他們一次次的瀏覽到頁面底部瓶颠，看到頁腳，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)刺桃，他們會變的越發(fā)憤怒步清。
d、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)虏肾，與一頁一頁的輸出相比廓啊，究竟那種方式更利于SEO，這是你必須考慮的問題封豪。對于某些以類型網(wǎng)站來說谴轮，在這方面進(jìn)行冒險(xiǎn)是很不劃算的。
e吹埠、關(guān)于頁面數(shù)量的印象：
其實(shí)站在用戶的角度來看亲怠，這一點(diǎn)并非負(fù)面;不過，如果對于你的網(wǎng)站來說托酸，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略肘迎，那么單頁無限滾動的方式對你并不適用。
(5)刷袍、流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式翩隧。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果，流式布局則不受窗口寬度影響呻纹，流式布局使用百分比寬度來限定布局元素堆生，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示。
(6)雷酪、響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念淑仆，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本哥力。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的蔗怠。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過寞射。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)最住，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式怠惶。
優(yōu)點(diǎn)
a涨缚、面對不同分辨率設(shè)備靈活性強(qiáng)
b、能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)
a策治、兼容各種設(shè)備工作量大脓魏，效率低下
b、代碼累贅通惫，會出現(xiàn)隱藏?zé)o用的元素茂翔，加載時(shí)間加長
c、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案履腋，多方面因素影響而達(dá)不到最佳效果
d珊燎、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

杯布局已經(jīng)非常完美遵湖，圣杯布局使用了相對定位悔政，以后布局是有局限性的，而且寬度控制要改的地方也多延旧。在淘寶UED（User Experience Design）探討下谋国，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距迁沫，這就是我們所說的雙飛翼布局芦瘾。(2)、多欄布局 a集畅、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局近弟，在bootstrap中用的非常多。 b挺智、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）祷愉，CSS3為了滿足這個(gè)要求增加了多列布局模塊 (3)、彈性布局（Flexbox） CSS3引入了一種新的布局模式——Flexbox布局逃贝，即伸縮布局盒模型（Flexible Box）谣辞，用來提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里項(xiàng)目布局沐扳，即使它們的大小是未知或者動態(tài)的，這里簡稱為Flex句占。 Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面沪摄，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間杨拐，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置祈餐。例如，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目哄陶，當(dāng)然帆阳，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小屋吨，使其不溢出伸縮容器蜒谤。綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)： a至扰、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局鳍徽；b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）敢课，從而調(diào)整伸縮項(xiàng)目的大薪准馈；c直秆、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間事富，分配到伸縮項(xiàng)目之前畏梆、之后或之間；d、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍仇穗；e、可以控制元素在頁面上的布局方向鸵隧；f粉臊、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序遗座。(4)舀凛、瀑布流布局瀑布流布局是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁面布局途蒋，視覺表現(xiàn)為參差不齊的多欄布局猛遍，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部号坡。最早采用此布局的網(wǎng)站是Pinterest懊烤，逐漸在國內(nèi)流行開來。優(yōu)點(diǎn) a宽堆、有效的降低了界面復(fù)雜度腌紧，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了。b畜隶、對觸屏設(shè)備來說壁肋，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中号胚，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕浸遗。c猫胁、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中跛锌。缺點(diǎn) a弃秆、有限的用例：無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。例如髓帽，在電商網(wǎng)站當(dāng)中菠赚，用戶時(shí)常需要在商品列表與詳情頁面之間切換，這種情況下氢卡，傳統(tǒng)的锈至、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中。b译秦、額外的復(fù)雜度：那些用來打造無限滾動的JS庫雖然都自稱很容易使用峡捡，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊筑悴，你必須做好充分的測試與調(diào)整工作们拙。c、再見了阁吝，頁腳：如果使用了比較典型的無限滾動加載模式砚婆，這就意味著你可以和頁腳說拜拜了。最好考慮一下頁腳對于你的網(wǎng)站突勇，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接装盯，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。千萬不要耍弄你的用戶甲馋，當(dāng)他們一次次的瀏覽到頁面底部埂奈，看到頁腳，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)定躏，他們會變的越發(fā)憤怒账磺。d、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)痊远，與一頁一頁的輸出相比垮抗，究竟那種方式更利于SEO，這是你必須考慮的問題碧聪。對于某些以類型網(wǎng)站來說冒版，在這方面進(jìn)行冒險(xiǎn)是很不劃算的。e矾削、關(guān)于頁面數(shù)量的印象：其實(shí)站在用戶的角度來看壤玫，這一點(diǎn)并非負(fù)面;不過豁护，如果對于你的網(wǎng)站來說哼凯，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略欲间，那么單頁無限滾動的方式對你并不適用。(5)断部、流式布局（Fluid）固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式猎贴。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果，流式布局則不受窗口寬度影響蝴光，流式布局使用百分比寬度來限定布局元素她渴，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示应民。(6)癣防、響應(yīng)式布局響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之大脉，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本疆虚。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的苛败。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動設(shè)備的普及径簿，用“大勢所趨”來形容也不為過罢屈。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新篇亭，還看到了一些成形的模式缠捌。優(yōu)點(diǎn) a、面對不同分辨率設(shè)備靈活性強(qiáng)b译蒂、能夠快捷解決多設(shè)備顯示適應(yīng)問題缺點(diǎn) a曼月、兼容各種設(shè)備工作量大，效率低下b柔昼、代碼累贅哑芹，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長c岳锁、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案绩衷，多方面因素影響而達(dá)不到最佳效果d、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)激率，會出現(xiàn)用戶混淆的情況

問答題72 /72

overfloa:hidden是否形成新的塊級格式化上下文咳燕？

參考答案

會形成，觸發(fā)BFC的條件有：

float的值不為none乒躺。
overflow的值不為visible招盲。
display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。
position的值不為relative 和static嘉冒。

/??9???

問答題48 /72

列出display的值并說明他們的作用曹货？

參考答案

none：隱藏對象咆繁。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內(nèi)聯(lián)元素顶籽。
block：指定對象為塊元素玩般。
list-item：指定對象為列表項(xiàng)目。
inline-block：指定對象為內(nèi)聯(lián)塊元素礼饱。（CSS2）
table：指定對象作為塊元素級的表格坏为。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題镊绪。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格匀伏。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組蝴韭。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列够颠。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對象作為表格標(biāo)題組榄鉴。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對象作為表格腳注組履磨。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示牢硅。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示蹬耘。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示减余。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示综苔。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

問答題49 /72

如何居中div, 如何居中一個(gè)浮動元素?

參考答案

(1)位岔、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)如筛、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半抒抬。
方法二:父元素和子元素同時(shí)左浮動杨刨，然后父元素相對左移動50%，再然后子元素相對左移動-50%擦剑。
方法三:position定位等等妖胀。

問答題50 /72

CSS中l(wèi)ink 和@import 的區(qū)別是？

參考答案

(1)惠勒、link屬于HTML標(biāo)簽赚抡，而@import是CSS提供的;
(2)、頁面被加載的時(shí)纠屋，link會同時(shí)被加載涂臣，而@import引用的CSS會等到頁面被加載完再加載;
(3)、import只在IE5以上才能識別售担，而link是HTML標(biāo)簽赁遗，無兼容問題;
(4)署辉、link方式的樣式的權(quán)重高于@import的權(quán)重.

問答題51 /72

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)、父級div定義 height
原理：父級div手動定義height岩四，就解決了父級div無法自動獲取到高度的問題诊沪。
優(yōu)點(diǎn)：簡單影兽、代碼少逐抑、容易掌握
缺點(diǎn)：只適合高度固定的布局闸衫，要給出精確的高度献丑，如果高度和父級div不一樣時(shí)末捣，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時(shí)使用
(2)创橄、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div箩做，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點(diǎn)：簡單妥畏、代碼少邦邦、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理醉蚁；如果頁面浮動布局多燃辖，就要增加很多空div，讓人感覺很不好
建議：不推薦使用网棍，但此方法是以前主要使用的一種清除浮動方法
(3)黔龟、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似滥玷，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點(diǎn)：瀏覽器支持好氏身、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅惑畴，網(wǎng)易蛋欣，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理如贷，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持陷虎。
建議：推薦使用，建議定義公共類杠袱，以減少CSS代碼尚猿。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1霞掺，同時(shí)不能定義height谊路，使用overflow:hidden時(shí)，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單菩彬、代碼少缠劝、瀏覽器支持好
缺點(diǎn)：不能和position配合使用潮梯，因?yàn)槌龅某叽绲臅浑[藏。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用惨恭。
(5)秉馏、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時(shí)不能定義height脱羡，使用overflow:auto時(shí)萝究，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少锉罐、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級div時(shí)帆竹，會出現(xiàn)滾動條。
建議：不推薦使用脓规，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧栽连。

問答題52 /72

block，inline和inlinke-block細(xì)節(jié)對比侨舆？

參考答案

?
display:block
a秒紧、block元素會獨(dú)占一行，多個(gè)block元素會各自新起一行挨下。默認(rèn)情況下熔恢，block元素寬度自動填滿其父元素寬度。
b臭笆、block元素可以設(shè)置width,height屬性叙淌。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
c耗啦、block元素可以設(shè)置margin和padding屬性凿菩。
? display:inline
a、inline元素不會獨(dú)占一行帜讲，多個(gè)相鄰的行內(nèi)元素會排列在同一行里衅谷，直到一行排列不下，才會新?lián)Q一行似将，其寬度隨元素的內(nèi)容而變化获黔。
b、inline元素設(shè)置width,height屬性無效在验。
c玷氏、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果腋舌；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產(chǎn)生邊距效果壳坪。
? display:inline-block
a钉稍、簡單來說就是將對象呈現(xiàn)為inline對象忍法，但是對象的內(nèi)容作為block對象呈現(xiàn)是鬼。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)躺彬。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補(bǔ)充說明
a、一般我們會用display:block世落，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種糟需，僅僅是比較常用而已屉佳。
b、IE（低版本IE）本來是不支持inline-block的洲押，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block武花，理論上IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout诅诱，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象髓堪。

問答題53 /72

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

參考答案

優(yōu)雅降級： Web站點(diǎn)在所有新式瀏覽器中都能正常工作娘荡，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作驶沼。由于IE獨(dú)特的盒模型布局問題炮沐，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始回怜，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的大年。當(dāng)瀏覽器支持時(shí)，它們會自動地呈現(xiàn)出來并發(fā)揮作用玉雾。

問答題54 /72

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：
（1）父元素的高度無法被撐開翔试，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個(gè)元素浮動，則該元素之前的元素也需要浮動复旬，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)垦缅、(3)，對于問題(1)驹碍，添加如下樣式壁涎，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)、額外標(biāo)簽法志秃，<div
style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔怔球。）
(2)、使用after偽類

parent:after{

content:" ";
??height:0;
??visibility:hidden;
??display:block;
??clear:both;
}
(3)浮还、浮動外部元素
(4)竟坛、設(shè)置overflow為hidden或者auto

問答題55 /72

你有哪些性能優(yōu)化的方法？

參考答案

回答一：

（1）、減少http請求次數(shù)：CSS Sprites, JS担汤、CSS源碼壓縮又官、圖片大小控制合適；網(wǎng)頁Gzip漫试，CDN托管六敬，data緩存
，圖片服務(wù)器驾荣。
（2）外构、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)播掷，前端用變量保存AJAX請求結(jié)果审编，每次操作本地變量，不用請求歧匈，減少請求次數(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(動態(tài)屬性)秀撇。
（7）超棺、圖片預(yù)加載，將樣式表放在頂部呵燕，將腳本放在底部加上時(shí)間戳棠绘。

回答二：

(1)、減少HTTP請求次數(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請求

問答題56 /72

為什么要初始化CSS樣式辩稽？

參考答案

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

問答題57 /72

解釋下浮動和它的工作原理紧憾？清除浮動的技巧到千？

參考答案

浮動元素脫離文檔流，不占據(jù)空間赴穗。浮動元素碰到包含它的邊框或者浮動元素的邊框停留憔四。
(1)、使用空標(biāo)簽清除浮動般眉。
這種方法是在所有浮動標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both. 弊端就是增加了無意義標(biāo)簽了赵。
(2)、使用overflow煤篙。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6斟览。
(3)、使用after偽對象清除浮動辑奈。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例已烤。使用中需注意以下幾點(diǎn)鸠窗。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0胯究，否則該元素會比實(shí)際高出若干像素稍计；

問答題58 /72

CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表裕循？

參考答案

行內(nèi)樣式表臣嚣，內(nèi)嵌樣式表，外部樣式表

問答題59 /72

談?wù)勀銓SS中刻度的認(rèn)識剥哑？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位硅则。
a、特殊值0可以省略單位株婴。例如：margin:0px可以寫成margin:0
b怎虫、一些屬性可能允許有負(fù)長度值，或者有一定的范圍限制。如果不支持負(fù)長度值大审，那應(yīng)該變換到能夠被支持的最近的一個(gè)長度值蘸际。
c、長度單位包括：相對單位和絕對單位徒扶。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸粮彤，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸姜骡。(相對父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個(gè)相對單位（root em导坟，根em），相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素溶浴，瀏覽器默認(rèn)樣式也稱為user agent stylesheet乍迄，就是所有瀏覽器內(nèi)置的默認(rèn)樣式，多數(shù)是可以被修改的士败，但chrome不能直接修改闯两，可以被用戶樣式覆蓋。

問答題60 /72

請你說說em與rem的區(qū)別谅将？

參考答案

rem
rem是CSS3新增的一個(gè)相對單位（root em漾狼，根em），相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位饥臂。簡單的說它就是一個(gè)相對單位逊躁。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化隅熙，以前的天貓tmall就使用這種辦法
em
文本相對長度單位稽煤。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置囚戚，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)酵熙。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位。它與rem之間其實(shí)很相似驰坊，區(qū)別在践惑。（相對是的HTML元素的字體大鞋邑，默認(rèn)16px）
em與rem的重要區(qū)別：它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算

問答題61 /72

請你說說box-sizing屬性的的用法夺荒？

參考答案

設(shè)置或檢索對象的盒模型組成模式

a埂息、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)。對象的實(shí)際寬度等于設(shè)置的width值和border舟扎、padding之和分飞，即( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型浆竭。
b浸须、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)惨寿。對象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實(shí)際寬度删窒，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型裂垦。

問答題62 /72

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

參考答案

在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染肌索，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計(jì)蕉拢、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式诚亚；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式晕换，而如果它缺失則瀏覽器將會采用怪異模式。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響站宗，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下闸准，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border
right梢灭，
box height = content height + padding top + padding bottom + border top +
border bottom夷家。
而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小敏释。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素库快，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)钥顽，如table的單元格table-cell义屏。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom蜂大，因此闽铐，在圖片底部會有幾像素的空間。
（3）<table>元素中的字體:
CSS 中奶浦，描述font的屬性有font-family阳啥，font-size，font-style财喳，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下斩狱，對于table 元素耳高，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性所踊。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下泌枪，non-replaced inline 元素?zé)o法自定義大小，而在IE Quirks Mode 下秕岛，定義這些元素的width和height 屬性碌燕，能夠影響該元素顯示的大小尺寸误证。
（5）
元素的百分比高度:
a、CSS 中對于元素的百分比高度規(guī)定如下修壕，百分比為元素包含塊的高度愈捅，不可為負(fù)值。如果包含塊的高度沒有顯式給出慈鸠，該值等同于“auto”（即取決于內(nèi)容的高度）蓝谨。所以百分比的高度必須在父元素有聲明高度時(shí)使用。
b青团、當(dāng)一個(gè)元素使用百分比高度時(shí)譬巫，在IE Standards Mode 下，高度取決于內(nèi)容的變化督笆，而在Quirks Mode 下芦昔，百分比高度則被正確應(yīng)用。
（6）
元素溢出的處理：
在 IE Standard Mode 下娃肿，overflow取默認(rèn)值 visible咕缎，即溢出可見，這種情況下咸作，溢出內(nèi)容不會被裁剪锨阿，呈現(xiàn)在元素框外。而在Quirks Mode 下记罚，該溢出被當(dāng)做擴(kuò)展box來對待墅诡，即元素的大小由其內(nèi)容決定，溢出不會被裁剪桐智，元素框自動調(diào)整末早，包含溢出內(nèi)容拴清。

問答題63 /72

怪異Quirks模式是什么陨帆，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別朝抖？

參考答案

從IE6開始奢人，引入了Standards模式肢扯，標(biāo)準(zhǔn)模式中较解，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度笤昨。

在IE6之前CSS還不夠成熟我注，所以IE5等之前的瀏覽器對CSS的支持很差捆憎， IE6將對CSS提供更好的支持舅柜，然而這時(shí)的問題就來了，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的躲惰，而如果IE6 支持CSS則將令這些頁面顯示不正常致份，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢础拨？

在寫程序時(shí)我們也會經(jīng)常遇到這樣的問題氮块，如何保證原來的接口不變绍载，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)滔蝉。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支击儡，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能锰提，而如果這個(gè)參數(shù) 不為真時(shí)曙痘，就使用舊功能，這樣就能不破壞原有的程序立肘，又提供新功能边坤。IE6也是類似這樣做的，它將DTD當(dāng)成了這個(gè)“參數(shù)”谅年，因?yàn)橐郧暗捻撁娲蠹叶疾粫慏TD茧痒，所以IE6就假定如果寫了DTD，就意味著這個(gè)頁面將采用對CSS支持更好的布局融蹂，而如果沒有旺订，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式超燃，詭異模式区拳，怪異模式）。

區(qū)別：總體會有布局意乓、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別樱调。

盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度届良，指的是元素內(nèi)容的寬度和高度笆凌，而在Quirks 模式下，IE的寬度和高度還包含了padding和border士葫。

設(shè)置行內(nèi)元素的高寬：在Standards模式下乞而，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下慢显，則會生效爪模。
設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的荚藻，如果父元素沒有設(shè)置百分比的高度呻右，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效鞋喇。
（還有很多，答出什么不重要眉撵，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的侦香，還是說都是看文章看的落塑，甚至完全不知道。）

問答題64 /72

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會合并成一個(gè)外邊距（margin）
相鄰：沒有被非空內(nèi)容罐韩、padding憾赁、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計(jì)算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值散吵。
b龙考、參與折疊的margin 都是負(fù)值：取的是其中絕對值較大的，然后矾睦，從0 位置晦款，負(fù)向位移。
c枚冗、參與折疊的margin 中有正值缓溅，有負(fù)值：先取出負(fù) margin 中絕對值中最大的，然后赁温，和正margin 值中最大的 margin 相加坛怪。

問答題65 /72

內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別？

參考答案

Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型股囊，一類為塊級元素袜匿，另一類是行內(nèi)元素，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素帮孔，其實(shí)就是一個(gè)意思姻氨。為了很好的布局，必須理解它們間的區(qū)別穆壕。

問答題66 /72

說說隱藏元素的方式有哪些？

參考答案

a其屏、使用CSS的display:none喇勋，不會占有原來的位置
b、使用CSS的visibility:hidden偎行，會占有原來的位置
c川背、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置

問答題67 /72

為什么重置瀏覽器默認(rèn)樣式蛤袒，如何重置默瀏覽器認(rèn)樣式熄云？

參考答案

每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet妙真，網(wǎng)頁在沒有指定的樣式時(shí)缴允，按瀏覽器內(nèi)置的樣式表來渲染。這是合理的珍德，像word中也有一些預(yù)留樣式练般，可以讓我們的排版更美觀整齊矗漾。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會有很多兼容問題薄料。

a敞贡、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b摄职、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣誊役。

c、normalize：也許有些cssreset過于簡單粗暴谷市，有點(diǎn)傷及無辜蛔垢，normalize是另一個(gè)選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式歌懒，比普通的cssreset要精細(xì)一些啦桌，保留瀏覽器有用的默認(rèn)樣式，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器及皂，同時(shí)對HTML5元素甫男、排版、列表验烧、嵌入的內(nèi)容板驳、表單和表格都進(jìn)行了一般化。

天貓使用的css reset重置瀏覽器默認(rèn)樣式：

問答題68 /72

談?wù)勀銓FC與IFC的理解碍拆？(是什么若治，如何產(chǎn)生，作用)

參考答案

(1)感混、什么是BFC與IFC
a端幼、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文弧满。常規(guī)流（也稱標(biāo)準(zhǔn)流婆跑、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文庭呜，你可以把BFC想象成一個(gè)大箱子滑进，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。

b募谎、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念扶关，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用数冬。當(dāng)涉及到可視化布局的時(shí)候节槐，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會影響到其它環(huán)境中的布局疯淫。比如浮動元素會形成BFC地来，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個(gè)浮動元素之間是互不影響的熙掺。也可以說BFC就是一個(gè)作用范圍。

c咕宿、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) 币绩，類型可以是 block ，或者是 inline 府阀，但不能同時(shí)屬于這兩者缆镣。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化试浙， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化董瞻。

(2)、如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)田巴，都可以產(chǎn)生Block Formatting Context：
a钠糊、float的值不為none
b、overflow的值不為visible
c壹哺、display的值為table-cell, table-caption, inline-block中的任何一個(gè)
d抄伍、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static棕叫，relative的情況下觸發(fā)窟却，float也是一種定位方式静汤。

(3)猛频、BFC的作用與特點(diǎn)
a缎浇、不和浮動元素重疊炭分，清除外部浮動坯癣，阻止浮動元素覆蓋

如果一個(gè)浮動元素后面跟著一個(gè)非浮動的元素芍秆，那么就會產(chǎn)生一個(gè)重疊的現(xiàn)象炸庞。常規(guī)流（也稱標(biāo)準(zhǔn)流钱床、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)，當(dāng)float不為none時(shí)燕雁，position為absolute诞丽、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流。

問答題69 /72

說說你對頁面中使用定位(position)的理解拐格？

參考答案

使用css布局position非常重要僧免，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static，center捏浊、page懂衩、sticky是CSS3中新增加的值。
(1)、static
可以認(rèn)為靜態(tài)的浊洞，默認(rèn)元素都是靜態(tài)的定位牵敷，對象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用法希，也就是使用left枷餐，right，bottom苫亦，top將不會生效毛肋。
(2)、relative
相對定位屋剑，對象遵循常規(guī)流润匙，并且參照自身在常規(guī)流中的位置通過top，right唉匾，bottom孕讳，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會影響常規(guī)流中的任何元素。
(3)巍膘、absolute
a厂财、絕對定位，對象脫離常規(guī)流典徘，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素蟀苛，如果沒有定位的祖先元素，則一直回溯到body元素逮诲。盒子的偏移位置不影響常規(guī)流中的任何元素帜平，其margin不與其他任何margin折疊。
b梅鹦、元素定位參考的是離自身最近的定位祖先元素裆甩，要滿足兩個(gè)條件，第一個(gè)是自己的祖先元素齐唆，可以是父元素也可以是父元素的父元素嗤栓，一直找，如果沒有則選擇body為對照對象箍邮。第二個(gè)條件是要求祖先元素必須定位茉帅，通俗說就是position的屬性值為非static都行。
(4)锭弊、fixed
固定定位堪澎，與absolute一致，但偏移定位是以窗口為參考味滞。當(dāng)出現(xiàn)滾動條時(shí)樱蛤，對象不會隨著滾動钮呀。
(5)、center
與absolute一致昨凡，但偏移定位是以定位祖先元素的中心點(diǎn)為參考爽醋。盒子在其包含容器垂直水平居中。（CSS3）
(6)便脊、page
與absolute一致蚂四。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊哪痰，否則取決于每個(gè)absolute模式证杭。（CSS3）
(7)、sticky
對象在常態(tài)時(shí)遵循常規(guī)流妒御。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版镇饺，當(dāng)卷動到屏幕外時(shí)則表現(xiàn)如fixed乎莉。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果。（CSS3）

問答題70 /72

如何解決多個(gè)元素重疊問題奸笤？

參考答案

使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文青伤，除非它是根元素潦牛。
整數(shù)：用整數(shù)值來定義堆疊級別〗『校可以為負(fù)值绒瘦。說明：
檢索或設(shè)置對象的層疊順序。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別扣癣，并確定該元素是否創(chuàng)建新的局部層疊上下文惰帽。
當(dāng)多個(gè)元素層疊在一起時(shí)，數(shù)字大者將顯示在上面父虑。

問答題71 /72

頁面布局的方式有哪些该酗？

參考答案

方式：雙飛翼、多欄士嚎、彈性呜魄、流式、瀑布流莱衩、響應(yīng)式布局（1）爵嗅、雙飛翼布局經(jīng)典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念膳殷，在國內(nèi)最早是由淘寶UED的工程師傳播開來操骡，在中國也有叫法是雙飛翼布局九火，它的布局要求有幾點(diǎn)：a、三列布局册招，中間寬度自適應(yīng)岔激，兩邊定寬； b是掰、中間欄要在瀏覽器中優(yōu)先展示渲染虑鼎； c、允許任意列的高度最高键痛； d炫彩、要求只用一個(gè)額外的DIV標(biāo)簽； e絮短、要求用最簡單的CSS江兢、最少的HACK語句；在不增加額外標(biāo)簽的情況下丁频，圣

方式：雙飛翼杉允、多欄、彈性席里、流式叔磷、瀑布流、響應(yīng)式布局

（1）奖磁、雙飛翼布局
經(jīng)典三列布局改基，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來咖为，在中國也有叫法是雙飛翼布局秕狰，它的布局要求有幾點(diǎn)：
a、三列布局案疲，中間寬度自適應(yīng)封恰，兩邊定寬；
b褐啡、中間欄要在瀏覽器中優(yōu)先展示渲染诺舔；
c、允許任意列的高度最高备畦；
d低飒、要求只用一個(gè)額外的DIV標(biāo)簽；
e懂盐、要求用最簡單的CSS褥赊、最少的HACK語句；
在不增加額外標(biāo)簽的情況下莉恼，圣杯布局已經(jīng)非常完美拌喉，圣杯布局使用了相對定位速那，以后布局是有局限性的，而且寬度控制要改的地方也多尿背。在淘寶UED（User Experience Design）探討下端仰，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距田藐，這就是我們所說的雙飛翼布局荔烧。
(2)、多欄布局
a汽久、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局鹤竭，在bootstrap中用的非常多。
b景醇、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）臀稚，CSS3為了滿足這個(gè)要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局三痰，即伸縮布局盒模型（Flexible Box）烁涌，用來提供一個(gè)更加有效的方式制定饮睬、調(diào)整和分布一個(gè)容器里項(xiàng)目布局沃缘，即使它們的大小是未知或者動態(tài)的奶段，這里簡稱為Flex。
Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面舷丹，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小蜓肆。

Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間颜凯，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置。例如仗扬，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目症概，當(dāng)然，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)早芭，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小彼城，使其不溢出伸縮容器。

綜合而言退个，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)：
a募壕、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局；
b语盈、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）舱馅，從而調(diào)整伸縮項(xiàng)目的大小刀荒；
c代嗤、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間棘钞，分配到伸縮項(xiàng)目之前、之后或之間干毅；
d宜猜、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；
e溶锭、可以控制元素在頁面上的布局方向宝恶；
f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序趴捅。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序垫毙。
(4)、瀑布流布局
瀑布流布局是流式布局的一種拱绑。是當(dāng)下比較流行的一種網(wǎng)站頁面布局综芥，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動猎拨，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部膀藐。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來红省。
優(yōu)點(diǎn)
a额各、有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了吧恃。
b虾啦、對觸屏設(shè)備來說，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中痕寓，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣傲醉，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。
c呻率、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上硬毕，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。
缺點(diǎn)
a礼仗、有限的用例：
無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容吐咳。
例如，在電商網(wǎng)站當(dāng)中元践，用戶時(shí)常需要在商品列表與詳情頁面之間切換挪丢，這種情況下，傳統(tǒng)的卢厂、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中乾蓬。
b、額外的復(fù)雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用慎恒，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理任内，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊撵渡，你必須做好充分的測試與調(diào)整工作。
c死嗦、再見了趋距，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了越除。
最好考慮一下頁腳對于你的網(wǎng)站节腐，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式摘盆。
千萬不要耍弄你的用戶翼雀，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳孩擂，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)狼渊，他們會變的越發(fā)憤怒。
d类垦、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)狈邑，與一頁一頁的輸出相比，究竟那種方式更利于SEO蚤认，這是你必須考慮的問題米苹。對于某些以類型網(wǎng)站來說，在這方面進(jìn)行冒險(xiǎn)是很不劃算的砰琢。
e驱入、關(guān)于頁面數(shù)量的印象：
其實(shí)站在用戶的角度來看婶博，這一點(diǎn)并非負(fù)面;不過，如果對于你的網(wǎng)站來說枝哄，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略驹愚，那么單頁無限滾動的方式對你并不適用。
(5)霹菊、流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果，流式布局則不受窗口寬度影響你辣，流式布局使用百分比寬度來限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示尘执。
(6)舍哄、響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之誊锭，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本表悬。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)丧靡，而且隨著目前大屏幕移動設(shè)備的普及蟆沫，用“大勢所趨”來形容也不為過籽暇。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新饭庞，還看到了一些成形的模式戒悠。
優(yōu)點(diǎn)
a、面對不同分辨率設(shè)備靈活性強(qiáng)
b舟山、能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)
a绸狐、兼容各種設(shè)備工作量大，效率低下
b累盗、代碼累贅寒矿，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長
c幅骄、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案劫窒，多方面因素影響而達(dá)不到最佳效果
d、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)拆座，會出現(xiàn)用戶混淆的情況

杯布局已經(jīng)非常完美主巍，圣杯布局使用了相對定位，以后布局是有局限性的挪凑，而且寬度控制要改的地方也多孕索。在淘寶UED（User Experience Design）探討下，增加多一個(gè)div就可以不用相對布局了躏碳，只用到了浮動和負(fù)邊距搞旭，這就是我們所說的雙飛翼布局。(2)菇绵、多欄布局 a、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局咬最，在bootstrap中用的非常多翎嫡。 b、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）永乌，CSS3為了滿足這個(gè)要求增加了多列布局模塊 (3)惑申、彈性布局（Flexbox） CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box）翅雏，用來提供一個(gè)更加有效的方式制定圈驼、調(diào)整和分布一個(gè)容器里項(xiàng)目布局，即使它們的大小是未知或者動態(tài)的望几，這里簡稱為Flex绩脆。 Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小衙伶。Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間祈坠，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置。例如矢劲，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目赦拘，當(dāng)然，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)芬沉，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小躺同，使其不溢出伸縮容器。綜合而言丸逸，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)： a蹋艺、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局；b黄刚、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）捎谨，從而調(diào)整伸縮項(xiàng)目的大小憔维；c涛救、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間，分配到伸縮項(xiàng)目之前业扒、之后或之間检吆；d、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍程储；e蹭沛、可以控制元素在頁面上的布局方向；f章鲤、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序摊灭。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序。(4)败徊、瀑布流布局瀑布流布局是流式布局的一種帚呼。是當(dāng)下比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局集嵌，隨著頁面滾動條向下滾動附较，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部瓷式。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來渡紫。優(yōu)點(diǎn) a端蛆、有效的降低了界面復(fù)雜度凤粗，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了。b、對觸屏設(shè)備來說嫌拣，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中柔袁，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕异逐。c捶索、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中灰瞻。缺點(diǎn) a腥例、有限的用例：無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。例如酝润，在電商網(wǎng)站當(dāng)中燎竖，用戶時(shí)常需要在商品列表與詳情頁面之間切換，這種情況下要销，傳統(tǒng)的构回、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中。b疏咐、額外的復(fù)雜度：那些用來打造無限滾動的JS庫雖然都自稱很容易使用纤掸，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊凳鬓，你必須做好充分的測試與調(diào)整工作茁肠。c、再見了缩举，頁腳：如果使用了比較典型的無限滾動加載模式垦梆，這就意味著你可以和頁腳說拜拜了。最好考慮一下頁腳對于你的網(wǎng)站仅孩，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接托猩，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。千萬不要耍弄你的用戶辽慕，當(dāng)他們一次次的瀏覽到頁面底部京腥，看到頁腳，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)溅蛉，他們會變的越發(fā)憤怒公浪。d、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)船侧，與一頁一頁的輸出相比欠气，究竟那種方式更利于SEO，這是你必須考慮的問題镜撩。對于某些以類型網(wǎng)站來說预柒，在這方面進(jìn)行冒險(xiǎn)是很不劃算的。e、關(guān)于頁面數(shù)量的印象：其實(shí)站在用戶的角度來看宜鸯，這一點(diǎn)并非負(fù)面;不過憔古，如果對于你的網(wǎng)站來說，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略淋袖，那么單頁無限滾動的方式對你并不適用鸿市。(5)、流式布局（Fluid）固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式适贸。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果灸芳，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素拜姿，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示烙样。(6)、響應(yīng)式布局響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念蕊肥，簡而言之谒获，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的壁却。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)批狱，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過展东。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)赔硫，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式盐肃。優(yōu)點(diǎn) a爪膊、面對不同分辨率設(shè)備靈活性強(qiáng)b、能夠快捷解決多設(shè)備顯示適應(yīng)問題缺點(diǎn) a砸王、兼容各種設(shè)備工作量大推盛，效率低下b、代碼累贅谦铃，會出現(xiàn)隱藏?zé)o用的元素耘成，加載時(shí)間加長c、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案驹闰，多方面因素影響而達(dá)不到最佳效果d亡蓉、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)名党，會出現(xiàn)用戶混淆的情況

問答題72 /72

overfloa:hidden是否形成新的塊級格式化上下文奸腺？

參考答案

會形成唁毒，觸發(fā)BFC的條件有：

float的值不為none。
overflow的值不為visible骡显。
display的值為table-cell, table-caption, inline-block 中的任何一個(gè)疆栏。
position的值不為relative 和static。

d??9/??

問答題48 /72

列出display的值并說明他們的作用惫谤？

參考答案

none：隱藏對象壁顶。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內(nèi)聯(lián)元素溜歪。
block：指定對象為塊元素若专。
list-item：指定對象為列表項(xiàng)目。
inline-block：指定對象為內(nèi)聯(lián)塊元素蝴猪。（CSS2）
table：指定對象作為塊元素級的表格调衰。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題自阱。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格嚎莉。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組沛豌。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列趋箩。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對象作為表格標(biāo)題組加派。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對象作為表格腳注組叫确。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示芍锦。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示竹勉。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示娄琉。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示次乓。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

問答題49 /72

如何居中div, 如何居中一個(gè)浮動元素?

參考答案

(1)车胡、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)檬输、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半匈棘。
方法二:父元素和子元素同時(shí)左浮動丧慈，然后父元素相對左移動50%，再然后子元素相對左移動-50%主卫。
方法三:position定位等等逃默。

問答題50 /72

CSS中l(wèi)ink 和@import 的區(qū)別是？

參考答案

(1)簇搅、link屬于HTML標(biāo)簽完域，而@import是CSS提供的;
(2)、頁面被加載的時(shí)瘩将，link會同時(shí)被加載吟税，而@import引用的CSS會等到頁面被加載完再加載;
(3)凹耙、import只在IE5以上才能識別，而link是HTML標(biāo)簽肠仪，無兼容問題;
(4)肖抱、link方式的樣式的權(quán)重高于@import的權(quán)重.

問答題51 /72

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)、父級div定義 height
原理：父級div手動定義height异旧，就解決了父級div無法自動獲取到高度的問題意述。
優(yōu)點(diǎn)：簡單、代碼少吮蛹、容易掌握
缺點(diǎn)：只適合高度固定的布局荤崇，要給出精確的高度，如果高度和父級div不一樣時(shí)潮针，會產(chǎn)生問題
建議：不推薦使用术荤，只建議高度固定的布局時(shí)使用
(2)、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div每篷，利用css提高的clear:both清除浮動喜每，讓父級div能自動獲取到高度
優(yōu)點(diǎn)：簡單、代碼少雳攘、瀏覽器支持好带兜、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動布局多吨灭，就要增加很多空div刚照，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)喧兄、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after无畔，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點(diǎn)：瀏覽器支持好吠冤、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用浑彰，如：騰迅，網(wǎng)易拯辙，新浪等等）
缺點(diǎn)：代碼多郭变、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持涯保。
建議：推薦使用碗旅，建議定義公共類蒸健，以減少CSS代碼。
(4)柿究、父級div定義 overflow:hidden
原理：必須定義width或zoom:1僚纷，同時(shí)不能定義height授霸，使用overflow:hidden時(shí)伪煤，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少寨腔、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅浑[藏率寡。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用脆侮。
(5)、父級div定義 overflow:auto
原理：必須定義width或zoom:1勇劣，同時(shí)不能定義height，使用overflow:auto時(shí)潭枣，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單比默、代碼少、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級div時(shí)盆犁，會出現(xiàn)滾動條命咐。
建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧谐岁。

問答題52 /72

block醋奠，inline和inlinke-block細(xì)節(jié)對比？

參考答案

?
display:block
a伊佃、block元素會獨(dú)占一行窜司，多個(gè)block元素會各自新起一行。默認(rèn)情況下航揉，block元素寬度自動填滿其父元素寬度塞祈。
b、block元素可以設(shè)置width,height屬性帅涂。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行议薪。
c、block元素可以設(shè)置margin和padding屬性媳友。
? display:inline
a斯议、inline元素不會獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會排列在同一行里醇锚，直到一行排列不下哼御，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化焊唬。
b艇搀、inline元素設(shè)置width,height屬性無效。
c求晶、inline元素的margin和padding屬性焰雕，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產(chǎn)生邊距效果芳杏。
? display:inline-block
a矩屁、簡單來說就是將對象呈現(xiàn)為inline對象辟宗，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)吝秕。比如我們可以給一個(gè)link（a元素）inline-block屬性值泊脐，使其既具有block的寬度高度特性又具有inline的同行特性。
補(bǔ)充說明
a烁峭、一般我們會用display:block容客，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種约郁，僅僅是比較常用而已缩挑。
b、IE（低版本IE）本來是不支持inline-block的鬓梅，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block供置，理論上IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout绽快，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象芥丧。

問答題53 /72

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

參考答案

優(yōu)雅降級： Web站點(diǎn)在所有新式瀏覽器中都能正常工作坊罢，如果用戶使用的是老式瀏覽器续担，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題活孩，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案赤拒，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的诱鞠。當(dāng)瀏覽器支持時(shí)挎挖，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

問答題54 /72

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：
（1）父元素的高度無法被撐開航夺，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個(gè)元素浮動蕉朵，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)阳掐、(3)始衅，對于問題(1)，添加如下樣式缭保，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)驮配、額外標(biāo)簽法蓖宦，<div
style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔款违。）
(2)伍纫、使用after偽類

parent:after{

content:" ";
??height:0;
??visibility:hidden;
??display:block;
??clear:both;
}
(3)、浮動外部元素
(4)钳恕、設(shè)置overflow為hidden或者auto

問答題55 /72

你有哪些性能優(yōu)化的方法别伏？

參考答案

回答一：

（1）蹄衷、減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮厘肮、圖片大小控制合適愧口；網(wǎng)頁Gzip，CDN托管类茂，data緩存
耍属，圖片服務(wù)器。
（2）巩检、前端模板 JS+數(shù)據(jù)厚骗，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果碴巾，每次操作本地變量，不用請求丑搔，減少請求次數(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(動態(tài)屬性)辙诞。
（7）辙售、圖片預(yù)加載，將樣式表放在頂部飞涂，將腳本放在底部加上時(shí)間戳旦部。

回答二：

(1)、減少HTTP請求次數(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請求

問答題56 /72

為什么要初始化CSS樣式灰粮？

參考答案

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

問答題57 /72

解釋下浮動和它的工作原理旬薯？清除浮動的技巧晰骑？

參考答案

浮動元素脫離文檔流，不占據(jù)空間绊序。浮動元素碰到包含它的邊框或者浮動元素的邊框停留硕舆。
(1)、使用空標(biāo)簽清除浮動骤公。
這種方法是在所有浮動標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both. 弊端就是增加了無意義標(biāo)簽抚官。
(2)、使用overflow阶捆。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6凌节。
(3)、使用after偽對象清除浮動洒试。
該方法只適用于非IE瀏覽器倍奢。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)垒棋。一娱挨、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0，否則該元素會比實(shí)際高出若干像素捕犬；

問答題58 /72

CSS樣式表根據(jù)所在網(wǎng)頁的位置跷坝，可分為哪幾種樣式表？

參考答案

行內(nèi)樣式表碉碉，內(nèi)嵌樣式表柴钻，外部樣式表

問答題59 /72

談?wù)勀銓SS中刻度的認(rèn)識？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位。
a、特殊值0可以省略單位辅柴。例如：margin:0px可以寫成margin:0
b趴乡、一些屬性可能允許有負(fù)長度值，或者有一定的范圍限制扇丛。如果不支持負(fù)長度值获洲，那應(yīng)該變換到能夠被支持的最近的一個(gè)長度值磨取。
c元潘、長度單位包括：相對單位和絕對單位畔乙。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置翩概，則相對于瀏覽器的默認(rèn)字體尺寸牲距。(相對父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）钥庇，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素牍鞠，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式评姨，多數(shù)是可以被修改的难述，但chrome不能直接修改，可以被用戶樣式覆蓋吐句。

問答題60 /72

請你說說em與rem的區(qū)別胁后？

參考答案

rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）蕴侧，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位择同。簡單的說它就是一個(gè)相對單位两入。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局净宵，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化，以前的天貓tmall就使用這種辦法
em
文本相對長度單位裹纳。相對于當(dāng)前對象內(nèi)文本的字體尺寸择葡。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)剃氧。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位敏储。它與rem之間其實(shí)很相似，區(qū)別在朋鞍。（相對是的HTML元素的字體大已添，默認(rèn)16px）
em與rem的重要區(qū)別：它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算

問答題61 /72

請你說說box-sizing屬性的的用法？

參考答案

設(shè)置或檢索對象的盒模型組成模式

a滥酥、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)更舞。對象的實(shí)際寬度等于設(shè)置的width值和border、padding之和坎吻，即( Element width = width + border + padding缆蝉，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)刊头。對象的實(shí)際寬度就等于設(shè)置的width值黍瞧，即使定義有border和padding也不會改變對象的實(shí)際寬度，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型原杂。

問答題62 /72

瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么印颤？

參考答案

在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計(jì)污尉、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式膀哲。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式被碗，而如果它缺失則瀏覽器將會采用怪異模式某宪。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下锐朴，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中兴喂，
box width = content width + padding left + padding right + border left + border
right，
box height = content height + padding top + padding bottom + border top +
border bottom焚志。
而在 W3C 標(biāo)準(zhǔn)的盒模型中衣迷，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素酱酬，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline壶谒。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)，如table的單元格table-cell膳沽。在 IE Quirks Mode 下汗菜，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom，因此挑社，在圖片底部會有幾像素的空間陨界。
（3）<table>元素中的字體:
CSS 中，描述font的屬性有font-family痛阻，font-size菌瘪，font-style，font-weigh,上述屬性都是可以繼承的阱当。而在IE Quirks Mode 下俏扩，對于table 元素，字體的某些屬性將不會從body或其他封閉元素繼承到table中弊添，特別是 font-size屬性录淡。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素?zé)o法自定義大小表箭，而在IE Quirks Mode 下赁咙，定義這些元素的width和height 屬性碌廓，能夠影響該元素顯示的大小尺寸快耿。
（5）
元素的百分比高度:
a莫秆、CSS 中對于元素的百分比高度規(guī)定如下幸缕，百分比為元素包含塊的高度，不可為負(fù)值凤覆。如果包含塊的高度沒有顯式給出链瓦，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時(shí)使用盯桦。
b慈俯、當(dāng)一個(gè)元素使用百分比高度時(shí)，在IE Standards Mode 下拥峦，高度取決于內(nèi)容的變化贴膘，而在Quirks Mode 下，百分比高度則被正確應(yīng)用略号。
（6）
元素溢出的處理：
在 IE Standard Mode 下刑峡，overflow取默認(rèn)值 visible，即溢出可見玄柠，這種情況下突梦，溢出內(nèi)容不會被裁剪，呈現(xiàn)在元素框外羽利。而在Quirks Mode 下宫患，該溢出被當(dāng)做擴(kuò)展box來對待，即元素的大小由其內(nèi)容決定这弧，溢出不會被裁剪娃闲，元素框自動調(diào)整，包含溢出內(nèi)容当宴。

問答題63 /72

怪異Quirks模式是什么畜吊，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別泽疆？

參考答案

從IE6開始户矢，引入了Standards模式，標(biāo)準(zhǔn)模式中殉疼，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度梯浪。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差瓢娜， IE6將對CSS提供更好的支持挂洛，然而這時(shí)的問題就來了，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的眠砾，而如果IE6 支持CSS則將令這些頁面顯示不正常虏劲，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢？

在寫程序時(shí)我們也會經(jīng)常遇到這樣的問題柒巫，如何保證原來的接口不變励堡，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)堡掏。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支应结，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能泉唁，而如果這個(gè)參數(shù) 不為真時(shí)鹅龄，就使用舊功能，這樣就能不破壞原有的程序亭畜，又提供新功能扮休。IE6也是類似這樣做的，它將DTD當(dāng)成了這個(gè)“參數(shù)”拴鸵，因?yàn)橐郧暗捻撁娲蠹叶疾粫慏TD肛炮，所以IE6就假定如果寫了DTD，就意味著這個(gè)頁面將采用對CSS支持更好的布局宝踪，而如果沒有侨糟，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式瘩燥，詭異模式秕重，怪異模式）。

區(qū)別：總體會有布局厉膀、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別溶耘。

盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度服鹅，指的是元素內(nèi)容的寬度和高度凳兵，而在Quirks 模式下，IE的寬度和高度還包含了padding和border企软。

設(shè)置行內(nèi)元素的高寬：在Standards模式下庐扫，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下仗哨，則會生效形庭。
設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的厌漂，如果父元素沒有設(shè)置百分比的高度萨醒，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效苇倡。
（還有很多富纸，答出什么不重要囤踩，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的晓褪，甚至完全不知道高职。）

問答題64 /72

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會合并成一個(gè)外邊距（margin）
相鄰：沒有被非空內(nèi)容膛腐、padding躬窜、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計(jì)算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值宋距。
b变过、參與折疊的margin 都是負(fù)值：取的是其中絕對值較大的埃元，然后，從0 位置媚狰，負(fù)向位移岛杀。
c、參與折疊的margin 中有正值崭孤，有負(fù)值：先取出負(fù) margin 中絕對值中最大的类嗤，然后，和正margin 值中最大的 margin 相加辨宠。

問答題65 /72

內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別遗锣？

參考答案

Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型，一類為塊級元素嗤形，另一類是行內(nèi)元素精偿，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素赋兵，其實(shí)就是一個(gè)意思笔咽。為了很好的布局，必須理解它們間的區(qū)別霹期。

問答題66 /72

說說隱藏元素的方式有哪些叶组？

參考答案

a、使用CSS的display:none历造，不會占有原來的位置
b甩十、使用CSS的visibility:hidden，會占有原來的位置
c帕膜、使用HTML5中的新增屬性hidden="hidden"枣氧，不會占有原來的位置

問答題67 /72

為什么重置瀏覽器默認(rèn)樣式溢十，如何重置默瀏覽器認(rèn)樣式垮刹？

參考答案

每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet张弛，網(wǎng)頁在沒有指定的樣式時(shí)荒典，按瀏覽器內(nèi)置的樣式表來渲染酪劫。這是合理的，像word中也有一些預(yù)留樣式寺董，可以讓我們的排版更美觀整齊覆糟。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會有很多兼容問題遮咖。

a滩字、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b御吞、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣麦箍。

c、normalize：也許有些cssreset過于簡單粗暴陶珠，有點(diǎn)傷及無辜挟裂，normalize是另一個(gè)選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式揍诽，比普通的cssreset要精細(xì)一些诀蓉，保留瀏覽器有用的默認(rèn)樣式，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器暑脆，同時(shí)對HTML5元素渠啤、排版、列表添吗、嵌入的內(nèi)容埃篓、表單和表格都進(jìn)行了一般化。

天貓使用的css reset重置瀏覽器默認(rèn)樣式：

問答題68 /72

談?wù)勀銓FC與IFC的理解根资？(是什么架专，如何產(chǎn)生，作用)

參考答案

(1)玄帕、什么是BFC與IFC
a部脚、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文裤纹。常規(guī)流（也稱標(biāo)準(zhǔn)流委刘、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文鹰椒，你可以把BFC想象成一個(gè)大箱子锡移，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。

b漆际、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念淆珊，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用奸汇。當(dāng)涉及到可視化布局的時(shí)候施符，Block Formatting Context提供了一個(gè)環(huán)境往声，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會影響到其它環(huán)境中的布局戳吝。比如浮動元素會形成BFC浩销，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個(gè)浮動元素之間是互不影響的听哭。也可以說BFC就是一個(gè)作用范圍慢洋。

c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline 峦嗤，但不能同時(shí)屬于這兩者致稀。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。

(2)、如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)杏头，都可以產(chǎn)生Block Formatting Context：
a、float的值不為none
b沸呐、overflow的值不為visible
c醇王、display的值為table-cell, table-caption, inline-block中的任何一個(gè)
d、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static崭添，relative的情況下觸發(fā)寓娩，float也是一種定位方式。

(3)呼渣、BFC的作用與特點(diǎn)
a棘伴、不和浮動元素重疊，清除外部浮動屁置，阻止浮動元素覆蓋

如果一個(gè)浮動元素后面跟著一個(gè)非浮動的元素焊夸，那么就會產(chǎn)生一個(gè)重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流蓝角、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)阱穗，當(dāng)float不為none時(shí)，position為absolute使鹅、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流揪阶。

問答題69 /72

說說你對頁面中使用定位(position)的理解？

參考答案

使用css布局position非常重要患朱，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static鲁僚，center、page、sticky是CSS3中新增加的值蕴茴。
(1)劝评、static
可以認(rèn)為靜態(tài)的姐直，默認(rèn)元素都是靜態(tài)的定位倦淀，對象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用声畏，也就是使用left撞叽，right，bottom插龄，top將不會生效愿棋。
(2)、relative
相對定位均牢，對象遵循常規(guī)流糠雨，并且參照自身在常規(guī)流中的位置通過top，right徘跪，bottom甘邀，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會影響常規(guī)流中的任何元素。
(3)垮庐、absolute
a松邪、絕對定位，對象脫離常規(guī)流哨查，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素逗抑，如果沒有定位的祖先元素，則一直回溯到body元素寒亥。盒子的偏移位置不影響常規(guī)流中的任何元素邮府，其margin不與其他任何margin折疊。
b溉奕、元素定位參考的是離自身最近的定位祖先元素挟纱，要滿足兩個(gè)條件，第一個(gè)是自己的祖先元素腐宋，可以是父元素也可以是父元素的父元素紊服，一直找，如果沒有則選擇body為對照對象胸竞。第二個(gè)條件是要求祖先元素必須定位欺嗤，通俗說就是position的屬性值為非static都行。
(4)卫枝、fixed
固定定位煎饼，與absolute一致，但偏移定位是以窗口為參考校赤。當(dāng)出現(xiàn)滾動條時(shí)吆玖，對象不會隨著滾動筒溃。
(5)、center
與absolute一致沾乘，但偏移定位是以定位祖先元素的中心點(diǎn)為參考怜奖。盒子在其包含容器垂直水平居中。（CSS3）
(6)翅阵、page
與absolute一致歪玲。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊掷匠，否則取決于每個(gè)absolute模式滥崩。（CSS3）
(7)、sticky
對象在常態(tài)時(shí)遵循常規(guī)流讹语。它就像是relative和fixed的合體钙皮，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動到屏幕外時(shí)則表現(xiàn)如fixed顽决。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果荆陆。（CSS3）

問答題70 /72

如何解決多個(gè)元素重疊問題少梁？

參考答案

使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素窘疮。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級別是0鲫忍。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素鸠儿。
整數(shù)：用整數(shù)值來定義堆疊級別屹蚊。可以為負(fù)值进每。說明：
檢索或設(shè)置對象的層疊順序汹粤。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文田晚。
當(dāng)多個(gè)元素層疊在一起時(shí)嘱兼，數(shù)字大者將顯示在上面。

問答題71 /72

頁面布局的方式有哪些贤徒？

參考答案

方式：雙飛翼芹壕、多欄、彈性接奈、流式踢涌、瀑布流、響應(yīng)式布局（1）序宦、雙飛翼布局經(jīng)典三列布局睁壁，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局潘明，它的布局要求有幾點(diǎn)：a行剂、三列布局，中間寬度自適應(yīng)钳降，兩邊定寬厚宰； b、中間欄要在瀏覽器中優(yōu)先展示渲染牲阁； c固阁、允許任意列的高度最高壤躲； d城菊、要求只用一個(gè)額外的DIV標(biāo)簽； e碉克、要求用最簡單的CSS凌唬、最少的HACK語句；在不增加額外標(biāo)簽的情況下漏麦，圣

方式：雙飛翼客税、多欄、彈性撕贞、流式更耻、瀑布流、響應(yīng)式布局

（1）捏膨、雙飛翼布局
經(jīng)典三列布局秧均，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來号涯，在中國也有叫法是雙飛翼布局目胡，它的布局要求有幾點(diǎn)：
a、三列布局链快，中間寬度自適應(yīng)誉己，兩邊定寬；
b域蜗、中間欄要在瀏覽器中優(yōu)先展示渲染巨双；
c、允許任意列的高度最高霉祸；
d筑累、要求只用一個(gè)額外的DIV標(biāo)簽；
e脉执、要求用最簡單的CSS疼阔、最少的HACK語句；
在不增加額外標(biāo)簽的情況下，圣杯布局已經(jīng)非常完美婆廊，圣杯布局使用了相對定位迅细，以后布局是有局限性的，而且寬度控制要改的地方也多淘邻。在淘寶UED（User Experience Design）探討下茵典，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距宾舅，這就是我們所說的雙飛翼布局统阿。
(2)、多欄布局
a筹我、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局扶平，在bootstrap中用的非常多。
b蔬蕊、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）结澄，CSS3為了滿足這個(gè)要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局岸夯，即伸縮布局盒模型（Flexible Box）麻献，用來提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里項(xiàng)目布局猜扮，即使它們的大小是未知或者動態(tài)的勉吻，這里簡稱為Flex。
Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面旅赢，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變齿桃，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小辐赞。

Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間锄俄，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置。例如壹置，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目孕似，當(dāng)然踩娘，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小喉祭，使其不溢出伸縮容器养渴。

綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)：
a泛烙、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局理卑；
b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）蔽氨，從而調(diào)整伸縮項(xiàng)目的大忻赀搿帆疟；
c、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間宇立，分配到伸縮項(xiàng)目之前踪宠、之后或之間；
d妈嘹、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍柳琢；
e、可以控制元素在頁面上的布局方向润脸；
f柬脸、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序毙驯。
(4)倒堕、瀑布流布局
瀑布流布局是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁面布局尔苦，視覺表現(xiàn)為參差不齊的多欄布局涩馆，隨著頁面滾動條向下滾動行施，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部允坚。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來蛾号。
優(yōu)點(diǎn)
a稠项、有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了鲜结。
b展运、對觸屏設(shè)備來說，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中精刷，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣拗胜，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。
c怒允、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上埂软，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。
缺點(diǎn)
a纫事、有限的用例：
無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容勘畔。
例如，在電商網(wǎng)站當(dāng)中丽惶，用戶時(shí)常需要在商品列表與詳情頁面之間切換炫七，這種情況下，傳統(tǒng)的钾唬、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中万哪。
b侠驯、額外的復(fù)雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理奕巍，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊陵霉，你必須做好充分的測試與調(diào)整工作。
c伍绳、再見了踊挠，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了冲杀。
最好考慮一下頁腳對于你的網(wǎng)站效床，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式权谁。
千萬不要耍弄你的用戶剩檀，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳旺芽，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)沪猴，他們會變的越發(fā)憤怒。
d采章、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)运嗜，與一頁一頁的輸出相比，究竟那種方式更利于SEO悯舟，這是你必須考慮的問題担租。對于某些以類型網(wǎng)站來說，在這方面進(jìn)行冒險(xiǎn)是很不劃算的抵怎。
e奋救、關(guān)于頁面數(shù)量的印象：
其實(shí)站在用戶的角度來看，這一點(diǎn)并非負(fù)面;不過反惕，如果對于你的網(wǎng)站來說尝艘，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用姿染。
(5)背亥、流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式务冕。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果余耽，流式布局則不受窗口寬度影響伴澄，流式布局使用百分比寬度來限定布局元素御蒲，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示砂豌。
(6)盔几、響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念辑奈，簡而言之廓脆，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本进萄。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的捻脖。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)锐峭，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過可婶。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)沿癞，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式矛渴。
優(yōu)點(diǎn)
a椎扬、面對不同分辨率設(shè)備靈活性強(qiáng)
b、能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)
a具温、兼容各種設(shè)備工作量大蚕涤，效率低下
b、代碼累贅铣猩，會出現(xiàn)隱藏?zé)o用的元素揖铜，加載時(shí)間加長
c、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案达皿，多方面因素影響而達(dá)不到最佳效果
d天吓、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

杯布局已經(jīng)非常完美峦椰，圣杯布局使用了相對定位龄寞，以后布局是有局限性的，而且寬度控制要改的地方也多们何。在淘寶UED（User Experience Design）探討下萄焦，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距冤竹，這就是我們所說的雙飛翼布局。(2)茬射、多欄布局 a鹦蠕、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局，在bootstrap中用的非常多在抛。 b钟病、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄），CSS3為了滿足這個(gè)要求增加了多列布局模塊 (3)刚梭、彈性布局（Flexbox） CSS3引入了一種新的布局模式——Flexbox布局肠阱，即伸縮布局盒模型（Flexible Box），用來提供一個(gè)更加有效的方式制定朴读、調(diào)整和分布一個(gè)容器里項(xiàng)目布局屹徘，即使它們的大小是未知或者動態(tài)的，這里簡稱為Flex衅金。 Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面噪伊，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變簿煌，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間鉴吹，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置姨伟。例如，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目豆励，當(dāng)然夺荒，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小良蒸，使其不溢出伸縮容器般堆。綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)： a诚啃、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局淮摔；b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）始赎，從而調(diào)整伸縮項(xiàng)目的大泻统取；c造垛、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間魔招，分配到伸縮項(xiàng)目之前、之后或之間五辽；d办斑、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；e杆逗、可以控制元素在頁面上的布局方向乡翅；f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序罪郊。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序蠕蚜。(4)、瀑布流布局瀑布流布局是流式布局的一種悔橄。是當(dāng)下比較流行的一種網(wǎng)站頁面布局靶累，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動癣疟，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部挣柬。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來睛挚。優(yōu)點(diǎn) a邪蛔、有效的降低了界面復(fù)雜度乐纸，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了盔夜。b抵知、對觸屏設(shè)備來說矩桂，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣床牧，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕荣回。c、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上戈咳，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中心软。缺點(diǎn) a、有限的用例：無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容著蛙。例如删铃，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁面之間切換踏堡，這種情況下猎唁，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中顷蟆。b诫隅、額外的復(fù)雜度：那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理帐偎，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊逐纬，你必須做好充分的測試與調(diào)整工作。c削樊、再見了豁生，頁腳：如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了漫贞。最好考慮一下頁腳對于你的網(wǎng)站甸箱，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式绕辖。千萬不要耍弄你的用戶摇肌，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳仪际，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)，他們會變的越發(fā)憤怒昵骤。d树碱、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)，與一頁一頁的輸出相比变秦，究竟那種方式更利于SEO成榜，這是你必須考慮的問題。對于某些以類型網(wǎng)站來說蹦玫，在這方面進(jìn)行冒險(xiǎn)是很不劃算的赎婚。e刘绣、關(guān)于頁面數(shù)量的印象：其實(shí)站在用戶的角度來看，這一點(diǎn)并非負(fù)面;不過挣输，如果對于你的網(wǎng)站來說纬凤，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用撩嚼。(5)停士、流式布局（Fluid）固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果完丽，流式布局則不受窗口寬度影響恋技，流式布局使用百分比寬度來限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示逻族。(6)蜻底、響應(yīng)式布局響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之聘鳞，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本薄辅。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)搁痛，而且隨著目前大屏幕移動設(shè)備的普及长搀，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)鸡典，我們不僅看到很多的創(chuàng)新源请，還看到了一些成形的模式。優(yōu)點(diǎn) a彻况、面對不同分辨率設(shè)備靈活性強(qiáng)b谁尸、能夠快捷解決多設(shè)備顯示適應(yīng)問題缺點(diǎn) a、兼容各種設(shè)備工作量大纽甘，效率低下b良蛮、代碼累贅，會出現(xiàn)隱藏?zé)o用的元素悍赢，加載時(shí)間加長c决瞳、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果d左权、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)皮胡，會出現(xiàn)用戶混淆的情況

問答題72 /72

overfloa:hidden是否形成新的塊級格式化上下文？

參考答案

會形成赏迟，觸發(fā)BFC的條件有：

float的值不為none屡贺。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。
position的值不為relative 和static甩栈。

v?{USj?9?3?

問答題48 /72

列出display的值并說明他們的作用泻仙？

參考答案

none：隱藏對象。與visibility屬性的hidden值不同量没，其不為被隱藏的對象保留其物理空間
inline：指定對象為內(nèi)聯(lián)元素玉转。
block：指定對象為塊元素。
list-item：指定對象為列表項(xiàng)目允蜈。
inline-block：指定對象為內(nèi)聯(lián)塊元素涩维。（CSS2）
table：指定對象作為塊元素級的表格拨齐。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格狸棍。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行徙鱼。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組侦香。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列殿衰。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對象作為表格標(biāo)題組蛤克。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對象作為表格腳注組捺癞。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示构挤。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示髓介。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示筋现。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示唐础。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

問答題49 /72

如何居中div, 如何居中一個(gè)浮動元素?

參考答案

(1)矾飞、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)一膨、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半洒沦。
方法二:父元素和子元素同時(shí)左浮動豹绪，然后父元素相對左移動50%，再然后子元素相對左移動-50%申眼。
方法三:position定位等等瞒津。

問答題50 /72

CSS中l(wèi)ink 和@import 的區(qū)別是？

參考答案

(1)括尸、link屬于HTML標(biāo)簽仲智，而@import是CSS提供的;
(2)、頁面被加載的時(shí)姻氨，link會同時(shí)被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)剪验、import只在IE5以上才能識別肴焊，而link是HTML標(biāo)簽前联，無兼容問題;
(4)、link方式的樣式的權(quán)重高于@import的權(quán)重.

問答題51 /72

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)娶眷、父級div定義 height
原理：父級div手動定義height似嗤，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點(diǎn)：簡單届宠、代碼少烁落、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度豌注，如果高度和父級div不一樣時(shí)伤塌，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時(shí)使用
(2)轧铁、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div每聪，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點(diǎn)：簡單齿风、代碼少药薯、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理救斑；如果頁面浮動布局多童本，就要增加很多空div，讓人感覺很不好
建議：不推薦使用脸候，但此方法是以前主要使用的一種清除浮動方法
(3)穷娱、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似纪他，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點(diǎn)：瀏覽器支持好鄙煤、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅茶袒，網(wǎng)易梯刚，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理薪寓，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持亡资。
建議：推薦使用，建議定義公共類向叉，以減少CSS代碼锥腻。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1母谎，同時(shí)不能定義height瘦黑，使用overflow:hidden時(shí)，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少幸斥、瀏覽器支持好
缺點(diǎn)：不能和position配合使用匹摇，因?yàn)槌龅某叽绲臅浑[藏。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用甲葬。
(5)廊勃、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時(shí)不能定義height经窖，使用overflow:auto時(shí)坡垫，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少画侣、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級div時(shí)冰悠，會出現(xiàn)滾動條。
建議：不推薦使用棉钧，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧屿脐。

問答題52 /72

block，inline和inlinke-block細(xì)節(jié)對比宪卿？

參考答案

?
display:block
a的诵、block元素會獨(dú)占一行阐枣，多個(gè)block元素會各自新起一行材泄。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度夯缺。
b休溶、block元素可以設(shè)置width,height屬性代赁。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
c兽掰、block元素可以設(shè)置margin和padding屬性芭碍。
? display:inline
a、inline元素不會獨(dú)占一行孽尽，多個(gè)相鄰的行內(nèi)元素會排列在同一行里窖壕，直到一行排列不下，才會新?lián)Q一行杉女，其寬度隨元素的內(nèi)容而變化瞻讽。
b、inline元素設(shè)置width,height屬性無效熏挎。
c速勇、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果坎拐；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產(chǎn)生邊距效果烦磁。
? display:inline-block
a养匈、簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)个初。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)乖寒。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性院溺。
補(bǔ)充說明
a、一般我們會用display:block磅轻，display:inline或者display:inline-block來調(diào)整元素的布局級別珍逸，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種，僅僅是比較常用而已聋溜。
b谆膳、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block撮躁，理論上IE是不識別的漱病，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象把曼。

問答題53 /72

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)杨帽？

參考答案

優(yōu)雅降級： Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器嗤军，則代碼會檢查以確認(rèn)它們是否能正常工作注盈。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案叙赚，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始老客，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)震叮，它們會自動地呈現(xiàn)出來并發(fā)揮作用胧砰。

問答題54 /72

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個(gè)元素浮動苇瓣，則該元素之前的元素也需要浮動尉间，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)钓简，對于問題(1)乌妒，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)外邓、額外標(biāo)簽法撤蚊，<div
style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
(2)损话、使用after偽類

parent:after{

content:" ";
??height:0;
??visibility:hidden;
??display:block;
??clear:both;
}
(3)侦啸、浮動外部元素
(4)槽唾、設(shè)置overflow為hidden或者auto

問答題55 /72

你有哪些性能優(yōu)化的方法？

參考答案

回答一：

（1）光涂、減少http請求次數(shù)：CSS Sprites, JS庞萍、CSS源碼壓縮、圖片大小控制合適忘闻；網(wǎng)頁Gzip钝计，CDN托管，data緩存
齐佳，圖片服務(wù)器私恬。
（2）、前端模板 JS+數(shù)據(jù)炼吴，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)本鸣，前端用變量保存AJAX請求結(jié)果，每次操作本地變量硅蹦，不用請求荣德，減少請求次數(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(動態(tài)屬性)家淤。
（7）、圖片預(yù)加載瑟由，將樣式表放在頂部搓幌，將腳本放在底部加上時(shí)間戳晌梨。

回答二：

(1)毅该、減少HTTP請求次數(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請求

問答題56 /72

為什么要初始化CSS樣式？

參考答案

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

問答題57 /72

解釋下浮動和它的工作原理？清除浮動的技巧宗苍？

參考答案

浮動元素脫離文檔流稼稿，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留讳窟。
(1)让歼、使用空標(biāo)簽清除浮動。
這種方法是在所有浮動標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both. 弊端就是增加了無意義標(biāo)簽丽啡。
(2)谋右、使用overflow。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6补箍。
(3)改执、使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器坑雅。具體寫法可參照以下示例辈挂。使用中需注意以下幾點(diǎn)。一裹粤、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0终蒂，否則該元素會比實(shí)際高出若干像素；

問答題58 /72

CSS樣式表根據(jù)所在網(wǎng)頁的位置遥诉，可分為哪幾種樣式表拇泣？

參考答案

行內(nèi)樣式表，內(nèi)嵌樣式表矮锈，外部樣式表

問答題59 /72

談?wù)勀銓SS中刻度的認(rèn)識霉翔？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位。
a愕难、特殊值0可以省略單位早龟。例如：margin:0px可以寫成margin:0
b惫霸、一些屬性可能允許有負(fù)長度值，或者有一定的范圍限制葱弟。如果不支持負(fù)長度值壹店，那應(yīng)該變換到能夠被支持的最近的一個(gè)長度值。
c芝加、長度單位包括：相對單位和絕對單位硅卢。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置藏杖，則相對于瀏覽器的默認(rèn)字體尺寸将塑。(相對父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）蝌麸，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素点寥，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式来吩，多數(shù)是可以被修改的敢辩，但chrome不能直接修改，可以被用戶樣式覆蓋弟疆。

問答題60 /72

請你說說em與rem的區(qū)別戚长？

參考答案

rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）怠苔，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位同廉。簡單的說它就是一個(gè)相對單位。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局柑司，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化迫肖，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸帜羊。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置咒程，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位讼育。它與rem之間其實(shí)很相似帐姻，區(qū)別在。（相對是的HTML元素的字體大奶段，默認(rèn)16px）
em與rem的重要區(qū)別：它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算

問答題61 /72

請你說說box-sizing屬性的的用法饥瓷？

參考答案

設(shè)置或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)痹籍。對象的實(shí)際寬度等于設(shè)置的width值和border呢铆、padding之和，即( Element width = width + border + padding蹲缠，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型棺克。
b悠垛、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)娩鹉。對象的實(shí)際寬度就等于設(shè)置的width值村斟，即使定義有border和padding也不會改變對象的實(shí)際寬度就缆，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型芥永。

問答題62 /72

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

參考答案

在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染砌滞，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計(jì)调炬、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式唯鸭。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式派草；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式搀缠，而如果它缺失則瀏覽器將會采用怪異模式。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響近迁，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下艺普，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border
right鉴竭，
box height = content height + padding top + padding bottom + border top +
border bottom衷敌。
而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小拓瞪。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline助琐。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)祭埂，如table的單元格table-cell。在 IE Quirks Mode 下兵钮，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom蛆橡，因此，在圖片底部會有幾像素的空間掘譬。
（3）<table>元素中的字體:
CSS 中泰演，描述font的屬性有font-family，font-size葱轩，font-style睦焕，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下靴拱，對于table 元素垃喊，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性袜炕。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下本谜，non-replaced inline 元素?zé)o法自定義大小，而在IE Quirks Mode 下偎窘，定義這些元素的width和height 屬性乌助，能夠影響該元素顯示的大小尺寸溜在。
（5）
元素的百分比高度:
a、CSS 中對于元素的百分比高度規(guī)定如下他托，百分比為元素包含塊的高度掖肋，不可為負(fù)值。如果包含塊的高度沒有顯式給出上祈，該值等同于“auto”（即取決于內(nèi)容的高度）培遵。所以百分比的高度必須在父元素有聲明高度時(shí)使用。
b登刺、當(dāng)一個(gè)元素使用百分比高度時(shí)籽腕，在IE Standards Mode 下，高度取決于內(nèi)容的變化纸俭，而在Quirks Mode 下皇耗，百分比高度則被正確應(yīng)用。
（6）
元素溢出的處理：
在 IE Standard Mode 下揍很，overflow取默認(rèn)值 visible郎楼，即溢出可見，這種情況下窒悔，溢出內(nèi)容不會被裁剪呜袁，呈現(xiàn)在元素框外。而在Quirks Mode 下简珠，該溢出被當(dāng)做擴(kuò)展box來對待阶界，即元素的大小由其內(nèi)容決定，溢出不會被裁剪聋庵，元素框自動調(diào)整膘融，包含溢出內(nèi)容。

問答題63 /72

怪異Quirks模式是什么祭玉，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別氧映？

參考答案

從IE6開始，引入了Standards模式脱货，標(biāo)準(zhǔn)模式中岛都，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟蹭劈，所以IE5等之前的瀏覽器對CSS的支持很差疗绣， IE6將對CSS提供更好的支持铺韧，然而這時(shí)的問題就來了多矮，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面塔逃，又提供新的渲染機(jī)制呢讯壶？

在寫程序時(shí)我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變湾盗，又提供更強(qiáng)大的功能伏蚊，尤其是新功能不兼容舊功能時(shí)。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支格粪，即當(dāng)某個(gè)參數(shù)為真時(shí)躏吊，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)帐萎，就使用舊功能比伏，這樣就能不破壞原有的程序，又提供新功能疆导。IE6也是類似這樣做的赁项，它將DTD當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻撁娲蠹叶疾粫慏TD澈段，所以IE6就假定如果寫了DTD悠菜，就意味著這個(gè)頁面將采用對CSS支持更好的布局，而如果沒有败富，則采用兼容之前的布局方式悔醋。這就是Quirks模式（怪癖模式，詭異模式兽叮，怪異模式）篙顺。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別充择。

盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度匪蟀，指的是元素內(nèi)容的寬度和高度椎麦，而在Quirks 模式下，IE的寬度和高度還包含了padding和border材彪。

設(shè)置行內(nèi)元素的高寬：在Standards模式下观挎，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效松捉，而在quirks模式下贡蓖，則會生效。
設(shè)置百分比的高度：在standards模式下手蝎，一個(gè)元素的高度是由其包含的內(nèi)容來決定的显熏，如果父元素沒有設(shè)置百分比的高度雄嚣，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多缓升，答出什么不重要鼓鲁，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的港谊，甚至完全不知道骇吭。）

問答題64 /72

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會合并成一個(gè)外邊距（margin）
相鄰：沒有被非空內(nèi)容、padding歧寺、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計(jì)算:
a燥狰、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b斜筐、參與折疊的margin 都是負(fù)值：取的是其中絕對值較大的龙致，然后，從0 位置奴艾，負(fù)向位移净当。
c、參與折疊的margin 中有正值蕴潦，有負(fù)值：先取出負(fù) margin 中絕對值中最大的像啼，然后，和正margin 值中最大的 margin 相加潭苞。

問答題65 /72

內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別忽冻？

參考答案

Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型，一類為塊級元素此疹，另一類是行內(nèi)元素僧诚，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素蝗碎，其實(shí)就是一個(gè)意思湖笨。為了很好的布局，必須理解它們間的區(qū)別蹦骑。

問答題66 /72

說說隱藏元素的方式有哪些慈省？

參考答案

a、使用CSS的display:none眠菇，不會占有原來的位置
b边败、使用CSS的visibility:hidden，會占有原來的位置
c捎废、使用HTML5中的新增屬性hidden="hidden"笑窜，不會占有原來的位置

問答題67 /72

為什么重置瀏覽器默認(rèn)樣式，如何重置默瀏覽器認(rèn)樣式登疗？

參考答案

每種瀏覽器都有一套默認(rèn)的樣式表排截，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時(shí)，按瀏覽器內(nèi)置的樣式表來渲染匾寝。這是合理的搬葬，像word中也有一些預(yù)留樣式，可以讓我們的排版更美觀整齊艳悔。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的急凰。但這樣會有很多兼容問題。

a猜年、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}抡锈。

b、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣乔外。

c床三、normalize：也許有些cssreset過于簡單粗暴，有點(diǎn)傷及無辜杨幼，normalize是另一個(gè)選擇撇簿。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式陈惰，比普通的cssreset要精細(xì)一些碉纳，保留瀏覽器有用的默認(rèn)樣式暑始，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器容为，同時(shí)對HTML5元素坎背、排版、列表寄雀、嵌入的內(nèi)容得滤、表單和表格都進(jìn)行了一般化。

天貓使用的css reset重置瀏覽器默認(rèn)樣式：

問答題68 /72

談?wù)勀銓FC與IFC的理解盒犹？(是什么懂更，如何產(chǎn)生眨业，作用)

參考答案

(1)、什么是BFC與IFC
a沮协、BFC（Block Formatting Context）即“塊級格式化上下文”龄捡， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流慷暂、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)聘殖。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文，你可以把BFC想象成一個(gè)大箱子呜呐，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用就斤。

b、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念蘑辑，它決定了元素如何對其內(nèi)容進(jìn)行定位洋机，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候洋魂，Block Formatting Context提供了一個(gè)環(huán)境绷旗，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會影響到其它環(huán)境中的布局副砍。比如浮動元素會形成BFC衔肢，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個(gè)浮動元素之間是互不影響的豁翎。也可以說BFC就是一個(gè)作用范圍角骤。

c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) 心剥，類型可以是 block 邦尊，或者是 inline ，但不能同時(shí)屬于這兩者优烧。并且蝉揍，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化畦娄。

(2)又沾、如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)，都可以產(chǎn)生Block Formatting Context：
a熙卡、float的值不為none
b杖刷、overflow的值不為visible
c、display的值為table-cell, table-caption, inline-block中的任何一個(gè)
d驳癌、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static滑燃，relative的情況下觸發(fā)瓦糕，float也是一種定位方式烟阐。

(3)、BFC的作用與特點(diǎn)
a枚粘、不和浮動元素重疊灾杰，清除外部浮動蚊丐，阻止浮動元素覆蓋

如果一個(gè)浮動元素后面跟著一個(gè)非浮動的元素，那么就會產(chǎn)生一個(gè)重疊的現(xiàn)象艳吠。常規(guī)流（也稱標(biāo)準(zhǔn)流麦备、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)，當(dāng)float不為none時(shí)昭娩，position為absolute凛篙、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流。

問答題69 /72

說說你對頁面中使用定位(position)的理解栏渺？

參考答案

使用css布局position非常重要呛梆，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static，center磕诊、page填物、sticky是CSS3中新增加的值。
(1)霎终、static
可以認(rèn)為靜態(tài)的滞磺，默認(rèn)元素都是靜態(tài)的定位，對象遵循常規(guī)流莱褒。此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用击困，也就是使用left，right广凸，bottom阅茶，top將不會生效。
(2)炮障、relative
相對定位目派，對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top胁赢，right企蹭，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會影響常規(guī)流中的任何元素智末。
(3)谅摄、absolute
a、絕對定位系馆，對象脫離常規(guī)流送漠，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素由蘑，則一直回溯到body元素闽寡。盒子的偏移位置不影響常規(guī)流中的任何元素代兵，其margin不與其他任何margin折疊。
b爷狈、元素定位參考的是離自身最近的定位祖先元素植影，要滿足兩個(gè)條件，第一個(gè)是自己的祖先元素涎永，可以是父元素也可以是父元素的父元素思币，一直找，如果沒有則選擇body為對照對象羡微。第二個(gè)條件是要求祖先元素必須定位谷饿，通俗說就是position的屬性值為非static都行。
(4)妈倔、fixed
固定定位博投，與absolute一致，但偏移定位是以窗口為參考启涯。當(dāng)出現(xiàn)滾動條時(shí)贬堵，對象不會隨著滾動。
(5)结洼、center
與absolute一致黎做，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中松忍。（CSS3）
(6)蒸殿、page
與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)鸣峭，元素的包含塊始終是初始包含塊宏所，否則取決于每個(gè)absolute模式。（CSS3）
(7)摊溶、sticky
對象在常態(tài)時(shí)遵循常規(guī)流爬骤。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版莫换，當(dāng)卷動到屏幕外時(shí)則表現(xiàn)如fixed霞玄。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果。（CSS3）

問答題70 /72

如何解決多個(gè)元素重疊問題拉岁？

參考答案

使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素坷剧。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文喊暖，除非它是根元素惫企。
整數(shù)：用整數(shù)值來定義堆疊級別×赀矗可以為負(fù)值狞尔。說明：
檢索或設(shè)置對象的層疊順序丛版。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文偏序。
當(dāng)多個(gè)元素層疊在一起時(shí)硼婿，數(shù)字大者將顯示在上面。

問答題71 /72

頁面布局的方式有哪些禽车？

參考答案

方式：雙飛翼、多欄刊殉、彈性殉摔、流式、瀑布流记焊、響應(yīng)式布局（1）逸月、雙飛翼布局經(jīng)典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念遍膜，在國內(nèi)最早是由淘寶UED的工程師傳播開來碗硬，在中國也有叫法是雙飛翼布局，它的布局要求有幾點(diǎn)：a瓢颅、三列布局恩尾，中間寬度自適應(yīng)，兩邊定寬挽懦； b翰意、中間欄要在瀏覽器中優(yōu)先展示渲染； c信柿、允許任意列的高度最高冀偶； d、要求只用一個(gè)額外的DIV標(biāo)簽渔嚷； e进鸠、要求用最簡單的CSS、最少的HACK語句形病；在不增加額外標(biāo)簽的情況下客年，圣

方式：雙飛翼潭陪、多欄攀操、彈性曾我、流式扇商、瀑布流段磨、響應(yīng)式布局

（1）籽前、雙飛翼布局
經(jīng)典三列布局诱鞠，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念闹瞧，在國內(nèi)最早是由淘寶UED的工程師傳播開來欺劳，在中國也有叫法是雙飛翼布局唧取，它的布局要求有幾點(diǎn)：
a铅鲤、三列布局，中間寬度自適應(yīng)枫弟，兩邊定寬邢享；
b、中間欄要在瀏覽器中優(yōu)先展示渲染淡诗；
c骇塘、允許任意列的高度最高；
d韩容、要求只用一個(gè)額外的DIV標(biāo)簽款违；
e、要求用最簡單的CSS群凶、最少的HACK語句插爹；
在不增加額外標(biāo)簽的情況下，圣杯布局已經(jīng)非常完美请梢，圣杯布局使用了相對定位赠尾，以后布局是有局限性的，而且寬度控制要改的地方也多毅弧。在淘寶UED（User Experience Design）探討下气嫁，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距，這就是我們所說的雙飛翼布局咆霜。
(2)、多欄布局
a呈驶、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局拷泽，在bootstrap中用的非常多。
b、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）司致，CSS3為了滿足這個(gè)要求增加了多列布局模塊
(3)拆吆、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box）脂矫，用來提供一個(gè)更加有效的方式制定枣耀、調(diào)整和分布一個(gè)容器里項(xiàng)目布局，即使它們的大小是未知或者動態(tài)的庭再，這里簡稱為Flex捞奕。
Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變拄轻，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小缝彬。

Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置哺眯。例如，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目扒俯，當(dāng)然奶卓，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小撼玄，使其不溢出伸縮容器夺姑。

綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)：
a掌猛、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局盏浙；
b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）荔茬，從而調(diào)整伸縮項(xiàng)目的大蟹媳臁；
c慕蔚、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間丐黄，分配到伸縮項(xiàng)目之前、之后或之間孔飒；
d灌闺、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；
e坏瞄、可以控制元素在頁面上的布局方向桂对；
f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序鸠匀。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序蕉斜。
(4)、瀑布流布局
瀑布流布局是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁面布局蛛勉，視覺表現(xiàn)為參差不齊的多欄布局鹿寻，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部诽凌。最早采用此布局的網(wǎng)站是Pinterest毡熏，逐漸在國內(nèi)流行開來。
優(yōu)點(diǎn)
a侣诵、有效的降低了界面復(fù)雜度痢法，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了。
b杜顺、對觸屏設(shè)備來說财搁，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣躬络，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕尖奔。
c、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上穷当，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中提茁。
缺點(diǎn)
a、有限的用例：
無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容馁菜。
例如茴扁，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁面之間切換汪疮，這種情況下峭火，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中智嚷。
b卖丸、額外的復(fù)雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理盏道，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊坯苹，你必須做好充分的測試與調(diào)整工作。
c摇天、再見了粹湃，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了泉坐。
最好考慮一下頁腳對于你的網(wǎng)站为鳄，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。
千萬不要耍弄你的用戶，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳晌畅，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)偏形，他們會變的越發(fā)憤怒静袖。
d、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)俊扭，與一頁一頁的輸出相比队橙，究竟那種方式更利于SEO，這是你必須考慮的問題萨惑。對于某些以類型網(wǎng)站來說捐康，在這方面進(jìn)行冒險(xiǎn)是很不劃算的。
e庸蔼、關(guān)于頁面數(shù)量的印象：
其實(shí)站在用戶的角度來看解总，這一點(diǎn)并非負(fù)面;不過，如果對于你的網(wǎng)站來說姐仅，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略花枫，那么單頁無限滾動的方式對你并不適用。
(5)掏膏、流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式劳翰。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果，流式布局則不受窗口寬度影響壤追，流式布局使用百分比寬度來限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示供屉。
(6)行冰、響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之伶丐，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本悼做。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)哗魂，而且隨著目前大屏幕移動設(shè)備的普及肛走，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)录别，我們不僅看到很多的創(chuàng)新朽色，還看到了一些成形的模式。
優(yōu)點(diǎn)
a组题、面對不同分辨率設(shè)備靈活性強(qiáng)
b葫男、能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)
a、兼容各種設(shè)備工作量大崔列，效率低下
b梢褐、代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長
c盈咳、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案耿眉，多方面因素影響而達(dá)不到最佳效果
d、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)鱼响，會出現(xiàn)用戶混淆的情況

杯布局已經(jīng)非常完美鸣剪，圣杯布局使用了相對定位，以后布局是有局限性的热押，而且寬度控制要改的地方也多西傀。在淘寶UED（User Experience Design）探討下，增加多一個(gè)div就可以不用相對布局了桶癣，只用到了浮動和負(fù)邊距拥褂，這就是我們所說的雙飛翼布局。(2)牙寞、多欄布局 a饺鹃、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局，在bootstrap中用的非常多间雀。 b悔详、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄），CSS3為了滿足這個(gè)要求增加了多列布局模塊 (3)惹挟、彈性布局（Flexbox） CSS3引入了一種新的布局模式——Flexbox布局茄螃，即伸縮布局盒模型（Flexible Box），用來提供一個(gè)更加有效的方式制定连锯、調(diào)整和分布一個(gè)容器里項(xiàng)目布局归苍，即使它們的大小是未知或者動態(tài)的，這里簡稱為Flex运怖。 Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面拼弃，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小摇展。Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間吻氧，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置。例如咏连，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目盯孙，當(dāng)然，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)祟滴，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小镀梭，使其不溢出伸縮容器。綜合而言踱启，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)： a报账、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局研底；b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）透罢，從而調(diào)整伸縮項(xiàng)目的大邪窕蕖；c羽圃、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間乾胶，分配到伸縮項(xiàng)目之前、之后或之間朽寞；d识窿、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；e脑融、可以控制元素在頁面上的布局方向喻频；f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序肘迎。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序甥温。(4)、瀑布流布局瀑布流布局是流式布局的一種妓布。是當(dāng)下比較流行的一種網(wǎng)站頁面布局姻蚓，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動匣沼，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部狰挡。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來释涛。優(yōu)點(diǎn) a加叁、有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了枢贿。b殉农、對觸屏設(shè)備來說刀脏，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中局荚，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕愈污。c耀态、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中暂雹。缺點(diǎn) a格仲、有限的用例：無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容乃戈。例如，在電商網(wǎng)站當(dāng)中瞧捌，用戶時(shí)常需要在商品列表與詳情頁面之間切換，這種情況下提完，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中。b檬贰、額外的復(fù)雜度：那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理缺亮，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊翁涤，你必須做好充分的測試與調(diào)整工作。c萌踱、再見了葵礼，頁腳：如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了并鸵。最好考慮一下頁腳對于你的網(wǎng)站鸳粉，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式能真。千萬不要耍弄你的用戶赁严，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳粉铐，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)疼约，他們會變的越發(fā)憤怒。d蝙泼、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)程剥，與一頁一頁的輸出相比，究竟那種方式更利于SEO汤踏，這是你必須考慮的問題织鲸。對于某些以類型網(wǎng)站來說，在這方面進(jìn)行冒險(xiǎn)是很不劃算的溪胶。e搂擦、關(guān)于頁面數(shù)量的印象：其實(shí)站在用戶的角度來看，這一點(diǎn)并非負(fù)面;不過哗脖，如果對于你的網(wǎng)站來說瀑踢，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用才避。(5)橱夭、流式布局（Fluid）固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果桑逝，流式布局則不受窗口寬度影響棘劣，流式布局使用百分比寬度來限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示楞遏。(6)茬暇、響應(yīng)式布局響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念首昔，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本糙俗。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的沙廉。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動設(shè)備的普及臼节，用“大勢所趨”來形容也不為過撬陵。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新网缝，還看到了一些成形的模式巨税。優(yōu)點(diǎn) a、面對不同分辨率設(shè)備靈活性強(qiáng)b粉臊、能夠快捷解決多設(shè)備顯示適應(yīng)問題缺點(diǎn) a草添、兼容各種設(shè)備工作量大，效率低下b扼仲、代碼累贅远寸，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長c屠凶、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案驰后，多方面因素影響而達(dá)不到最佳效果d、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)矗愧，會出現(xiàn)用戶混淆的情況

問答題72 /72

overfloa:hidden是否形成新的塊級格式化上下文灶芝？

參考答案

會形成，觸發(fā)BFC的條件有：

float的值不為none唉韭。
overflow的值不為visible夜涕。
display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。
position的值不為relative 和static属愤。

v?{USj?9?3?

問答題48 /72

列出display的值并說明他們的作用女器？

參考答案

none：隱藏對象。與visibility屬性的hidden值不同住诸，其不為被隱藏的對象保留其物理空間
inline：指定對象為內(nèi)聯(lián)元素驾胆。
block：指定對象為塊元素。
list-item：指定對象為列表項(xiàng)目只壳。
inline-block：指定對象為內(nèi)聯(lián)塊元素俏拱。（CSS2）
table：指定對象作為塊元素級的表格暑塑。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格吼句。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格事格。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行惕艳。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組搞隐。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對象作為表格列組顯示远搪。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對象作為表格標(biāo)題組劣纲。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象谁鳍。（CSS3）
box：將對象作為彈性伸縮盒顯示癞季。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示倘潜。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示绷柒。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示涮因。（伸縮盒最新版本）（CSS3）

問答題49 /72

如何居中div, 如何居中一個(gè)浮動元素?

參考答案

(1)废睦、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度养泡，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半嗜湃。
方法二:父元素和子元素同時(shí)左浮動，然后父元素相對左移動50%澜掩，再然后子元素相對左移動-50%购披。
方法三:position定位等等。

問答題50 /72

CSS中l(wèi)ink 和@import 的區(qū)別是肩榕？

參考答案

(1)今瀑、link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2)点把、頁面被加載的時(shí)橘荠，link會同時(shí)被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)郎逃、import只在IE5以上才能識別哥童，而link是HTML標(biāo)簽，無兼容問題;
(4)褒翰、link方式的樣式的權(quán)重高于@import的權(quán)重.

問答題51 /72

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)贮懈、父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題优训。
優(yōu)點(diǎn)：簡單痢畜、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局吭历，要給出精確的高度达址，如果高度和父級div不一樣時(shí)，會產(chǎn)生問題
建議：不推薦使用早敬，只建議高度固定的布局時(shí)使用
(2)忌傻、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div大脉，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點(diǎn)：簡單水孩、代碼少镰矿、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理俘种；如果頁面浮動布局多秤标，就要增加很多空div，讓人感覺很不好
建議：不推薦使用宙刘，但此方法是以前主要使用的一種清除浮動方法
(3)抛杨、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似荐类，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點(diǎn)：瀏覽器支持好怖现、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅玉罐，網(wǎng)易屈嗤，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理吊输，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持饶号。
建議：推薦使用，建議定義公共類季蚂，以減少CSS代碼茫船。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1扭屁，同時(shí)不能定義height算谈，使用overflow:hidden時(shí)，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單料滥、代碼少然眼、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅浑[藏葵腹。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用高每。
(5)、父級div定義 overflow:auto
原理：必須定義width或zoom:1践宴，同時(shí)不能定義height鲸匿，使用overflow:auto時(shí)，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單阻肩、代碼少带欢、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級div時(shí)，會出現(xiàn)滾動條。
建議：不推薦使用洪囤，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

問答題52 /72

block撕氧，inline和inlinke-block細(xì)節(jié)對比瘤缩？

參考答案

?
display:block
a、block元素會獨(dú)占一行伦泥，多個(gè)block元素會各自新起一行剥啤。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度不脯。
b府怯、block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行防楷。
c牺丙、block元素可以設(shè)置margin和padding屬性。
? display:inline
a复局、inline元素不會獨(dú)占一行冲簿，多個(gè)相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下亿昏，才會新?lián)Q一行峦剔，其寬度隨元素的內(nèi)容而變化。
b角钩、inline元素設(shè)置width,height屬性無效吝沫。
c、inline元素的margin和padding屬性递礼，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果惨险；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產(chǎn)生邊距效果。
? display:inline-block
a脊髓、簡單來說就是將對象呈現(xiàn)為inline對象平道，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)供炼。比如我們可以給一個(gè)link（a元素）inline-block屬性值一屋，使其既具有block的寬度高度特性又具有inline的同行特性。
補(bǔ)充說明
a袋哼、一般我們會用display:block冀墨，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種涛贯，僅僅是比較常用而已诽嘉。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block虫腋，理論上IE是不識別的骄酗，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象悦冀。

問答題53 /72

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)趋翻？

參考答案

優(yōu)雅降級： Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器盒蟆，則代碼會檢查以確認(rèn)它們是否能正常工作踏烙。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案历等，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始讨惩，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)寒屯，它們會自動地呈現(xiàn)出來并發(fā)揮作用荐捻。

問答題54 /72

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個(gè)元素浮動寡夹，則該元素之前的元素也需要浮動靴患，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)要出，對于問題(1)鸳君，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)患蹂、額外標(biāo)簽法或颊，<div
style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
(2)传于、使用after偽類

parent:after{

content:" ";
??height:0;
??visibility:hidden;
??display:block;
??clear:both;
}
(3)囱挑、浮動外部元素
(4)、設(shè)置overflow為hidden或者auto

問答題55 /72

你有哪些性能優(yōu)化的方法沼溜？

參考答案

回答一：

（1）平挑、減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮系草、圖片大小控制合適通熄；網(wǎng)頁Gzip，CDN托管找都，data緩存
唇辨，圖片服務(wù)器。
（2）能耻、前端模板 JS+數(shù)據(jù)赏枚，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)亡驰，前端用變量保存AJAX請求結(jié)果，每次操作本地變量饿幅，不用請求凡辱，減少請求次數(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(動態(tài)屬性)。
（7）其弊、圖片預(yù)加載癞己，將樣式表放在頂部，將腳本放在底部加上時(shí)間戳梭伐。

回答二：

(1)痹雅、減少HTTP請求次數(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請求

問答題56 /72

為什么要初始化CSS樣式赌渣？

參考答案

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

問答題57 /72

解釋下浮動和它的工作原理？清除浮動的技巧千贯？

參考答案

浮動元素脫離文檔流屯仗，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留搔谴。
(1)魁袜、使用空標(biāo)簽清除浮動。
這種方法是在所有浮動標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both. 弊端就是增加了無意義標(biāo)簽敦第。
(2)峰弹、使用overflow。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6芜果。
(3)鞠呈、使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器右钾。具體寫法可參照以下示例蚁吝。使用中需注意以下幾點(diǎn)。一舀射、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0窘茁，否則該元素會比實(shí)際高出若干像素；

問答題58 /72

CSS樣式表根據(jù)所在網(wǎng)頁的位置脆烟，可分為哪幾種樣式表山林？

參考答案

行內(nèi)樣式表，內(nèi)嵌樣式表邢羔，外部樣式表

問答題59 /72

談?wù)勀銓SS中刻度的認(rèn)識驼抹？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位。
a张抄、特殊值0可以省略單位砂蔽。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負(fù)長度值署惯，或者有一定的范圍限制左驾。如果不支持負(fù)長度值，那應(yīng)該變換到能夠被支持的最近的一個(gè)長度值极谊。
c诡右、長度單位包括：相對單位和絕對單位。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸轻猖，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置帆吻，則相對于瀏覽器的默認(rèn)字體尺寸。(相對父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個(gè)相對單位（root em咙边，根em）猜煮，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素次员，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式王带，多數(shù)是可以被修改的淑蔚，但chrome不能直接修改，可以被用戶樣式覆蓋愕撰。

問答題60 /72

請你說說em與rem的區(qū)別刹衫？

參考答案

rem
rem是CSS3新增的一個(gè)相對單位（root em，根em）搞挣，相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位带迟。簡單的說它就是一個(gè)相對單位。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局囱桨，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化仓犬，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸蝇摸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置婶肩，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)办陷。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位貌夕。它與rem之間其實(shí)很相似，區(qū)別在民镜。（相對是的HTML元素的字體大啡专，默認(rèn)16px）
em與rem的重要區(qū)別：它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算

問答題61 /72

請你說說box-sizing屬性的的用法？

參考答案

設(shè)置或檢索對象的盒模型組成模式

a制圈、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)们童。對象的實(shí)際寬度等于設(shè)置的width值和border、padding之和鲸鹦，即( Element width = width + border + padding慧库，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
b馋嗜、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)齐板。對象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實(shí)際寬度葛菇，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型甘磨。

問答題62 /72

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

參考答案

在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染眯停，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計(jì)济舆、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式莺债；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式滋觉，而如果它缺失則瀏覽器將會采用怪異模式签夭。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下椎侠，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中覆致，
box width = content width + padding left + padding right + border left + border
right，
box height = content height + padding top + padding bottom + border top +
border bottom肺蔚。
而在 W3C 標(biāo)準(zhǔn)的盒模型中煌妈，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素宣羊，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline璧诵。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)，如table的單元格table-cell仇冯。在 IE Quirks Mode 下之宿，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom，因此苛坚，在圖片底部會有幾像素的空間比被。
（3）<table>元素中的字體:
CSS 中章姓，描述font的屬性有font-family备籽，font-size原环，font-style蚕钦，font-weigh,上述屬性都是可以繼承的风宁。而在IE Quirks Mode 下旁钧，對于table 元素具温，字體的某些屬性將不會從body或其他封閉元素繼承到table中硅则，特別是 font-size屬性冒掌。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下噪裕，non-replaced inline 元素?zé)o法自定義大小，而在IE Quirks Mode 下股毫，定義這些元素的width和height 屬性膳音，能夠影響該元素顯示的大小尺寸。
（5）
元素的百分比高度:
a铃诬、CSS 中對于元素的百分比高度規(guī)定如下祭陷，百分比為元素包含塊的高度，不可為負(fù)值氧急。如果包含塊的高度沒有顯式給出颗胡，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時(shí)使用吩坝。
b毒姨、當(dāng)一個(gè)元素使用百分比高度時(shí)，在IE Standards Mode 下钉寝，高度取決于內(nèi)容的變化弧呐，而在Quirks Mode 下闸迷，百分比高度則被正確應(yīng)用。
（6）
元素溢出的處理：
在 IE Standard Mode 下俘枫，overflow取默認(rèn)值 visible腥沽，即溢出可見，這種情況下鸠蚪，溢出內(nèi)容不會被裁剪今阳，呈現(xiàn)在元素框外。而在Quirks Mode 下茅信，該溢出被當(dāng)做擴(kuò)展box來對待盾舌，即元素的大小由其內(nèi)容決定，溢出不會被裁剪蘸鲸，元素框自動調(diào)整妖谴，包含溢出內(nèi)容。

問答題63 /72

怪異Quirks模式是什么酌摇，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別膝舅？

參考答案

從IE6開始，引入了Standards模式窑多，標(biāo)準(zhǔn)模式中仍稀，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟怯伊，所以IE5等之前的瀏覽器對CSS的支持很差琳轿， IE6將對CSS提供更好的支持判沟，然而這時(shí)的問題就來了耿芹，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常挪哄，如何在即保證不破壞現(xiàn)有頁面吧秕，又提供新的渲染機(jī)制呢？

在寫程序時(shí)我們也會經(jīng)常遇到這樣的問題迹炼，如何保證原來的接口不變砸彬，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)斯入。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支砂碉，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能刻两，而如果這個(gè)參數(shù) 不為真時(shí)增蹭，就使用舊功能，這樣就能不破壞原有的程序磅摹，又提供新功能滋迈。IE6也是類似這樣做的霎奢，它將DTD當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻撁娲蠹叶疾粫慏TD饼灿，所以IE6就假定如果寫了DTD幕侠，就意味著這個(gè)頁面將采用對CSS支持更好的布局，而如果沒有碍彭，則采用兼容之前的布局方式晤硕。這就是Quirks模式（怪癖模式，詭異模式庇忌，怪異模式）窗骑。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別漆枚。

盒模型：在W3C標(biāo)準(zhǔn)中创译，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度墙基，而在Quirks 模式下软族，IE的寬度和高度還包含了padding和border。

設(shè)置行內(nèi)元素的高寬：在Standards模式下残制，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效立砸，而在quirks模式下，則會生效初茶。
設(shè)置百分比的高度：在standards模式下颗祝，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度恼布，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中螺戳，但在quirks模式下卻會失效。
（還有很多折汞，答出什么不重要倔幼，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的爽待，甚至完全不知道损同。）

問答題64 /72

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會合并成一個(gè)外邊距（margin）
相鄰：沒有被非空內(nèi)容、padding鸟款、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計(jì)算:
a膏燃、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b何什、參與折疊的margin 都是負(fù)值：取的是其中絕對值較大的组哩，然后，從0 位置，負(fù)向位移禁炒。
c而咆、參與折疊的margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對值中最大的幕袱，然后暴备，和正margin 值中最大的 margin 相加。

問答題65 /72

內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別们豌？

參考答案

Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型涯捻，一類為塊級元素，另一類是行內(nèi)元素望迎，許多人也把行內(nèi)稱為內(nèi)聯(lián)障癌，所以叫內(nèi)聯(lián)元素，其實(shí)就是一個(gè)意思辩尊。為了很好的布局涛浙，必須理解它們間的區(qū)別。

問答題66 /72

說說隱藏元素的方式有哪些摄欲？

參考答案

a轿亮、使用CSS的display:none，不會占有原來的位置
b胸墙、使用CSS的visibility:hidden我注，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"迟隅，不會占有原來的位置

問答題67 /72

為什么重置瀏覽器默認(rèn)樣式但骨，如何重置默瀏覽器認(rèn)樣式？

參考答案

每種瀏覽器都有一套默認(rèn)的樣式表智袭，即user agent stylesheet奔缠，網(wǎng)頁在沒有指定的樣式時(shí)，按瀏覽器內(nèi)置的樣式表來渲染补履。這是合理的抽米，像word中也有一些預(yù)留樣式走哺，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的僚焦。但這樣會有很多兼容問題雨女。

a谚攒、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b氛堕、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣馏臭。

c、normalize：也許有些cssreset過于簡單粗暴，有點(diǎn)傷及無辜括儒，normalize是另一個(gè)選擇绕沈。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式，比普通的cssreset要精細(xì)一些帮寻，保留瀏覽器有用的默認(rèn)樣式乍狐，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對HTML5元素固逗、排版浅蚪、列表、嵌入的內(nèi)容烫罩、表單和表格都進(jìn)行了一般化惜傲。

天貓使用的css reset重置瀏覽器默認(rèn)樣式：

問答題68 /72

談?wù)勀銓FC與IFC的理解？(是什么贝攒，如何產(chǎn)生盗誊，作用)

參考答案

(1)、什么是BFC與IFC
a隘弊、BFC（Block Formatting Context）即“塊級格式化上下文”浊伙， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流长捧、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)嚣鄙。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文，你可以把BFC想象成一個(gè)大箱子串结，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用哑子。

b、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念肌割，它決定了元素如何對其內(nèi)容進(jìn)行定位卧蜓，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候把敞，Block Formatting Context提供了一個(gè)環(huán)境弥奸，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會影響到其它環(huán)境中的布局奋早。比如浮動元素會形成BFC盛霎，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個(gè)浮動元素之間是互不影響的耽装。也可以說BFC就是一個(gè)作用范圍愤炸。

c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) 掉奄，類型可以是 block 规个，或者是 inline ，但不能同時(shí)屬于這兩者。并且诞仓，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化缤苫， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。

(2)墅拭、如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)活玲，都可以產(chǎn)生Block Formatting Context：
a、float的值不為none
b帜矾、overflow的值不為visible
c翼虫、display的值為table-cell, table-caption, inline-block中的任何一個(gè)
d、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static屡萤，relative的情況下觸發(fā)珍剑，float也是一種定位方式。

(3)死陆、BFC的作用與特點(diǎn)
a招拙、不和浮動元素重疊，清除外部浮動措译，阻止浮動元素覆蓋

如果一個(gè)浮動元素后面跟著一個(gè)非浮動的元素别凤，那么就會產(chǎn)生一個(gè)重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流领虹、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)规哪，當(dāng)float不為none時(shí)，position為absolute塌衰、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流诉稍。

問答題69 /72

說說你對頁面中使用定位(position)的理解？

參考答案

使用css布局position非常重要最疆，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static杯巨，center、page努酸、sticky是CSS3中新增加的值服爷。
(1)、static
可以認(rèn)為靜態(tài)的获诈，默認(rèn)元素都是靜態(tài)的定位仍源，對象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會被應(yīng)用烙荷，也就是使用left镜会，right，bottom终抽，top將不會生效。
(2)、relative
相對定位昼伴，對象遵循常規(guī)流匾旭，并且參照自身在常規(guī)流中的位置通過top，right圃郊，bottom价涝，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會影響常規(guī)流中的任何元素。
(3)持舆、absolute
a色瘩、絕對定位，對象脫離常規(guī)流逸寓，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素居兆，如果沒有定位的祖先元素，則一直回溯到body元素竹伸。盒子的偏移位置不影響常規(guī)流中的任何元素泥栖，其margin不與其他任何margin折疊。
b勋篓、元素定位參考的是離自身最近的定位祖先元素吧享，要滿足兩個(gè)條件，第一個(gè)是自己的祖先元素譬嚣，可以是父元素也可以是父元素的父元素钢颂，一直找，如果沒有則選擇body為對照對象拜银。第二個(gè)條件是要求祖先元素必須定位殊鞭，通俗說就是position的屬性值為非static都行。
(4)盐股、fixed
固定定位钱豁，與absolute一致，但偏移定位是以窗口為參考疯汁。當(dāng)出現(xiàn)滾動條時(shí)牲尺，對象不會隨著滾動。
(5)幌蚊、center
與absolute一致谤碳，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中溢豆。（CSS3）
(6)蜒简、page
與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)漩仙，元素的包含塊始終是初始包含塊搓茬，否則取決于每個(gè)absolute模式犹赖。（CSS3）
(7)、sticky
對象在常態(tài)時(shí)遵循常規(guī)流卷仑。它就像是relative和fixed的合體峻村，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動到屏幕外時(shí)則表現(xiàn)如fixed锡凝。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果粘昨。（CSS3）

問答題70 /72

如何解決多個(gè)元素重疊問題？

參考答案

使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素窜锯。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級別是0音比。元素不會創(chuàng)建新的局部層疊上下文策橘，除非它是根元素凛捏。
整數(shù)：用整數(shù)值來定義堆疊級別箩朴。可以為負(fù)值工秩。說明：
檢索或設(shè)置對象的層疊順序尸饺。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文助币。
當(dāng)多個(gè)元素層疊在一起時(shí)浪听，數(shù)字大者將顯示在上面。

問答題71 /72

頁面布局的方式有哪些眉菱？

參考答案

方式：雙飛翼迹栓、多欄、彈性俭缓、流式克伊、瀑布流、響應(yīng)式布局（1）华坦、雙飛翼布局經(jīng)典三列布局愿吹，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來惜姐，在中國也有叫法是雙飛翼布局犁跪，它的布局要求有幾點(diǎn)：a、三列布局歹袁，中間寬度自適應(yīng)坷衍，兩邊定寬； b条舔、中間欄要在瀏覽器中優(yōu)先展示渲染枫耳； c、允許任意列的高度最高孟抗； d迁杨、要求只用一個(gè)額外的DIV標(biāo)簽钻心； e、要求用最簡單的CSS仑最、最少的HACK語句扔役；在不增加額外標(biāo)簽的情況下帆喇，圣

方式：雙飛翼警医、多欄、彈性坯钦、流式预皇、瀑布流、響應(yīng)式布局

（1）婉刀、雙飛翼布局
經(jīng)典三列布局吟温，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個(gè)布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來突颊，在中國也有叫法是雙飛翼布局鲁豪，它的布局要求有幾點(diǎn)：
a、三列布局律秃，中間寬度自適應(yīng)爬橡，兩邊定寬；
b棒动、中間欄要在瀏覽器中優(yōu)先展示渲染糙申；
c、允許任意列的高度最高船惨；
d柜裸、要求只用一個(gè)額外的DIV標(biāo)簽；
e粱锐、要求用最簡單的CSS疙挺、最少的HACK語句；
在不增加額外標(biāo)簽的情況下怜浅，圣杯布局已經(jīng)非常完美铐然，圣杯布局使用了相對定位，以后布局是有局限性的海雪，而且寬度控制要改的地方也多锦爵。在淘寶UED（User Experience Design）探討下，增加多一個(gè)div就可以不用相對布局了奥裸，只用到了浮動和負(fù)邊距险掀，這就是我們所說的雙飛翼布局。
(2)湾宙、多欄布局
a樟氢、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局冈绊，在bootstrap中用的非常多。
b埠啃、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄）死宣，CSS3為了滿足這個(gè)要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局碴开，即伸縮布局盒模型（Flexible Box）毅该，用來提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里項(xiàng)目布局潦牛，即使它們的大小是未知或者動態(tài)的眶掌，這里簡稱為Flex。
Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面巴碗，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變朴爬，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。

Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間橡淆，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置召噩。例如，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目逸爵，當(dāng)然具滴，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小痊银，使其不溢出伸縮容器抵蚊。

綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)：
a溯革、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局贞绳；
b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）致稀，從而調(diào)整伸縮項(xiàng)目的大懈员铡；
c抖单、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間萎攒，分配到伸縮項(xiàng)目之前、之后或之間矛绘；
d耍休、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；
e货矮、可以控制元素在頁面上的布局方向羊精；
f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序囚玫。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序喧锦。
(4)读规、瀑布流布局
瀑布流布局是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁面布局燃少，視覺表現(xiàn)為參差不齊的多欄布局束亏，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部阵具。最早采用此布局的網(wǎng)站是Pinterest碍遍，逐漸在國內(nèi)流行開來。
優(yōu)點(diǎn)
a怔昨、有效的降低了界面復(fù)雜度雀久，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了。
b趁舀、對觸屏設(shè)備來說，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中祝沸，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣矮烹，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。
c罩锐、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上奉狈，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。
缺點(diǎn)
a涩惑、有限的用例：
無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容仁期。
例如，在電商網(wǎng)站當(dāng)中竭恬，用戶時(shí)常需要在商品列表與詳情頁面之間切換跛蛋，這種情況下，傳統(tǒng)的痊硕、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中赊级。
b、額外的復(fù)雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊哮笆，你必須做好充分的測試與調(diào)整工作鸽心。
c、再見了潜秋，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了。
最好考慮一下頁腳對于你的網(wǎng)站羡洛，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式扁掸。
千萬不要耍弄你的用戶翘县，當(dāng)他們一次次的瀏覽到頁面底部最域，看到頁腳，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)锈麸，他們會變的越發(fā)憤怒镀脂。
d、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)忘伞，與一頁一頁的輸出相比薄翅，究竟那種方式更利于SEO，這是你必須考慮的問題氓奈。對于某些以類型網(wǎng)站來說翘魄，在這方面進(jìn)行冒險(xiǎn)是很不劃算的。
e舀奶、關(guān)于頁面數(shù)量的印象：
其實(shí)站在用戶的角度來看暑竟，這一點(diǎn)并非負(fù)面;不過，如果對于你的網(wǎng)站來說育勺，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略但荤，那么單頁無限滾動的方式對你并不適用。
(5)涧至、流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式腹躁。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果，流式布局則不受窗口寬度影響南蓬，流式布局使用百分比寬度來限定布局元素纺非，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示。
(6)赘方、響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念烧颖，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本蒜焊。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的倒信。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動設(shè)備的普及泳梆，用“大勢所趨”來形容也不為過鳖悠。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新优妙，還看到了一些成形的模式乘综。
優(yōu)點(diǎn)
a、面對不同分辨率設(shè)備靈活性強(qiáng)
b套硼、能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)
a卡辰、兼容各種設(shè)備工作量大，效率低下
b、代碼累贅九妈，會出現(xiàn)隱藏?zé)o用的元素反砌，加載時(shí)間加長
c、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案萌朱，多方面因素影響而達(dá)不到最佳效果
d宴树、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

杯布局已經(jīng)非常完美晶疼，圣杯布局使用了相對定位酒贬，以后布局是有局限性的，而且寬度控制要改的地方也多翠霍。在淘寶UED（User Experience Design）探討下锭吨，增加多一個(gè)div就可以不用相對布局了，只用到了浮動和負(fù)邊距寒匙，這就是我們所說的雙飛翼布局零如。(2)、多欄布局 a蒋情、欄柵格系統(tǒng)：就是利用浮動實(shí)現(xiàn)的多欄布局埠况，在bootstrap中用的非常多。 b棵癣、多列布局：柵格系統(tǒng)并沒有真正實(shí)現(xiàn)分欄效果（如word中的分欄），CSS3為了滿足這個(gè)要求增加了多列布局模塊 (3)夺衍、彈性布局（Flexbox） CSS3引入了一種新的布局模式——Flexbox布局狈谊，即伸縮布局盒模型（Flexible Box），用來提供一個(gè)更加有效的方式制定沟沙、調(diào)整和分布一個(gè)容器里項(xiàng)目布局河劝，即使它們的大小是未知或者動態(tài)的，這里簡稱為Flex矛紫。 Flexbox布局常用于設(shè)計(jì)比較復(fù)雜的頁面赎瞎，可以輕松的實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對位置和大小不變，同時(shí)減少了依賴于浮動布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小颊咬。Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會預(yù)留一些可用空間务甥，讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對大小和位置。例如喳篇，你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目敞临，當(dāng)然，如果你的伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)麸澜，瀏覽器會根據(jù)一定的比例減少伸縮項(xiàng)目的大小挺尿，使其不溢出伸縮容器。綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點(diǎn)： a编矾、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局熟史；b、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間）窄俏，從而調(diào)整伸縮項(xiàng)目的大絮迤ァ；c裆操、可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間怒详，分配到伸縮項(xiàng)目之前、之后或之間踪区；d昆烁、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；e缎岗、可以控制元素在頁面上的布局方向静尼；f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序传泊。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項(xiàng)目順序鼠渺。(4)、瀑布流布局瀑布流布局是流式布局的一種眷细。是當(dāng)下比較流行的一種網(wǎng)站頁面布局拦盹，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動溪椎，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部普舆。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來校读。優(yōu)點(diǎn) a沼侣、有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了歉秫。b蛾洛、對觸屏設(shè)備來說，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中雁芙，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣轧膘，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。c却特、更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上扶供，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。缺點(diǎn) a裂明、有限的用例：無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容椿浓。例如太援，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁面之間切換扳碍，這種情況下提岔，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中笋敞。b碱蒙、額外的復(fù)雜度：那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理夯巷，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊赛惩，你必須做好充分的測試與調(diào)整工作。c趁餐、再見了喷兼，頁腳：如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了后雷。最好考慮一下頁腳對于你的網(wǎng)站季惯，特別是用戶的重要性;如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式臀突。千萬不要耍弄你的用戶勉抓，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳候学，卻因?yàn)樽詣蛹虞d的內(nèi)容突然出現(xiàn)而無論如何都無法點(diǎn)擊頁腳中的鏈接時(shí)藕筋，他們會變的越發(fā)憤怒。d梳码、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)念逞，與一頁一頁的輸出相比，究竟那種方式更利于SEO边翁，這是你必須考慮的問題。對于某些以類型網(wǎng)站來說硕盹，在這方面進(jìn)行冒險(xiǎn)是很不劃算的符匾。e、關(guān)于頁面數(shù)量的印象：其實(shí)站在用戶的角度來看瘩例，這一點(diǎn)并非負(fù)面;不過啊胶，如果對于你的網(wǎng)站來說，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略垛贤，那么單頁無限滾動的方式對你并不適用。(5)、流式布局（Fluid）固定布局和流式布局在網(wǎng)頁設(shè)計(jì)中最常用的兩種布局方式士聪。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計(jì)效果蹋艺，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示黔漂。(6)诫尽、響應(yīng)式布局響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之炬守，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本牧嫉。這個(gè)概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)减途，而且隨著目前大屏幕移動設(shè)備的普及酣藻，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)鳍置，我們不僅看到很多的創(chuàng)新辽剧，還看到了一些成形的模式。優(yōu)點(diǎn) a墓捻、面對不同分辨率設(shè)備靈活性強(qiáng)b抖仅、能夠快捷解決多設(shè)備顯示適應(yīng)問題缺點(diǎn) a、兼容各種設(shè)備工作量大砖第，效率低下b撤卢、代碼累贅，會出現(xiàn)隱藏?zé)o用的元素梧兼，加載時(shí)間加長c放吩、其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果d羽杰、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)渡紫，會出現(xiàn)用戶混淆的情況

問答題72 /72

overfloa:hidden是否形成新的塊級格式化上下文？

參考答案

會形成考赛，觸發(fā)BFC的條件有：

float的值不為none惕澎。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block 中的任何一個(gè)颜骤。
position的值不為relative 和static唧喉。

v?{USj?9?3?

最后編輯于：2017.12.06 02:12:23

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市忍抽，隨后出現(xiàn)的幾起案子八孝，更是在濱河造成了極大的恐慌，老刑警劉巖鸠项，帶你破解...
沈念sama閱讀 206,013評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件干跛，死亡現(xiàn)場離奇詭異，居然都是意外死亡祟绊，警方通過查閱死者的電腦和手機(jī)楼入，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,205評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門哥捕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人浅辙，你說我怎么就攤上這事扭弧。” “怎么了记舆？”我有些...
開封第一講書人閱讀 152,370評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵鸽捻，是天一觀的道長。經(jīng)常有香客問我泽腮，道長御蒲，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,168評論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任诊赊，我火速辦了婚禮厚满，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘碧磅。我一直安慰自己碘箍，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,153評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布鲸郊。她就那樣靜靜地躺著丰榴，像睡著了一般。火紅的嫁衣襯著肌膚如雪秆撮。梳的紋絲不亂的頭發(fā)上四濒，一...
開封第一講書人閱讀 48,954評論 1贊 283
城市分裂傳說
那天，我揣著相機(jī)與錄音职辨，去河邊找鬼盗蟆。笑死，一個(gè)胖子當(dāng)著我的面吹牛舒裤，可吹牛的內(nèi)容都是我干的喳资。我是一名探鬼主播，決...
沈念sama閱讀 38,271評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼腾供，長吁一口氣：“原來是場噩夢啊……” “哼骨饿！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起台腥，我...
開封第一講書人閱讀 36,916評論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎绒北，沒想到半個(gè)月后黎侈，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,382評論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡闷游，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,877評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年峻汉，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贴汪。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 37,989評論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡休吠，死狀恐怖扳埂，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情瘤礁，我是刑警寧澤阳懂，帶...
沈念sama閱讀 33,624評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站柜思，受9級特大地震影響岩调，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赡盘，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,209評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一号枕、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧陨享，春花似錦葱淳、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,199評論 0贊 19
一樁弒父案赞厕，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至途戒，卻和暖如春坑傅，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背喷斋。一陣腳步聲響...
開封第一講書人閱讀 31,418評論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工唁毒，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人星爪。一個(gè)月前我還...
沈念sama閱讀 45,401評論 2贊 352
代替公主和親
正文我出身青樓浆西，卻偏偏與公主長得像，于是被迫代替她去往敵國和親顽腾。傳聞我的和親對象是個(gè)殘疾皇子近零，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,700評論 2贊 345

HTML+CSS(47-72)

parent:after{

parent:after{

parent:after{

parent:after{

parent:after{

推薦閱讀更多精彩內(nèi)容