css橫向滾動_前端三賤客——每個人都會碰到的問題（html+css）

常見浏覽器相容性問題與解決方案？

參考答案

(1)浏覽器相容問題一：不同浏覽器的标簽預設的外更新檔和内更新檔不同

問題症狀：随便寫幾個标簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS裡 {margin:0;padding:0;}

備注：這個是最常見的也是最易解決的一個浏覽器相容性問題，幾乎所有的CSS檔案開頭都會用通配符來設定各個标簽的内外更新檔是0。

(2)浏覽器相容問題二：塊屬性标簽float後，又有橫行的margin情況下，在IE6顯示margin比設定的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%(稍微複雜點的頁面都會碰到，float布局最常見的浏覽器相容問題)

解決方案：在float的标簽樣式控制中加入 display:inline;将其轉化為行内屬性

備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性标簽，橫向布局的時候我們通常都是用div float實作的，橫向的間距設定如果用margin實作，這就是一個必然會碰到的相容性問題。

(3)浏覽器相容問題三：設定較小高度标簽(一般小于10px)，在IE6，IE7，遨遊中高度超出自己設定高度

問題症狀：IE6、7和遨遊裡這個标簽的高度不受控制，超出自己設定的高度

碰到頻率：60%

解決方案：給超出高度的标簽設定overflow:hidden;或者設定行高line-height 小于你設定的高度。

備注：這種情況一般出現在我們設定小圓角背景的标簽裡。出現這個問題的原因是IE8之前的浏覽器都會給标簽一個最小預設的行高的高度。即使你的标簽是空的，這個标簽的高度還是會達到預設的行高。

(4)浏覽器相容問題四：行内屬性标簽，設定display:block後采用float布局，又有橫行的margin的情況，IE6間距bug

問題症狀：IE6裡的間距比超過設定的間距

碰到幾率：20%

解決方案 ： 在display:block;後面加入display:inline;display:table;

備注：行内屬性标簽，為了設定寬高，我們需要設定display:block;(除了input标簽比較特殊)。在用float布局并有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行内屬性标簽，是以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

(5) 浏覽器相容問題五：圖檔預設有間距

問題症狀：幾個img标簽放在一起的時候，有些浏覽器會有預設的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注 ： 因為img标簽是行内屬性标簽，是以隻要不超出容器寬度，img标簽都會排在一行裡，但是部分浏覽器的img标簽之間會有個間距。去掉這個間距使用float是正道。(我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起浏覽器相容問題的用法，是以我禁止他們使用)

(6) 浏覽器相容問題六：标簽最低高度設定min-height不相容

問題症狀：因為min-height本身就是一個不相容的CSS屬性，是以設定min-height時不能很好的被各個浏覽器相容

碰到幾率：5%

解決方案：如果我們要設定一個标簽的最小高度200px，需要進行的設定為：{min-height:200px; height:auto !important;

height:200px; overflow:visible;}

備注：在B/S系統前端開時，有很多情況下我們又這種需求。當内容小于一個值(如300px)時。容器的高度為300px；當内容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。

(7)浏覽器相容問題七：透明度的相容CSS設定

一般在ie中用的是filter:alpha(opacity=0);這個屬性來設定div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于相容的，一般的做法就是在書寫css樣式的将2個都寫上就行，就能實作相容

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

參考答案

display： none | inline | block |

list-item | inline-block | table | inline-table |

table-caption | table-cell | table-row | table-row-group | table-column |

table-column-group | table-footer-group | table-header-group | run-in | box |

inline-box | flexbox | inline-flexbox | flex | inline-flex

預設值：inline

none： 隐藏對象。與visibility屬性的hidden值不同，其不為被隐藏的對象保留其實體空間

inline： 指定對象為内聯元素。

block： 指定對象為塊元素。

list-item：指定對象為清單項目。

inline-block： 指定對象為内聯塊元素。(CSS2)

table： 指定對象作為塊元素級的表格。類同于html标簽

inline-table：指定對象作為内聯元素級的表格。類同于html标簽

table-caption：指定對象作為表格标題。類同于html标簽

(CSS2)

table-cell：指定對象作為表格單元格。類同于html标簽

(CSS2)

table-row：指定對象作為表格行。類同于html标簽

(CSS2)

