史上最精闢的web前端面試題之HTML&CSS
img的alt和title的異同？
**alt **是圖片載入失敗時，顯示在網頁上的替代文字；
**title **是滑鼠放上面時顯示的文字,title是對圖片的描述與進一步說明;
這些都是表面上的區別，alt是img必要的屬性，而title不是。
對於網站seo優化來說，title與alt還有最重要的一點：
搜尋引擎對圖片意思的判斷，主要靠alt屬性。所以在圖片alt屬性中以簡要文字說明，同時包含關鍵詞，也是頁面優化的一部分。條件允許的話，可以在title屬性裡，進一步對圖片說明。
簡述一下src與href的區別
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
html5新元素？
HTML5 中一些有趣的新特性：
①用於繪畫的 canvas 元素；
②用於媒介回放的 video 和 audio 元素；
③對本地離線儲存的更好的支援；
④新的特殊內容元素，比如 article、footer、header、nav、section；
⑤新的表單控制元件，比如 calendar、date、time、email、url、search"
以上是w3c上的原話，簡單說就是更符合標準，提供更多功能支援；更加規範，可讀性更強，效能有提升，實現功能更加簡單方便，就像手機一樣，高版本的功能多一些。
更詳細請看html5新元素
CSS層疊是什麼？介紹一下
CSS就是層疊式樣式表（Cascading Style Sheets）的簡稱,CSS中層疊的意思就是在HTML文件樹結構中的子標記能夠繼承所有父標記定義的樣式，還可以多次定義自己的樣式，全部樣式按照從外到內、由先到後的順序疊加起來，如果不發生衝突，則全部樣式都有效，重複定義衝突時按照內層優先、後定義優先的原則進行覆蓋，即內層子元素覆蓋父元素樣式、後定義的覆蓋先定義的樣式。
CSS實現垂直和水平居中
這是一道經典的問題，實現方法也有很多種，以下是其中一種實現：
具體方案說明：
①使用絕對定位left:50%與margin-left取寬度值一半的複數形式設定水平居中。
②使用絕對定位top:50%與margin-top取高度值一半的複數形式設定垂直居中
HTML結構：
CSS程式碼：
.box1 { position: relative; width:600px; height:600px; background-color: red; } .content{ background-color:pink; width:200px; height:200px; position: absolute;//父元素相對定位,使子元素相對父元素定位top:50%; left:50%; margin-top:-100px ;//二分之一的height，widthmargin-left:-100px; }
下面是小編整理的一整套系統的 web前端 學習教程，加群即可免費領取！
自己整理了一份最全面前端學習資料,從最基礎的HTML+CSS+JS [炫酷特效，遊戲，外掛封裝，設計模式]到移動端 HTML5 的專案實戰的學習資料都有整理，送給每一位前端小夥伴, 有想學習 web前端 的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。
加Q 裙：853597293（招募中）
什麼是CSS Hack?
針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
詳情請看以下連結
你知道哪些CSS瀏覽器相容性問題。
px和em的區別
px和em都是長度單位，區別是，px的值是固定的，是絕對單位，類似的還有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（釐米）、in（英寸）絕對單位指定是多少就是多少，計算比較容易。
em的值不是固定的，它是相對單位，em是指當前預設字號大小（繼承父元素預設字號）的倍數，可根據父元素字號的改變而自動調整。例如2em是當前字號的2倍，若父元素或預設字號為12pt,則2em就是24pt。類似的還有ex,ex是當前字號高度值（通常是字型尺寸一半）的倍數。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em
HTML5離線儲存
localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 資料在瀏覽器關閉後自動刪除。
說說你對語義化的理解
①去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構；
②有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
③方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
④便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
描述一段語義的HTML程式碼
（HTML5中新增加的很多標籤（如：<article>、<nav>、<header>和<footer>等）就是基於語義化設計原則）
標題< /h1>
專注Web前端技術< /h2>< /div>
給div設定一個寬度，然後新增margin:0 auto屬性
div{width:200px; margin:0 auto; }
列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
①
block 像塊型別元素一樣顯示。
none 預設值。像行內元素型別一樣顯示。
inline-block 像行內元素一樣顯示，但其內容像塊型別元素一樣顯示。
**list-item **像塊型別元素一樣顯示，並新增樣式列表標記。
②
absolute
absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位，若父元素都沒有定位則相對於html的根元素（瀏覽器視窗）定位。
fixed
fixed （老IE不支援）生成絕對定位的元素，相對於瀏覽器視窗進行定位。
relative
relative生成相對定位的元素，相對於其原來所在的文件流中的位置進行定位。
static
static 預設值。沒有定位，元素出現在正常的流中 （忽略 top, bottom, left, right z-index 宣告）
對BFC規範的理解
BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
（W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
描述CSS Reset的作用和用途。
Reset重置瀏覽器的css預設屬性瀏覽器的品種不同，樣式不同，然後重置，讓他們統一。
最簡化的CSS Reset
*{outline:0;padding:0;margin:0;border:0;}
CSS定義的權重
CSS有自己的優先順序計算公式，而不僅僅是行間>內部>外部樣式；ID>class>元素。
理解選擇器的特殊性很重要，特別是在修復bug的時候，但是要儘量避免使用。
CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什麼?
在CSS中關於定位的內容是：position:relative | absolute | static | fixed
• static 自動定位，自動定位就是元素在頁面普通文件流中由HTML自動定位，普通文件裡中的元素也稱為流動元素。不能通過z-index進行層次分級。
• relative 相對定位，相對定位不脫離文件流，參考其在原來文件流中的位置，通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
• absolute 絕對定位，絕對定位脫離文件流，依據最近的已經定位（絕對、相對或固定定位）的父元素，通過 top,bottom,left,right 定位。當父級 position 為 static 時，absolute元素將依據body根元素（瀏覽器視窗）進行定位，可以通過z-index進行層次分級。
• fixed 固定定位，固定定位與父元素無關（無論父元素是否定位），直接根據瀏覽器視窗定位，且不隨滾動條拖動頁面而滾動，可通過z-index進行層次分級。
CSS中margin和padding的區別
margin是外邊距，屬於元素之外，相鄰元素的margin可以融合。
padding是內邊距，在元素之內，相鄰元素的padding不可融合。
使用CSS前處理器嗎？喜歡哪個？