html+css面試合集

1 介紹一下標準的 CSS 的盒子模型？與低版本 IE 的盒子模 型有什麼不一樣的？

　　標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

　　低版本 IE 盒子模型：寬度=內容寬度 （content+border+padding）+ margin

2 box-sizing 屬性？

　　用來控制元素的盒子模型的解析模式，默認爲 content-box context-box：

　　W3C 的標準盒子模型，設置元素的 height/width 屬性指的是 content 部分的高/寬 border-box：

　　IE 傳統盒子模型。設置元素的 height/width 屬性指的是 border + padding + content 部分的高/寬

3 CSS 選擇器有哪些？哪些屬性能夠繼承？

　　CSS 選擇符：id 選擇器(#myid)、類選擇器(.myclassname)、 標籤選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器 （ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬 性選擇器（a[rel="external"]）、僞類選擇器（a:hover, li:nth-child）

　　可繼承的屬性：font-size, font-family, color

　　不可繼承的樣式：border, padding, margin, width, height

　　優先級（就近原則）：!important > [ id > class > tag ] !important 比內聯優先級高

4 CSS 優先級算法如何計算？

　　元素選擇符： 1 class 選擇符： 10 id 選擇符：100 元素標籤：1000

　　1. !important 聲明的樣式優先級最高，若是衝突再進行 計算。 2. 若是優先級相同，則選擇最後出現的樣式。 3. 繼承獲得的樣式的優先級最低。

5 CSS3 新增僞類有那些?

　　p:first-of-type 選擇屬於其父元素的首個元素

　　p:last-of-type 選擇屬於其父元素的最後元素

　　p:only-of-type 選擇屬於其父元素惟一的元素

　　p:only-child 選擇屬於其父元素的惟一子元素

　　p:nth-child(2) 選擇屬於其父元素的第二個子元素

　　:enabled :disabled 表單控件的禁用狀態。

　　:checked 單選框或複選框被選中。

6 如何居中 div？如何居中一個浮動元素？如何讓絕對定位 的 div 居中？

　　div： 

border: 1px solid red; 
margin: 0 auto; 
height: 50px; 
width: 80px;

　　浮動元素的上下左右居中：

border: 1px solid red; 
float: left;
position: absolute; 
width: 200px; 
height: 100px; 
left: 50%; 
top: 50%; 
margin: -50px 0 0 -100px;

 　　絕對定位的左右居中： 

border: 1px solid black; 
position: absolute; 
width: 200px; 
height: 100px; 
margin: 0 auto; 
left: 0; 
right: 0; 

　　還有更加優雅的居中方式就是用 flex,父元素設置：

display: flex;
justify-content:center;
align-items:center;

 

7 display 有哪些值？說明他們的做用?

　　inline（默認）--內聯　　 none--隱藏　　 block--塊顯示　　table--表格顯示 　　list-item--項目列表 　　inline-block行內塊

8 position 的值？

　　static（默認）：按照正常文檔流進行排列；

　　relative（相對定位）：不脫離文檔流，參考自身靜態位置 經過 top, bottom, left, right 定位；

　　absolute(絕對定位)：參考距其最近一個不爲 static 的父級 元素經過 top, bottom, left, right 定位；

　　fixed(固定定位)：所固定的參照對像是可視窗口。

9 CSS3 有哪些新特性？

　　1. RGBA 和透明度

　　2. background-image　　background-origin(content-box/padding-box/bor der-box) 　　background-size 　　background-repeat

　　3. word-wrap（對長的不可分割單詞換行）word-wrap： break-word

　　4. 文字陰影：text-shadow： 5px 5px 5px #FF0000（; 水 平陰影，垂直陰影，模糊距離，陰影顏色）

　　5. font-face 屬性：定義本身的字體

　　6. 圓角（邊框半徑）：border-radius 屬性用於建立圓角

　　7. 邊 框 圖 片 ： border-image: url(border.png) 30 30 round

　　8. 盒陰影：box-shadow: 10px 10px 5px #888888

　　9. 媒體查詢：定義兩套 css，當瀏覽器的尺寸變化時會採 用不一樣的屬性

10 請解釋一下 CSS3 的 flexbox（彈性盒佈局模型）,以及 適用場景？

　　該佈局模型的目的是提供一種更加高效的方式來對容器中 的條目進行佈局、對齊和分配空間。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並無這樣 內在的方向限制，能夠由開發人員自由操做。

　　試用場景：彈性佈局適合於移動前端開發，在 Android 和 ios 上也完美支持。

11 用純 CSS 建立一個三角形的原理是什麼？

首先，須要把元素的寬度、高度設爲 0。而後設置邊框樣式。

width: 0; 
height: 0; 
border-top: 40px solid transparent; 
border-left: 40px solid transparent;
border-right: 40px solid transparent; 
border-bottom: 40px solid #ff0000;

12 一個滿屏品字佈局如何設計? 第一種真正的品字：

　　1. 三塊高寬是肯定的；

　　2. 上面那塊用 margin: 0 auto;居中；

　　3. 下面兩塊用 float 或者 inline-block 不換行；

　　4. 用 margin 調整位置使他們居中。 第二種全屏的品字佈局: 上面的 div 設置成 100%，下面的 div 分別寬 50%，而後使 用 float 或者 inline 使其不換行。

13 常見的兼容性問題？

　　1. 不一樣瀏覽器的標籤默認的 margin 和 padding 不同。 *{margin:0;padding:0;}

　　2. IE6 雙邊距 bug：塊屬性標籤 float 後，又有橫行的 margin 狀況下，在 IE6 顯示 margin 比設置的大。hack： display:inline;將其轉化爲行內屬性。

　　3. 漸進識別的方式，從整體中逐漸排除局部。首先，巧妙 的使用「9」這一標記，將 IE 瀏覽器從全部狀況中分離 出來。接着，再次使用「+」將 IE8 和 IE七、IE6 分離開 來，這樣 IE8 已經獨立識別。 { /*全部識別*/ .background-color:#00deff\9; /*IE六、七、8 識別*/ +background-color:#a200ff;/*IE六、7 識別*/ _background-color:#1e0bd1;/*IE6 識別*/ } .

　　4. 設置較小高度標籤（通常小於 10px），在 IE6，IE7 中 高度超出本身設置高度。hack：給超出高度的標籤設置 overflow:hidden;或者設置行高 line-height 小於你設 置的高度。

　　5. IE 下，可使用獲取常規屬性的方法來獲取自定義屬性, 也可使用 getAttribute()獲取自定義屬性；Firefox 下， 只能使用 getAttribute()獲取自定義屬性。解決方法:統 一經過 getAttribute()獲取自定義屬性。

　　6. Chrome 中文界面下默認會將小於 12px 的文本強制 按 照 12px 顯 示 , 可 通 過 加 入 CSS 屬 性 -webkit-text-size-adjust: none; 解決。

　　7. 超連接訪問事後 hover 樣式就不出現了，被點擊訪問 過的超連接樣式再也不具備 hover 和 active 了。解決方法 是改變 CSS 屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 爲何要初始化 CSS 樣式

　　由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是 不一樣的，若是沒對 CSS 初始化每每會出現瀏覽器之間的頁面 顯示差別。

15 absolute 的 containing block 計算方式跟正常流有什 麼不一樣？

　　不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：

　　1. 若此元素爲 inline 元素，則 containing block 爲能 夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最 小矩形；

　　2. 不然,則由這個祖先元素的 padding box 構成。 若是都找不到，則爲 initial containing block。

　　補充：

　　1. static(默認的)/relative：簡單說就是它的父元素的內容 框（即去掉 padding 的部分）

　　2. absolute: 向上找最近的定位爲 absolute/relative 的 元素 3. fixed: 它 的 containing block 一 律 爲 根 元 素 (html/body)

16 CSS 裏的 visibility 屬性有個 collapse 屬性值？在不一樣 瀏覽器下之後什麼區別？

　　當一個元素的 visibility 屬性被設置成 collapse 值後，對於 通常的元素，它的表現跟 hidden 是同樣的。

　　1. chrome 中，使用 collapse 值和使用 hidden沒有區別。

　　2. firefox，opera 和 IE，使用 collapse 值和使用 display： none 沒有什麼區別。

17 display:none 與 visibility：hidden 的區別？

　　display：none 不顯示對應的元素，在文檔佈局中再也不分配 空間（迴流+重繪）

　　visibility：hidden 隱藏對應元素，在文檔佈局中仍保留原 來的空間（重繪）

18 position 跟 display、overflow、float 這些特性相互 疊加後會怎麼樣？

　　display 屬性規定元素應該生成的框的類型；

　　position 屬性 規定元素的定位類型；

　　float 屬性是一種佈局方式，定義元素 在哪一個方向浮動。 相似於優先級機制：

　　position：absolute/fixed 優先級最高， 有他們在時，float 不起做用，display 值須要調整。float 或 者 absolute 定位的元素，只能是塊元素或表格。

19 對 BFC 規範(塊級格式化上下文：block formatting context)的理解？

　　BFC 規定了內部的 Block Box 如何佈局。 定位方案：

　　1. 內部的 Box 會在垂直方向上一個接一個放置。

　　2. Box 垂直方向的距離由 margin 決定，屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。

　　3. 每一個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。

　　4. BFC 的區域不會與 float box 重疊。

　　5. BFC 是頁面上的一個隔離的獨立容器，容器裏面的子元 素不會影響到外面的元素。

　　6. 計算 BFC 的高度時，浮動元素也會參與計算。

　　知足下列條件之一就可觸發 BFC

　　　　1. 根元素，即 html

　　　　2. float 的值不爲 none（默認）

　　　　3. overflow 的值不爲 visible（默認）

　　　　4. display 的 值 爲 inline-block 、 table-cell 、 table-caption

　　　　5. position 的值爲 absolute 或 fixed

20 爲何會出現浮動和何時須要清除浮動？清除浮動 的方式？

　　浮動元素碰到包含它的邊框或者浮動元素的邊框停留。因爲 浮動元素不在文檔流中，因此文檔流的塊框表現得就像浮動 框不存在同樣。浮動元素會漂浮在文檔流的塊框上。

　　浮動帶來的問題： 1. 父元素的高度沒法被撐開，影響與父元素同級的元素 2. 與浮動元素同級的非浮動元素（內聯元素）會跟隨其後 3. 若非第一個元素浮動，則該元素以前的元素也須要浮 動，不然會影響頁面顯示的結構。

　　清除浮動的方式： 1. 父級 div 定義 height 2. 最 後 一 個 浮 動 元 素 後 加 空 div 標 籤 並 添 加 樣 式 clear:both。 3. 包含浮動元素的父標籤添加樣式 overflow 爲 hidden 或 auto。 4. 父級 div 定義 zoom 21 上下 margin 重合的問題 在重合元素外包裹一層容器，並觸發該容器生成一個 BFC。  

22 設置元素浮動後，該元素的 display 值是多少？

　　自動變成 display:block

24 使用 CSS 預處理器嗎？

　　Less sass

25 CSS 優化、提升性能的方法有哪些？

　　1. 避免過分約束

　　2. 避免後代選擇符

　　3. 避免鏈式選擇符

　　4. 使用緊湊的語法

　　5. 避免沒必要要的命名空間

　　6. 避免沒必要要的重複

　　7. 最好使用表示語義的名字。一個好的類名應該是描述他 是什麼而不是像什麼

　　8. 避免！important，能夠選擇其餘選擇器

　　9. 儘量的精簡規則，你能夠合併不一樣類裏的重複規則

26 瀏覽器是怎樣解析 CSS 選擇器的？

　　CSS 選擇器的解析是從右向左解析的。若從左向右的匹配， 發現不符合規則，須要進行回溯，會損失不少性能。若從右 向左匹配，先找到全部的最右節點，對於每個節點，向上 尋找其父節點直到找到根元素或知足條件的匹配規則，則結 束這個分支的遍歷。兩種匹配規則的性能差異很大，是由於 從右向左的匹配在第一步就篩選掉了大量的不符合條件的 最右節點（葉子節點），而從左向右的匹配規則的性能都浪 費在了失敗的查找上面。 而在 CSS 解析完畢後，須要將解析的結果與 DOM Tree 的內容一塊兒進行分析創建一棵 Render Tree，最終用來進行 繪圖。在創建 Render Tree 時（WebKit 中的 「Attachment」過程），瀏覽器就要爲每一個 DOM Tree 中 的元素根據 CSS 的解析結果（Style Rules）來肯定生成怎 樣的 Render Tree。

27 在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

　　使用偶數字體。偶數字號相對更容易和 web 設計的其餘部 分構成比例關係。Windows 自帶的點陣宋體（中易宋體） 從 Vista 開始只提供 十二、1四、16 px 這三個大小的點陣， 而 1三、1五、17 px 時用的是小一號的點。（即每一個字佔的 空間大了 1 px，但點陣沒變），因而略顯稀疏。

28 margin 和 padding 分別適合什麼場景使用？

　　什麼時候使用 margin： 1. 須要在 border 外側添加空白 2. 空白處不須要背景色 3. 上下相連的兩個盒子之間的空白，須要相互抵消時。

　　什麼時候使用 padding： 1. 須要在 border 內側添加空白 2. 空白處須要背景顏色 3. 上下相連的兩個盒子的空白，但願爲二者之和。

　　兼容性的問題：在 IE5 IE6 中，爲 float 的盒子指定 margin 時，左側的 margin 可能會變成兩倍的寬度。經過改變 padding 或者指定盒子的 display：inline 解決。

29 元素豎向的百分比設定是相對於容器的高度嗎？

　　當按百分比設定一個元素的寬度時，它是相對於父容器的寬 度計算的，可是，對於一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是 父容器的寬度，而不是高度。

30 全屏滾動的原理是什麼？用到了 CSS 的哪些屬性？

　　1. 原理：有點相似於輪播，總體的元素一直排列下去，假 設有 5 個須要展現的全屏頁面，那麼高度是 500%，只 是展現 100%，剩下的能夠經過 transform 進行 y 軸定 位，也能夠經過 margin-top 實現

　　2. overflow：hidden；transition：all 1000ms ease；

31 什麼是響應式設計？響應式設計的基本原理是什麼？如 何兼容低版本的 IE？

　　響應式網站設計(Responsive Web design)是一個網站能 夠兼容多個終端，而不是爲每個終端作一個特定的版本。 基本原理是經過媒體查詢檢測不一樣的設備屏幕尺寸作處理。 頁面頭部必須有 meta 聲明的 viewport。

32 視差滾動效果？

　　視差滾動（Parallax Scrolling）經過在網頁向下滾動的時候， 控制背景的移動速度比前景的移動速度慢來建立出使人驚 嘆的 3D 效果。

　　1. CSS3 實現 優勢：開發時間短、性能和開發效率比較好，缺點是不 能兼容到低版本的瀏覽器

　　2. jQuery 實現 經過控制不一樣層滾動速度，計算每一層的時間，控制滾 動效果。 優勢：能兼容到各個版本的，效果可控性好 缺點：開發起來對製做者要求高

　　3. 插件實現方式 例如：parallax-scrolling，兼容性十分好

33 ::before 和 :after 中雙冒號和單冒號有什麼區別？

　　解釋一下這 2 個僞元素的做用

　　1. 單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素。

　　2. ::before 就是以一個子元素的存在，定義在元素主體內 容以前的一個僞元素。並不存在於 dom 之中，只存在 在頁面之中。 :before 和 :after 這兩個僞元素，是在 CSS2.1 裏新出現的。 起初，僞元素的前綴使用的是單冒號語法，但隨着 Web 的 進化，在 CSS3 的規範裏，僞元素的語法被修改爲使用雙冒 號，成爲::before ::after

34 你對 line-height 是如何理解的？

　　行高是指一行文字的高度，具體說是兩行文字間基線的距 離。CSS 中起高度做用的是 height 和 line-height，沒有定 義 height 屬性，最終其表現做用必定是 line-height。 單行文本垂直居中：把 line-height 值設置爲 height 同樣大 小的值能夠實現單行文字的垂直居中，其實也能夠把 height 刪除。 多行文本垂直居中：須要設置 display 屬性爲 inline-block。

35 怎麼讓 Chrome 支持小於 12px 的文字？

　　 p{font-size:10px;-webkit-transform:scale(0.8);} //0.8 是縮放比例

36 讓頁面裏的字體變清晰，變細用 CSS 怎麼作？

　　-webkit-font-smoothing 在 window 系統下沒有起做用， 可是在 IOS 設備上起做用-webkit-font-smoothing： antialiased 是最佳的，灰度平滑。

38 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲 什麼？

　　多數顯示器默認頻率是 60Hz，即 1 秒刷新 60 次，因此理論 上最小間隔爲 1/60＊1000ms ＝ 16.7ms。

39 li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有 什麼解決辦法？

　　行框的排列會受到中間空白（回車空格）等的影響，由於空 格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會 有間隔，把字符大小設爲 0，就沒有空格了。

　　解決方法：

　　1. 能夠將.代碼所有寫在一排

　　2. 浮動 li 中 float：left

　　3. 在 ul 中用 font-size：0（谷歌不支持）；可使用 letter-space：-3px

40 display:inline-block 何時會顯示間隙？

　　1. 有空格時候會有間隙 解決：移除空格

　　2. margin 正值的時候 解決：margin 使用負值

　　3. 使 用 font-size 時 候 解 決 ： font-size:0 、 letter-spacing、word-spacing

41 有一個高度自適應的 div，裏面有兩個 div，一個高度 100px，但願另外一個填滿剩下的高度

　　外層 div 使用 position：relative；高度要求自適應的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0

42 png、jpg、gif 這些圖片格式解釋一下，分別何時 用。有沒有了解過 webp？

　　1. png 是 便 攜 式 網 絡 圖 片 （ Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優勢是： 壓縮比高，色彩好。 大多數地方均可以用。

　　2. jpg 是一種針對相片使用的一種失真壓縮方法，是一種 破壞性的壓縮，在色調及顏色平滑變化作的不錯。在 www 上，被用來儲存和傳輸照片的格式。

　　3. gif 是一種位圖文件格式，以 8 位色重現真色彩的圖像。 能夠實現動畫效果.

　　4. webp 格式是谷歌在 2010 年推出的圖片格式，壓縮率 只有 jpg 的 2/3，大小比 png 小了 45%。缺點是壓縮 的時間更久了，兼容性很差，目前谷歌和 opera 支持。

43 style 標籤寫在 body 後與 body 前有什麼區別？

　　頁面加載自上而下 固然是先加載樣式。 寫在 body 標籤後因爲瀏覽器以逐行方式對 HTML 文檔進行 解析，當解析到寫在尾部的樣式表（外聯或寫在 style 標籤） 會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成 以後從新渲染，在 windows 的 IE 下可能會出現 FOUC 現象 （即樣式失效致使的頁面閃爍問題）

44 CSS 屬性 overflow 屬性定義溢出元素內容區的內容會 如何處理?

　　參數是 scroll 時候，必會出現滾動條。 參數是 auto 時候，子元素內容大於父元素時出現滾動條。 參數是 visible 時候，溢出的內容出如今父元素以外。 參數是 hidden 時候，溢出隱藏。

45 闡述一下 CSS Sprites

　　將一個頁面涉及到的全部圖片都包含到一張大圖中去，而後 利用 CSS 的 background-image，background- repeat， background-position 的組合進行背景定位。利用 CSS Sprites 能很好地減小網頁的 http 請求，從而大大的提升頁 面的性能；CSS Sprites 能減小圖片的字節。