摘要：空元素，主要講下可算內聯元素，因為可與其他元素同行，且寬高對其起作用。提示對內聯元素寬高起作用，請使用談談對定位的理解生成絕對定位的元素，相對于定位以外的第一個父元素進行定位。

Html 1.解釋

，
主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。

是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。 拋棄之前的html4的4中文檔類型

2.語義化的理解

**what?**
?    根據內容的結構（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
**why?**
?    為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
?    用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
?    有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重
?    方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
?    便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
**how?**
?    盡可能少的使用無語義的標簽div和span；
?    在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
?    不要使用純樣式標簽，如：b、font、u等，改用css設置。
?    需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
?    使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
?    表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
?    每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

3.Iframe的優缺點， 如何用

iframe的優點：
? iframe能夠原封不動的把嵌入的網頁展現出來。
? 如果有多個網頁引用iframe，那么你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
? 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。
? 如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。
? 重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數據的傳輸，增加了網頁下載速度)

iframe的缺點
? 1、頁面樣式調試麻煩，出現多個滾動條；
? 2、瀏覽器的后退按鈕失效；
? 3、過多會增加服務器的HTTP請求；
? 4、小型的移動設備無法完全顯示框架；
? 5、產生多個頁面，不易管理；
? 6、不容易打印；
? 7、代碼復雜，無法被一些搜索引擎解讀。
? 8、iframe會阻塞主頁面的Onload事件；

4.談談對Label的理解

? 功能：表示Label標簽要綁定的HTML元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。
? 用法：姓名

CSS 5.談談對css選擇符的理解

選擇符有9種

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li: nth - child）

繼承性
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承 ：border padding margin width height ;

優先級
相同的樣式優先級就近原則，樣式定義最近者為準;
載入樣式以最后載入的定位為準;
優先級算法是權重計算法，id=100，class=10 ,標簽是1
一般而言

   !important >  id > class > tag  
   important 比 內聯優先級高

6.對css元素的理解

種類
塊元素:block：p,ul,li ,dl,ol,dt,h1~h6,hr,div,pre,table. form , fieldset
內聯元素:inline： a、span、img、input、label、select、strong、textarea br, code, sup, sub；
知名的空元素：

---

區別
塊元素：能容納塊和內聯等其他元素，不能與其他元素同行，對于寬高起作用.（即能設寬高，獨占一行）
內聯元素：只能容納文本和內聯元素，容許其他內聯元素與其同行，寬高對其不起作用。 inline不響應垂直margin,和padding（有但請避免）, width, height, max/min width/height 等屬性聲明。
空元素，主要講下input 可算內聯元素，因為可與其他元素同行，且寬高對其起作用。

提示：對內聯元素寬高起作用，請使用display:inline-block

7.談談對定位的理解

absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 
fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對于其正常位置進行定位。
static  默認值。沒有定位，元素出現在正常的流中  （忽略 top, bottom, left, right z-index 聲明）

談談對盒模型的理解

---

盒模型是有兩種標準的，一個是標準模型w3c，一個是IE模型。

標準盒子的寬 等于 width+margin +padding+border；width就是內容的寬高
IE的盒模型：width=內容(content)+填充(padding)+邊框(border)的總寬高）

css如何設置兩種模型：box-sizing:content-box; border-box;
注意事項：input、button元素默認border-box ，還是基于傳統的ie 盒子模型。但文檔類型是標準模式，則所有元素都是w3c盒模型

9.邊距重疊與BFC：

邊距重疊的問題：
父元素沒有設置margin-top，而子元素設置了margin-top：20px;可以看出，父元素也一起有了邊距
相鄰的上下元素margin-top和margin-bottom也會重疊

邊距重疊/外邊距合并的注意事項：
外邊距合并只出現在塊級元素上；
　浮動元素不會和相鄰的元素產生外邊距合并；
　絕對定位元素不會和相鄰的元素產生外邊距合并；
　內聯塊級元素間不會產生外邊距合并；
　根元素間不會不會產生外邊距合并（如html與body間）；
　設置了屬性overflow且值不為visible的塊級元素不會與它的子元素發生外邊距合并

邊距重疊的解決方案 （BFC）

