1、簡述一下你對HTML語義化的理解
1）用正確的標簽做正確的事情
2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析
3）即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的
4）搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO
5）使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解
2、Doctype作用？標准模式與兼容模式之間區別？
<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html>標簽之前，告知瀏覽器的解析器用什么文檔標准解析這個文檔
DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現
標准模式的排版 和JS運作模式都是以該瀏覽器支持的最高標准運行
在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器以防止站點無法工作
3、什么是盒模型？你是怎么理解的
簡單的說頁面是由若干個盒模型（BOX）堆砌起來的，可以說每個HTML元素就是一個盒模型
盒模型由外到內包括邊距(margin)、邊框（border）、填充(padding)、內容(content)
盒子模型有兩種分別是W3C標准模型和IE模型
不同之處：
標准模型寬高是指content，不包括padding和border
IE模型的寬高是指content+padding+border的總寬高
4、談談對BFC的理解
BFC：塊格式化上下文(Block Formatting Context)
BFC 是一個獨立的布局環境,可以理解為一個容器,在這個容器中按照一定規則進行物品擺放,並且不會影響其它環境中的物品
BFC的特性：
1）bfc 是一個獨立的容器，容器內子元素不會影響容器外的元素
2）bfc的區域不會與float的元素區域重疊
3）計算bfc的高度時，浮動元素也參與計算
4）垂直方向上的距離由margin決定
5）內部的Box會在垂直方向上一個接一個的放置
以下條件會形成BFC：
1）浮動元素 float:left | right | inherit（none除外）
2）position:absolute 或 fixed 定位
3）display:inline-block | inline-flex | table-cell
4）overflow:hidden | auto | scroll (visible除外)
5、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, ul li dl dt dd
不可繼承的樣式：border padding margin width height
6、CSS優先級算法如何計算？
優先級就近原則，同權重情況下樣式定義最近者為准
載入樣式以最后載入的定位為准
優先級為: !important > id > class > tag important 比 內聯優先級高
7、你理解的偽類與偽元素
偽類：用於向某些選擇器添加特殊的效果。比如span:first-child{}
偽元素：用於將特殊的效果添加到某些選擇器。比如span:before{}
偽類只要不是互斥可以疊加使用
偽元素在一個選擇器中只能出現一次，並且只能出現在末尾
偽類與偽元素優先級分別與類、標簽優先級相同
它們的本質區別：是否抽象創造了新元素
8、display有哪些值？box-sizing 常用的屬性有哪些？說明他們的作用
block 像塊類型元素一樣顯示。
none 缺省值。像行內元素類型一樣顯示。
inline-block 像行內元素一樣顯示，但其內容像塊類型元素一樣顯示。
list-item 像塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
box-sizing: content-box; // 默認的標准(W3C)盒模型元素效果
box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值
9、什么是外邊距重疊？ 重疊的結果是什么？
外邊距重疊就是 margin-collapse
相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。 這種合並外邊距的方式被稱為折疊
折疊結果遵循下列計算規則：
1）兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值
2）兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值
3）兩個外邊距一正一負時，折疊結果是兩者的相加的和
10、請列舉幾種隱藏元素的方法
1）display: none; 元素會變得不可見，並且不會再占用文檔的空間
2）visibility: hidden; 只是簡單的隱藏某個元素，但是元素占用的空間還存在
3）opacity: 0; 設置0可以使一個元素完全透明
4）position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外
5）transform: scale(0); 將一個元素設置為縮放無限小，元素不可見 原來位置將被保留
11、你對line-height是如何理解的？
line-height 指一行字的高度，包含了字間距，實際上是下一行基線到上一行基線距離
一個容器沒有設置高度，那么撐開容器高度的是 line-height 而不是容器內的文字內容
把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中
line-height和height都能撐開一個高度，height會觸發 haslayout，而line-height不會
12、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素有：a b span img input select strong
塊級元素有：div ul ol li dl dt dd h1-h6 p
常見的空元素: <br> <hr> <img> <input> <link> <meta>
13、position有哪些值，他們各自的區別
absolute：生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位
relative：生成相對定位的元素，相對於其正常位置進行定位
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位（固定定位）
static：默認值,無定位,元素出現在正常的流中（忽略top,bottom,left,right z-index）
14、HTML5有哪些新特性，新技術，如何區分HTML和HTML5？
語意化更好的內容元素。比如header、footer、nav、section、article
用於媒介回放的 video 和 audio 元素
繪畫 canvas
拖放Drag
表單控件，calendar、date、time、email、url、search
存儲功能localStorage和sessionStorage
localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
sessionStorage的數據在瀏覽器關閉后自動刪除
新的技術webworker, websocket（通訊協議）, Geolocation（地理定位）
區分HTML和HTML5:
DOCTYPE聲明上不同
結構語義上不同
添加了新的功能媒體標記標簽，如audio、video
15、SVG 與 Canvas兩者間的區別
SVG 是一種使用 XML 描述 2D 圖形的語言
Canvas 通過 JavaScript 來繪制 2D 圖形
SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的，在SVG 中，每個被繪制的圖形均被視為對象
如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形
Canvas 是逐像素進行渲染的
在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注
如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象
16、為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的
如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異
可以使用 reset.css 或 Normalize.css 做 CSS 初始化
17、rgba() 和 opacity 的透明效果有什么不同？
opacity 作用於元素以及元素內的所有內容（包括文字）的透明度
rgba() 只作用於元素自身的顏色或其背景色，子元素不會繼承透明效果
18、請描述一下 cookies，sessionStorage 和 localStorage 的區別
cookie是網站為了標示用戶身份而儲存在用戶本地終端上的數據（一般加密）
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
存儲大小：
cookie數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
有效時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
19、瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的？
1）在線的情況下，瀏覽器發現 html 標簽有 manifest 屬性，它會請求 manifest 文件
2）如果是第一次訪問app，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源並且進行離線存儲
3）如果已經訪問過app且資源已經離線存儲了，瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作。如果文件改變了，那么就會重新下載文件中的資源並進行離線存儲
4）離線的情況下，瀏覽器就直接使用離線存儲的資源
20、頁面導入樣式時，使用 link 和 @import 有什么區別？
link 屬於HTML標簽，除了加載CSS外，還能用於定 RSS等；@import 只能用於加載CSS
頁面加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載
@import 只在 IE5 以上才能被識別，而 link 是HTML標簽，無兼容問題
21、列舉幾種清除浮動的方法
1)給父級使用:after 偽元素
2）末尾處添加空div標簽clear:both
3）父元素設置 overflow：hidden; （必須定義width或zoom:1）
4）父元素也設置浮動
5）結尾處加br標簽clear:both
22、什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
響應式設計就是網站能夠兼容多個終端（包括PC端，手機平板終端），而不是為每個終端做一個特定的版本
基本原理是利用CSS3媒體查詢，為不同尺寸的設備適配不同樣式
對於低版本的IE，可采用JS獲取屏幕寬度，然后通過resize方法來實現兼容
23、水平居中、垂直居中的方法有哪些？
水平居中：
1）inline-block實現水平居中（text-align:center;）
2）margin和width實現水平居中
3）絕對定位實現水平居中
4）使用flex實現水平居中
5）使用柵格布局grid實現水平居中
垂直居中：
1）新增 inline-block 兄弟元素，設置 vertical-align
2）絕對定位配合 transform 位移
3）使用flex彈性盒子display:flex
4）未知高度的塊級子元素，采用table-cell配合vertical-align
5）已知高度的塊級子元素，采用絕對定位和負邊距
6）通過css3的translate變形實現
24、你理解的flex彈性盒子布局
Flexbox用於不同尺寸屏幕中創建可自動擴展和收縮布局
任何一個容器都可以指定為Flex布局
使用彈性布局可以有效的分配一個容器的空間
即使我們的容器元素尺寸改變，它內部的元素也可以調整它的尺寸來適應空間
設置了flex布局后，子元素的float、clear和vertical-align屬性就會失效
25、闡述px與em、rem的區別，以及你知道的其他css單位
px就是pixel像素的縮寫，相對長度單位。常用於PC端的字體單位
em相對於當前父元素的font-size（並不是固定的）
rem相對於HTML根元素的font
其他css單位：
%百分比，一般來說就是相對於父元素
vw是相對視口（viewport）的寬度而定的，長度等於視口寬度的1/100
vh是相對視口（viewport）的高度而定的，長度等於視口高度的1/100
vm css3新單位，相對於視口的寬度或高度中較小的那個
26、實現左邊固定寬度，右邊自適應（不限於一種方法）
1）浮動布局（左側固定寬度並且左浮動，右側使用margin-left）
2）使用定位（左側固定寬度並且絕對定位，右側使用margin-left）
3）overflow（左側固定寬並且左浮動，右側加overflow：hidden）
4）flex布局（父級元素設置display:flex，左側設置固定寬，右側flex:1）
27、使用css實現一個持續的動畫
.animat{ width:20px; height:20px; background:red; position:relative; animation:mymove 3s infinite; } @keyframes mymove{ from{left:0px;} to{left:200px;} }
28、css實現三角形
.triangle{ width:0; height:0; border-width:20px; border-style:solid; border-color:transparent transparent red transparent; }
29、移動端開發中有哪些常用的布局？
百分比流式布局
flex布局
媒體查詢+rem布局
固定寬度做法
30、什么是聖杯布局和雙飛翼布局，並說下實現原理
聖杯布局：
三列布局；中間主體內容前置，且寬度自適應；兩邊內容定寬
好處：重要的內容放在文檔流前面可以優先渲染
原理：利用相對定位、浮動、負邊距布局，而不添加額外標簽
雙飛翼布局：
雙飛翼布局：對聖杯布局（使用相對定位對以后布局有局限性）的改進，消除相對定位
原理：主體元素上設置左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位
31、align-content與align-items的區別？
align-content:center對單行是沒有效果的
而align-items:center不管是對單行還是多行都有效果
我們日常開發中用的比較多的就是align-items
32、列舉去除inline-block出現間距的幾種方法
1）給父級font-size：0
2）使用margin負值
3）使用letter-spacing
4）使用word-spacing
5）移除空格
33、title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取有很大的影響
b是一個實體標簽，展示強調內容。strong是標明重點內容，有語氣加強的含義
i內容展示為斜體，em表示強調的文本
34、<script>、<script defer>、<script async>三者之間區別
沒有defer或async屬性，瀏覽器會立即加載並執行相應的腳本
有了async屬性，表示后續文檔的加載和渲染與js腳本的加載和執行是並行進行的，即異步執行
有了defer屬性，加載后續文檔的過程和js腳本的加載是並行進行的
（此時僅加載不執行）
defer和async在網絡加載過程是一致的，都是異步執行
兩者的區別在於腳本加載完成之后何時執行
如果存在多個有defer屬性的腳本，那么它們是按照加載順序執行腳本的
對於async，它的加載和執行是緊挨的，無論聲明順序如何，只要加載完成立刻執行
35、data-的用法，以及他的優勢
data-代表自定義屬性，可以在所有的 HTML 元素中嵌入數據
自定義的數據可以讓頁面擁有更好的交互體驗
屬性名不要包含大寫字母，在 data- 后必須至少有一個字符
該屬性可以是任何字符串
自定義屬性前綴 "data-" 會被客戶端忽略
36、如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式
37、實現不使用border畫出1px高的線
注：在不同瀏覽器的標准模式與怪異模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
38、怎么讓Chrome支持小於12px 的文字
.shrink{ -webkit-transform:scale(0.8); -o-transform:scale(1); display:inline-block; }
39、一個滿屏 品 字布局 如何設計?
上面的div寬100%
下面的兩個div分別寬50%
然后用float或者inline使其不換行即可
40、經常遇到的瀏覽器的兼容性有哪些？解決方法是什么？
1）PNG24位的圖片在ie6瀏覽器上出現背景，解決方案是做成PNG8
2）瀏覽器默認的margin和padding不同。解決方案：*{margin:0;padding:0;}
3）Chrome中文界面下默認會將小於12px的文本強制按照12px顯示，可通過加入CSS屬性-webkit-text-size-adjust:none解決
4）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義的屬性
在FireFox下，只能使用getAttribute()獲取自定義屬性；解決方法：統一通過getAttribute()獲取自定義屬性
5）IE下，even對象有x,y屬性，但是沒有pageX,pageY屬性
在Firefox下，even對象有pageX,pageY屬性，但是沒有x,y屬性
解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數
41、less如何定義一個函數，比如圓角
//定義圓角 @radius .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .round7{ .round(7px); }
42、如何平移放大一個元素
transform:translateX(100px)
transform:scale(2)
43、CSS中動畫實現的方式有幾種
transition、keyframes(animation)
44、你知道的CSS預處理器，以及預處理器作用
less、sass、Stylus
作用：
幫助更好地組織CSS代碼
提高代碼復用率
提升可維護性
45、如何解決CSS模塊化
less sass 等CSS預處理器
webpack處理CSS(css-loader+style-loader)
PostCSS插件(postCSS-import/precss等)
46、li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
瀏覽器的默認行為會把inline元素間的空白字符渲染成一個空格，空格會占用一個字符的寬度
解決方案：給父級font-sieze設置為0。或者采用letter-spacing方式
47、描述一下你對漸進增強和優雅降級的理解
漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
.transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
優雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
.transition{ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }
48、解釋css sprites，如何使用
css精靈又稱雪碧圖
將多個小圖片整個到一張大的背景圖上，再利用repeat、position進行精准操作
雪碧圖減輕了服務器的請求次數，提高了頁面性能
49、針對移動瀏覽器端開發頁面，不期望用戶放大屏幕，且要求“視口（viewport）”寬度等於屏幕寬度，視口高度等於設備高度，如何設置？
<meta name = "viewport" content = "width=device-width,initial-scale = 1.0,maximum-scale = 1.0">
50、簡述幾個css hack
(1) 圖片間隙
在div中插入圖片，圖片會將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；
dt li 中的圖片間隙。hack：給<img>添加display：block；
(2) 默認高度，IE6以下版本中，部分塊元素，擁有默認高度（低於18px）
hack1：給元素添加：font-size：0；
hack2：聲明：overflow：hidden；
表單行高不一致
hack1：給表單添加聲明：float：left；height： ；border： 0；
鼠標指針
hack：若統一某一元素鼠標指針為手型：cursor：pointer；
當li內的a轉化塊元素時，給a設置float，IE里面會出現階梯狀
hack1：給a加display：inline-block；
hack2：給li加float：left；