table-row-group：指定對象作為表格行組。類同于html标簽

(CSS2)

table-column：指定對象作為表格列。類同于html标簽

(CSS2)

table-column-group： 指定對象作為表格列組顯示。類同于html标簽

(CSS2)

table-header-group： 指定對象作為表格标題組。類同于html标簽(CSS2)

table-footer-group： 指定對象作為表格腳注組。類同于html标簽

(CSS2)

run-in：根據上下文決定對象是内聯對象還是塊級對象。(CSS3)

box：将對象作為彈性伸縮盒顯示。(伸縮盒最老版本)(CSS3)

inline-box：将對象作為内聯塊級彈性伸縮盒顯示。(伸縮盒最老版本)(CSS3)

flexbox：将對象作為彈性伸縮盒顯示。(伸縮盒過渡版本)(CSS3)

inline-flexbox：将對象作為内聯塊級彈性伸縮盒顯示。(伸縮盒過渡版本)(CSS3)

flex：将對象作為彈性伸縮盒顯示。(伸縮盒最新版本)(CSS3)

inline-flex：将對象作為内聯塊級彈性伸縮盒顯示。(伸縮盒最新版本)(CSS3)

如何居中div, 如何居中一個浮動元素?

參考答案

(1)、非浮動元素居中：可以設定margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等

(2)、浮動元素居中:

方法一:設定目前div的寬度，然後設定margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。

方法二:父元素和子元素同時左浮動，然後父元素相對左移動50%，再然後子元素相對左移動-50%。

方法三:position定位等等。

CSS中link 和@import 的差別是？

參考答案

(1)、link屬于HTML标簽，而@import是CSS提供的;

(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3)、import隻在IE5以上才能識别，而link是HTML标簽，無相容問題;

(4)、link方式的樣式的權重高于@import的權重.

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

參考答案

(1)、父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動擷取到高度的問題。

優點：簡單、代碼少、容易掌握

缺點：隻适合高度固定的布局，要給出精确的高度，如果高度和父級div不一樣時，會産生問題

建議：不推薦使用，隻建議高度固定的布局時使用

(2)、結尾處加空div标簽 clear:both

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動擷取到高度

優點：簡單、代碼少、浏覽器支援好、不容易出現怪問題

缺點：不少初學者不了解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

(3)、父級div定義

僞類:after 和 zoom

原理：IE8以上和非IE浏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：浏覽器支援好、不容易出現怪問題(目前：大型網站都有使用，如：騰迅，網易，新浪等等)

缺點：代碼多、不少初學者不了解原理，要兩句代碼結合使用才能讓主流浏覽器都支援。

建議：推薦使用，建議定義公共類，以減少CSS代碼。

(4)、父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，浏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、浏覽器支援好

缺點：不能和position配合使用，因為超出的尺寸的會被隐藏。

建議：隻推薦沒有使用position或對overflow:hidden了解比較深的朋友使用。

(5)、父級div定義 overflow:auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，浏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、浏覽器支援好

缺點：内部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，如果你需要出現滾動條或者確定你的代碼不會出現滾動條就使用吧。

block，inline和inlinke-block細節對比？

參考答案

•

display:block

a、block元素會獨占一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。

b、block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨占一行。

c、block元素可以設定margin和padding屬性。

• display:inline

a、inline元素不會獨占一行，多個相鄰的行内元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度随元素的内容而變化。

b、inline元素設定width,height屬性無效。

c、inline元素的margin和padding屬性，水準方向的padding-left, padding-right, margin-left,

margin-right都産生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,

margin-bottom不會産生邊距效果。

• display:inline-block

a、簡單來說就是将對象呈現為inline對象，但是對象的内容作為block對象呈現。之後的内聯對象會被排列在同一行内。比如我們可以給一個link(a元素)inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

補充說明

a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級别，其實display的參數遠遠不止這三種，僅僅是比較常用而已。

b、IE(低版本IE)本來是不支援inline-block的，是以在IE中對内聯元素使用display:inline-block，理論上IE是不識别的，但使用display:inline-block在IE下會觸發layout，進而使内聯元素擁有了display:inline-block屬性的表象。

什麼叫優雅降級和漸進增強？

參考答案