float屬性不為none（脫離文檔流）
position為absolute或fixed
display為inline-block,table-cell,table-caption,flex,inine-flex
overflow不為visible
根元素

BFC的適用場景
? 自適應兩欄布局
? 清除內部浮動
? 防止垂直margin重疊

10.對浮動的理解

工作原理：
? 對塊元素設置浮動屬性后，它就脫離了當前的文檔流布局的方式，漂浮到他的父級元素的左邊或者右邊。如果想讓多個塊顯示在同一行中，可以將這些塊都設置成浮動，并且浮動方向相同。

為什么要清除浮動
浮動的缺點：
1.當元素有默認屬性，且每個瀏覽器默認屬性值不同，而編寫者不清楚具體是多少及多大事，會對父元素（如對父元素的background屬性，margin屬性有影響）和后面元素產生影響，造成布局錯亂。
2.浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。
故需對父元素使用Clear，進行清除浮動

清除浮動的3種辦法：
1.添加一個附加層，：#haa{display：block;clear:both;height:20px;}
2.給父元素添加overflow：hidden;屬性。但是IE6不支持，還需給父元素添加zoom:1屬性。
3.利用偽類after的方法
例： .cf:after{content:" "；height:0； display:block； clear:both；line-height:0; Visibility:hidden；} .cf{zoom:1} /IE6不支持通過clear:both和行高為0的方式清除浮動，需增加zoom:1/
注意：使用時：浮動布局的時候，在ie6環境中會出現雙倍邊距的bug（即元素浮動方向和邊距方向一致的時候邊距會是原來的兩倍。）解決的辦法是給元素添加display:inline;屬性。

11.為何初始化css樣式表

? 方法一、reset.css能夠重置瀏覽器的默認屬性。不同的瀏覽器具有不同的樣式，重置能夠使其統一。比如說ie瀏覽器和FF瀏覽器下button顯示不同，通過reset能夠統一樣式，顯示相同的效果。但是很多reset是沒必要的，多寫了會增加瀏覽器在渲染頁面的負擔。
? 方法二、 normalize.css是一個可以定制的css文件，它讓不同的瀏覽器在渲染元素時形式更統一。

12.CSS sprite vs 字體圖標

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

13.實現水平和垂直居中的方式

實現div的水平居中和垂直居中
1.適用: 寬高已定
設置position: absolute(父元素記得設置: relative), 然后top和left設置50%, 50%, 再設置margin-left=寬/2, margin-top:寬/2
2.只適用: 固定寬高; 如果寬高隨意,想靠內部撐開的話, 會占滿整個父div
依然是利用position：子div的上下左右都設置成0，然后margin設置auto。關鍵是要設置position：子absolute，父relative。
3.適用: 不論是否固定寬高都可用. 問題在于兼容性. ie9及以下不支持
設置父級flex屬性: display:flex; justify-content:center; align-items: center;
4.適用: 要設寬度, 否則會使得寬度為父級div的寬度
父級元素設置display:table-cell ，然后vertical-align：middle。這種方法可以設置垂直居中. 這時候只要在子元素里設置margin:auto即可實現水平居中
但是這種方法好像會使父元素的居中無效。
5.適用: 可不指定寬高
使用transform居中. 設置父級position:relative; 子級position:absolute. 然后top: 50%; left:50%; transform:translate(-50%,-50%)
6.適用: 指定寬高百分比
保證left和right的百分數一樣就可以實現水平居中，保證top和bottom的百分數一樣就可以實現垂直居中。但是這種方法不能由內部元素自動調節div的寬高，而是通過父元素大小控制的
7.使用display:inline-block加偽元素
box 容器通過 after或者before 生成一個高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對于「備胎」垂直居中，在視覺上表現出來也就是相對于容器垂直居中了
8.多元素水平居中

1) 把子級div設置成display:inline-block; 然后父級div設置text-align:center;
2) 更方便靈活的做法還是使用flex-box, 設置水平居中 justify-content: center

9.使用柵格化布局
10.使用flex

14.CSS3新特性：

