HTML与CSS面试题
1.HTML、XHTML、XML有什么區別 ?
HTML(超文本標記語言): 在html4.0之前HTML先有實現再有標準，導致HTML非?；靵y和松散 XML(可擴展標記語言): 主要用于存儲數據和結構，可擴展，大家熟悉的JSON也是相似的作用，但 是更加輕量高效，所以XML現在市場越來越小了 XHTML(可擴展超文本標記語言): 基于上面兩者而來，W3C為了解決HTML混亂問題而生，并基于此誕生了HTML5，開頭加入 <!DOCTYPE html> 的做法因此而來，如果不加就是兼容混亂的HTML加了就是標準模式。2.知道img的srcset的作用是什么？
可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提 示，幫助瀏覽器選擇正確的一個資源。 srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小。 sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸 是最佳選擇。 所以，有了這些屬性，瀏覽器會：- 查看設備寬度
- 檢查 sizes 列表中哪個媒體條件是第一個為真
- 查看給予該媒體查詢的槽大小
- 加載 srcset 列表中引用的最接近所選的槽大小的圖像srcset提供了根據屏幕條件選取圖片的能力
3.link和@import的區別？
- link屬于XHTML標簽，而@import是CSS提供的。
- 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
- import只在IE 5以上才能識別，而link是XHTML標簽，無兼容問題。
- link方式的樣式權重高于@import的權重。
- 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，
- 因為@import不是dom可以控制的。
4.如何理解層疊上下文是什么？
層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視 窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間 觸發一下條件則會產生層疊上下文：5.談談對BFC的理解 是什么？
書面解釋：BFC(Block Formatting Context)這幾個英文拆解- Block: Block在這里可以理解為Block-level Box,指的是塊級盒子的標準
- Formatting context：塊級上下文格式化，它是頁面中的一塊渲染區域，并且有一套渲染規則，它 決定了其子元素將如何定位，以及和其他元素的關系和相互作用
BFC觸發條件:
- 根元素，即HTML元素
- position: fixed/absolute
- float 不為none
- overflow不為visible
- display的值為inline-block、table-cell、table-caption
作用是什么？
- 防止margin發生重疊
- 兩欄布局，防止文字環繞等
- 防止元素塌陷
6.html5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器謙 容問題？如何區分HTML和HTML5？
* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加 。 * 繪畫 canvas 用于媒介回放的 video 和 audio 元素 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 的數據在瀏覽器關閉后自動刪除 語意化更好的內容元素，比如 article、footer、header、nav、section 表單控件，calendar、date、time、email、url、search 新的技術webworker, websockt, Geolocation * 移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u； 對可用性產生負面影響的元素：frame，frameset，noframes； 支持HTML5新標簽： * IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式： * 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架7.為什么有時候人們用translate來改變位置 而不是定位?
translate()是transform的一個值。改變transform或opacity不會觸發瀏覽器重新布局（reflow）或重繪（repaint），只會觸發復合（compositions）。而改變絕對定位會觸發重新布局，進而觸發重繪和復合。transform使瀏覽器為元素創建一個 GPU 圖層，但改變絕對定位會使用到 CPU。 因此translate()更高效，可以縮短平滑動畫的繪制時間。 而translate改變位置時，元素依然會占據其原始空間，絕對定位就不會發生這種情況。8.瀏覽器的內核分別是什么？經常遇到的瀏覽器的謙容性有哪些？原因，解決方法是什么，常用hack的技巧？
IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto； 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。9.html常見謙容性問題？
1.雙邊距BUG float引起的 使用display 2.3像素問題 使用float引起的 使用dislpay:inline -3px 3.超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active4.IE z-index問題 給父級添加position:relative 5.Png 透明 使用js代碼 改 6.Min-height 最小高度 ！Important 解決’ 7.select 在ie6下遮蓋 使用iframe嵌套 8.為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 lineheight:1px）10.描述一個“reset”的css文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？
重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS文件并知道如何使用它們。他們是 盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。 你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的 默認樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。 在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。11.什么是外邊距重疊？重疊的結果是什么？
外邊距重疊就是margin-collapse。 在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。 折疊結果遵循下列計算規則： 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。 兩個外邊距一正一負時，折疊結果是兩者的相加的和。12.box-sizing常用的屬性有哪些?分別有啥?
box-sizing有兩個值:content-box(W3C標準盒模型),border-box(怪異模型), 這個css 主要是改變盒子模型大小的計算形式13.CSS中transition和animate有何區別?animate如何停留在最后一幀
transition一般用來做過渡的, 沒時間軸的概念, 通過事件觸發(一次),沒中間狀態(只有開始和結束) 而animate則是做動效,有時間軸的概念(幀可控),可以重復觸發和有中間狀態 讓animate停留在最后一幀,就它自身參數的一個值就可以了 animation-fill-mode: forwards;14.什么是css hack？ ie6,7,8的hack分別是什么？
在我們制作頁面時CSS hack由于不同的瀏覽器，比如Internet Explorer,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSS Hack大致有3種表現形式，屬性級Hack、選擇器Hack以及IE條件Hack
15.談談以前端角度出發做好SEO需要考慮什么？
搜索引擎主要以:- 外鏈數量和質量
- 網頁內容和結構
- 來決定某關鍵字下的網頁搜索排名。
- Meta標簽優化
- 主要包括主題（Title)，網站描述(Description)。還有一些其它的隱藏文字比如Author（作者），
- Category（目錄），Language（編碼語種）等。
- 符合W3C規范的語義性標簽的使用
16.一個頁面上有大量的圖片(大型電商網站)，加載很慢，你有哪些方法優化這 些圖片的加載，給用戶更好的體驗
圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁 面的距離，如果前者小于后者，優先加載。 如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。 如果圖片展示區域小于圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致17.你能描述一下漸進增強和優雅降級之間的不同嗎？
優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
用通俗的話來說就是優雅降級是從高版本到低版本，漸進增強是從低版本到高版本
18.為什么利用多個域名來儲存網站資源會更有效？
- CDN緩存更方便
- 突破瀏覽器并發限制
- 節約cookie帶寬
- 節約主域名的連接數，優化頁面響應速度
- 防止不必要的安全問題
19.css中可以通過哪些屬性定義，使得一個dom元素不顯示在瀏覽器可視范圍內？
- 設置display屬性為none，或者設置visibility屬性為hidden
- 設置寬高為0，設置透明度為0，設置z-index位置在-1000em
- 設置text-indent:-9999px;
20.超鏈接訪問過后hover樣式就不出現的問題是什么？如何解決？
被點擊訪問過的超鏈接樣式不再具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V H-A（link,visited,hover,active）21.css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么/
垂直方向：line-height 水平方向：letter-spacing 可以用于消除inline-block元素間的換行符空格間隙問題。22.display:none 與visibility:hidden的區別是什么？
display : 隱藏對應的元素但不擠占該元素原來的空間。 visibility: 隱藏對應的元素并且擠占該元素原來的空間。 即是，使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用 visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。23.IE的雙邊BUG：塊級元素float后設置橫向margin，ie6顯示margin比設置的較大
加入_display：inline24.absolute的containing block 計算方式跟正常流有什么不同？
? ? lock-level boxes
? ? 一個 block-level element (‘display’ 屬性值為 ‘block’, ‘list-item’ 或是 ‘table’) 會生成一個 block-level box，這樣的盒子會參與到 block-formatting context (一種布局的方式) 中。
? ? block formatting context
? ?在這種布局方式下，盒子們自所在的 containing block 頂部起一個接一個垂直排列，水平方向上撐滿整個寬度 (除非內部的盒子自己內部建立了新的 BFC)。
? ? containing block
? ?一般來說，盒子本身就為其子孫建立了 containing block，用來計算內部盒子的位置、大小，而對內部的盒子，具體采用哪個 containing block 來計算，需要分情況來討論：
? ?若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
? ?否則則由這個祖先元素的 padding box 構成。
根元素所在的 containing block 被稱為 initial containing block，在我們常用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形；
? ?對于 position 為 static 或 relative 的元素，其 containing block 為祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區域)；
對于 position:fixed 的元素，其 containing block 由 viewport 建立；
? ?對于 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，然后判斷：
如果都找不到，則為 initial containing block。
25.知道css有個content屬性嗎？有什么作用？有什么應用？
css的content屬性專門應用在 before/after 偽元素上，用來插入生成內容。最常見的應用是利用 偽類清除浮動。 after偽元素通過 content 在元素的后面生成了內容為一個點的塊級素，再利用clear:both清除浮動。 css計數器是通過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters() 一個方法配合after / before 偽類實現。26.css新增偽類有哪些？
p:first-of-type 選擇屬于其父元素的首個元素的每個元素。 p:last-of-type 選擇屬于其父元素的最后元素的每個元素。 p:only-of-type 選擇屬于其父元素唯一的元素的每個元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個元素。 p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。 :enabled、:disabled 控制表單控件的禁用狀態。 :checked，單選框或復選框被選中。27.sass，less是什么？大家為什么要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。 為什么要使用它們？- 結構清晰，便于擴展。
- 可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。
- 可以輕松實現多重繼承。
- 完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
28.css動畫animation
動畫（animation）：和過渡類似，都是可以實現一些動態的效果，不同的是過渡需要在某個屬性發生變化時才可以觸發，而動畫效果則可以自動觸發動態效果。設置動畫效果必須先要設置一個關鍵幀
常見屬性:
animation-name： 要對當前元素生效的關鍵幀的名字，如：animation-name: test;
animation-duration： 動畫的執行時間，如：animation-duration: 4s;
animation-iteration-count： 動畫執行的次數，如：animation-iteration-count: 4，可選值：數字或infinite，其中數字的大小就是執行的次數，而infinite則表示無限次。
animation-timing-function： 指定動畫執行的時序函數；
animation-direction： 指定動畫運行的方向，可選值如下：
- normal，默認值，從from到to運行，每次都是這樣；
- reverse，從to到from運行，每次都是這樣；
- alternate，從from向to運行，重復執行動畫時會方向執行，即第一個是從from到to，第二次則是從to到from……；
- alternate-reverse，與alternate的執行時反向的；
animation-play-state： 控制動畫的運行狀態，可選值如下：
- running，默認值，動畫運行；
- paused，動畫暫停；
animation-fill-mode： 動畫的填充模式，可選值如下：
- none，默認值，動畫執行完畢后，元素回到原來的位置；
- forwards，動畫執行完畢后，元素會停止在動畫執行結束的位置；
- backwards，動畫延時等待時，元素就會處于開始的位置，即from或to所指定的位置；
- both，結合了forwards和backwards；
?
總結
以上是生活随笔為你收集整理的HTML与CSS面试题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JSON怎么转成Excel
- 下一篇： HTML/CSS面试题（收集）