優雅降級： Web站點在所有新式浏覽器中都能正常工作，如果使用者使用的是老式浏覽器，則代碼會檢查以确認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的浏覽器增加候選方案，使之在舊式浏覽器上以某種形式降級體驗卻不至于完全失效.

漸進增強： 從被所有浏覽器支援的基本功能開始，逐漸地添加那些隻有新式浏覽器才支援的功能,向頁面增加無害于基礎浏覽器的額外樣式和功能的。當浏覽器支援時，它們會自動地呈現出來并發揮作用。

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

參考答案

問題：

(1)父元素的高度無法被撐開，影響與父元素同級的元素

(2)與浮動元素同級的非浮動元素會跟随其後

(3)若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對于問題(1)，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear:

both;visibility: hidden;}

.clearfix{display: inline-block;}

清除浮動的幾種方法：

(1)、額外标簽法，

style="clear:both;">

(缺點：不過這個辦法會增加額外的标簽使HTML結構看起來不夠簡潔。)

(2)、使用after僞類

parent:after{

content:" ";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮動外部元素

(4)、設定overflow為hidden或者auto

你有哪些性能優化的方法？

參考答案

回答一：

(1)、減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖檔大小控制合适；網頁Gzip，CDN托管，data緩存

，圖檔伺服器。

(2)、前端模闆 JS+資料，減少由于HTML标簽導緻的帶寬浪費，前端用變量儲存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

(3)、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

(4)、當需要設定的樣式很多時設定className而不是直接操作style。

(5)、少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

(6)、避免使用CSS Expression(css表達式)又稱Dynamic properties(動态屬性)。

(7)、圖檔預加載，将樣式表放在頂部，将腳本放在底部加上時間戳。

回答二：

(1)、減少HTTP請求次數

(2)、使用CDN

(3)、避免空的src和href

(4)、為檔案頭指定Expires

(5)、使用gzip壓縮内容

(6)、把CSS放到頂部

(7)、把JS放到底部

(8)、避免使用CSS表達式

(9)、将CSS和JS放到外部檔案中

(10)、避免跳轉

(11)、可緩存的AJAX

(12)、使用GET來完成AJAX請求

為什麼要初始化CSS樣式？

參考答案

因為浏覽器的相容問題，不同浏覽器對有些标簽的預設值是不同的，如果沒對CSS初始化往往會出現浏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是： {padding: 0; margin: 0;} (不建議)

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

參考答案

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

(1)、使用空标簽清除浮動。

這種方法是在所有浮動标簽後面添加一個空标簽 定義css clear:both. 弊端就是增加了無意義标簽。

(2)、使用overflow。

給包含浮動元素的父标簽添加css屬性 overflow:auto; zoom:1; zoom:1用于相容IE6。

(3)、使用after僞對象清除浮動。

該方法隻适用于非IE浏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的僞對象中設定height:0，否則該元素會比實際高出若幹像素；

CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？

參考答案

行内樣式表，内嵌樣式表，外部樣式表

談談你對CSS中刻度的認識？

參考答案

在CSS中刻度是用于設定元素尺寸的機關。

a、特殊值0可以省略機關。例如：margin:0px可以寫成margin:0

b、一些屬性可能允許有負長度值，或者有一定的範圍限制。如果不支援負長度值，那應該變換到能夠被支援的最近的一個長度值。

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

相對長度機關是相對于目前對象内文本的字型尺寸，如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸。(相對父元素的字型大小倍數)

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新增的一個相對機關(root em，根em)，相對于根元素(即html元素)font-size計算值的倍數

隻相對于根元素的大小

浏覽器的預設字型大小為16像素，浏覽器預設樣式也稱為user agent stylesheet，就是所有浏覽器内置的預設樣式，多數是可以被修改的，但chrome不能直接修改，可以被使用者樣式覆寫。

請你說說em與rem的差別？

參考答案

rem

rem是CSS3新增的一個相對機關(root em，根em)，相對于根元素(即html元素)font-size計算值的倍數

隻相對于根元素的大小

rem(font size of the root element)是指相對于根元素的字型大小的機關。簡單的說它就是一個相對機關。

作用：利用rem可以實作簡單的響應式布局，可以利用html元素中字型的大小與螢幕間的比值設定font-size的值實作當螢幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法

em

文本相對長度機關。相對于目前對象内文本的字型尺寸。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸(預設16px)。(相對父元素的字型大小倍數)

em(font size of the element)是指相對于父元素的字型大小的機關。它與rem之間其實很相似，差別在。(相對是的HTML元素的字型大，預設16px)

em與rem的重要差別： 它們計算的規則一個是依賴父元素另一個是依賴根元素計算

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

參考答案

設定或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之内。對象的實際寬度等于設定的width值和border、padding之和，即( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為标準模式下的盒模型。

b、box-sizing:border-box： padding和border被包含在定義的width和height之内。對象的實際寬度就等于設定的width值，即使定義有border和padding也不會改變對象的實際寬度，即( Element width = width ) 此屬性表現為怪異模式下的盒模型。

浏覽器标準模式和怪異模式之間的差別是什麼？

參考答案

在“标準模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是浏覽器為了相容很早之前針對舊版本浏覽器設計、并未嚴格遵循W3C 标準的網頁而産生的一種頁面渲染模式。浏覽器基于頁面中檔案類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的DOCTYPE則浏覽器将會采用标準模式，而如果它缺失則浏覽器将會采用怪異模式。

強烈建議閱讀加深了解：怪異模式(Quirks Mode)對 HTML 頁面的影響，這裡列下浏覽器标準模式和怪異模式的差別：

(1)盒模型：

在怪異模式下，盒模型為IE盒模型而非标準模式下的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 标準的盒模型中，box 的大小就是 content 的大小。

(2)圖檔元素的垂直對齊方式:

對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性預設取值為baseline。而當inline元素的内容隻有圖檔時，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖檔的 vertical-align 屬性預設為bottom，是以，在圖檔底部會有幾像素的空間。

(3)

CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對于table 元素，字型的某些屬性将不會從body或其他封閉元素繼承到table中，特别是 font-size屬性。

(4)

内聯元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。

(5)

元素的百分比高度:

a、CSS 中對于元素的百分比高度規定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同于“auto”(即取決于内容的高度)。是以百分比的高度必須在父元素有聲明高度時使用。

b、當一個元素使用百分比高度時，在IE Standards Mode 下，高度取決于内容的變化，而在Quirks Mode 下，百分比高度則被正确應用。

(6)

元素溢出的處理：

在 IE Standard Mode 下，overflow取預設值 visible，即溢出可見，這種情況下，溢出内容不會被裁剪，呈現在元素框外。而在Quirks Mode 下，該溢出被當做擴充box來對待，即元素的大小由其内容決定，溢出不會被裁剪，元素框自動調整，包含溢出内容。

怪異Quirks模式是什麼，它和标準Standards模式有什麼差別？

參考答案

從IE6開始，引入了Standards模式，标準模式中，浏覽器嘗試給符合标準的文檔在規範上的正确處理達到在指定浏覽器中的程度。

在IE6之前CSS還不夠成熟，是以IE5等之前的浏覽器對CSS的支援很差， IE6将對CSS提供更好的支援，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支援CSS則将令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程式時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不相容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數 不為真時，就使用舊功能，這樣就能不破壞原有的程式，又提供新功能。IE6也是類似這樣做的，它将DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，是以IE6就假定 如果寫了DTD，就意味着這個頁面将采用對CSS支援更好的布局，而如果沒有，則采用相容之前的布局方式。這就是Quirks模式(怪癖模式，詭異模式，怪異模式)。

差別：總體會有布局、樣式解析和腳本執行三個方面的差別。

盒模型： 在W3C标準中，如果設定一個元素的寬度和高度，指的是元素内容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設定行内元素的高寬： 在Standards模式下，給等行内元素設定wdith和height都不會生效，而在quirks模式下，則會生效。

設定百分比的高度： 在standards模式下，一個元素的高度是由其包含的内容來決定的，如果父元素沒有設定百分比的高度，子元素設定一個百分比的高度是無效的用margin:0 auto設定水準居中：使用margin:0 auto在standards模式下可以使元素水準居中，但在quirks模式下卻會失效。

(還有很多，答出什麼不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。)

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

參考答案

外邊距折疊： 相鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距(margin)

相鄰： 沒有被非空内容、padding、border 或 clear 分隔開的margin特性. 非空内容就是說這元素之間要麼是兄弟關系或者父子關系

垂直方向外邊距合并計算:

a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

b、參與折疊的margin 都是負值：取的是其中絕對值較大的，然後，從0 位置，負向位移。

c、參與折疊的margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正margin 值中最大的 margin 相加。

内聯與塊級标簽有何差別？

參考答案

Html中的标簽預設主要分為兩大類型，一類為塊級元素，另一類是行内元素，許多人也把行内稱為内聯，是以叫内聯元素，其實就是一個意思。為了很好的布局，必須了解它們間的差別。

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

參考答案

a、使用CSS的display:none，不會占有原來的位置

b、使用CSS的visibility:hidden，會占有原來的位置

c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置

為什麼重置浏覽器預設樣式，如何重置默浏覽器認樣式？

參考答案

每種浏覽器都有一套預設的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按浏覽器内置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同浏覽器甚至同一浏覽器不同版本的預設樣式是不同的。但這樣會有很多相容問題。

a、最簡單的辦法：(不推薦使用)*{margin: 0;padding: 0;}。

b、使用CSSReset可以将所有浏覽器預設樣式設定成一樣。

c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置浏覽器預設樣式，比普通的cssreset要精細一些，保留浏覽器有用的預設樣式，支援包括手機浏覽器在内的超多浏覽器，同時對HTML5元素、排版、清單、嵌入的内容、表單和表格都進行了一般化。

天貓 使用的css reset重置浏覽器預設樣式：

@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}

談談你對BFC與IFC的了解？(是什麼，如何産生，作用)

參考答案

(1)、什麼是BFC與IFC

a、BFC(Block Formatting Context)即“塊級格式化上下文”， IFC(Inline Formatting Context)即行内格式化上下文。正常流(也稱标準流、普通流)是一個文檔在被顯示時最常見的布局形态。一個框在正常流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素将不與箱子内的元素産生作用。

b、BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其内容進行定位，以及與其他元素的關系和互相作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素内部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用範圍。

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

(2)、如何産生BFC

當一個HTML元素滿足下面條件的任何一點，都可以産生Block Formatting Context：

a、float的值不為none

b、overflow的值不為visible

c、display的值為table-cell, table-caption, inline-block中的任何一個

d、position的值不為relative和static

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

(3)、BFC的作用與特點

a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆寫

如果一個浮動元素後面跟着一個非浮動的元素，那麼就會産生一個重疊的現象。正常流(也稱标準流、普通流)是一個文檔在被顯示時最常見的布局形态，當float不為none時，position為absolute、fixed時元素将脫離标準流。

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

參考答案

使用css布局position非常重要，文法如下：

position：static | relative | absolute | fixed |

center | page | sticky

預設值：static，center、page、sticky是CSS3中新增加的值。

(1)、static

可以認為靜态的，預設元素都是靜态的定位，對象遵循正常流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top将不會生效。

(2)、relative

相對定位，對象遵循正常流，并且參照自身在正常流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響正常流中的任何元素。

(3)、absolute

a、絕對定位，對象脫離正常流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響正常流中的任何元素，其margin不與其他任何margin折疊。

b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

(4)、fixed

固定定位，與absolute一緻，但偏移定位是以視窗為參考。當出現滾動條時，對象不會随着滾動。

(5)、center

與absolute一緻，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水準居中。(CSS3)

(6)、page

與absolute一緻。元素在分頁媒體或者區域塊内，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。(CSS3)

(7)、sticky

對象在常态時遵循正常流。它就像是relative和fixed的合體，當在螢幕中時按正常流排版，當卷動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。(CSS3)

如何解決多個元素重疊問題？

參考答案

使用z-index屬性可以設定元素的層疊順序

z-index屬性

文法：z-index: auto |

預設值：auto

适用于：定位元素。即定義了position為非static的元素

取值：

auto：元素在目前層疊上下文中的層疊級别是0。元素不會建立新的局部層疊上下文，除非它是根元素。

整數： 用整數值來定義堆疊級别。可以為負值。 說明：

檢索或設定對象的層疊順序。

z-index用于确定元素在目前層疊上下文中的層疊級别，并确定該元素是否建立新的局部層疊上下文。

當多個元素層疊在一起時，數字大者将顯示在上面。