? 新增各種CSS選擇器 (: not(.input): 所有class不是“input”的節點）
? 圓角border-radiuis
? 多列布局：multi-column layout
? 陰影和反射： multi-column layout
? 文字特效：text-shadow
? 線性漸變： gradient
? 旋轉：transform
? 縮放，定位，傾斜，動畫，多背景：transform: scale(0.85,0.90) translate(0px, -30px) skew(-9deg, 0deg) Animation

15.對css的優化有哪些（壓縮 合并 圖片 規范）

? 題目中好像已經寫了答案了。詳情參考后面的前端優化

16.常見問題與解決方法

1.如何清除圖片下方出現幾像素的空白間隙？
方法1：img{display:block;}
方法2：img{vertical-align:top;}
方法3：.test{font-size:0;line-height:0;}
.test為img的父元素

2.如何使頁面文本行距始終保持為n倍字體大小的基調？
方法：body{line-height:n;}

3.如何容器透明，內容不透明？
方法1：容器層與內容層并級，容器層設置透明度，內容層通過負margin或者position絕對定位等方式覆蓋到容器層上
方法2 :正常的子父容器法，對附容器用background:rgba(0,0,0,0.3);

ps:透明度的問題：filter:alpha(opacity=20) opacity:0.2

4.如何使文本溢出邊界顯示為省略號？
.test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

5.如何使連續的長字符串自動換行？
.test{width:150px;word-wrap:break-word;}

6.使文本溢出邊界不換行強制在一行內顯示？
.test{width:150px;white-space:nowrap;}

7.去掉chrome 登錄頁中 記住密碼后，輸入框的黃色背景
回答: input:-webkit-autofill{ background-color:#fff !important; -webkit-box-shadow:0 0 0 40px #fff inset; }

8.分頁不能正常跳轉至對應的頁面：
回答: form表單中增加 return false

9.對表格table的td明明設置了width，為何不起作用？
方法: 可能你的表格被設置了：table-layout:fixed; 去掉此屬性即可

10.audio標簽 在chrome下支持ogg mp3 wav的模式，但在ie11下 僅支持mp3格式；但有的ie11 啥都不行，不知道為何。。。

高階 1.對less 和sass的理解

定義：Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。
優點：
寫的更快，變量和函數的功能：方便制作主題，利于維護，便于擴充。（換膚）
區別？

2.實現一個柵格系統

Bootstrap響應式布局是利用其柵格系統，對于不同的屏幕采用不同的類屬性

1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便為其賦予合適的排列（aligment）和內補（padding）。
2.通過行（row）在水平方向創建一組列（column）。
3.自己內容應當放置于列（column）內，并且，只有列可以作為行（row）的直接子元素。
4.類似.row和.col-xs-4這種預定義的類，可以用來快速創建柵格布局。Bootstrap源碼中定義的mixin也可以用來創建語義化布局。
5.通過為列設置padding屬性，從而創建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消為.container元素設置的padding，也就間接為行（row）所包含的列（column）抵消掉了padding。
6.柵格系統的列是通過指定1到12的值來表示其跨越范圍。例如三個等寬的列可以使用三個.col-xs-4來創建。
7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素將作為一個整體另起一行排列。
8.柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕覆蓋柵格類。
如下圖所示為柵格系統在多種屏幕上的應用說明。

詳情請見 bootstrap官網：https://v3.bootcss.com/css/#grid

3.談下flex

Flex 布局教程：語法篇 阮一峰
http://www.ruanyifeng.com/blo...^%$

4.px em rem pt vw vh的區別

px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。 IE無法調整那些使用px作為單位的字體大??；
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。 em會繼承父級元素的字體大小。
rem 是相對單位，相對的是html根元素 是字體的單位
pt ：印刷業上常使用的單位，磅的意思，一般用于頁面打印排版。
關系：任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。pt=px3/4
用法：對于只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用px即可 。
vw相對于視口的寬度。視口被均分為100單位的vw 算比例的時候，不用去算父元素 然后一級一級的百分比下來
vh相對于視口的高度。視口被均分為100單位的vh
對于需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。

5.漸進增強和優雅降級

漸進增強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 ：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

FOUC（無樣式內容閃爍）

---

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。

解決方法簡單的出奇，只要在之間加入一個或者

![圖片上傳中...]

前端必讀：瀏覽器內部工作原理
*正常的網頁加載流程是這樣的。

網頁，一邊開始解析
解析過程中，發現