1、簡述<!doctype>的作用
????<!doctype>是文檔的聲明，告訴瀏覽器當前的文檔類型；<!doctype html>:告訴瀏覽器以當前html最新標準解析當前文檔。
2、談談你對語義化的理解
? ? ?簡單講就是根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的? ? ? ? ? ? ?爬 蟲和機器很好地解析，有利于SEO，便于團隊開發和維護。有利于拓展
3、如何合并表格單元格，需要注意什么？
????跨行合并：rowspan，跨兩行合并的表格；? 跨列合并colspan，跨兩列合并的表格。
4、thead、tbody、tfoot有什么作用？
? ? thead 表格的頭部 用來放標題之類的東西
????tbody 表格的身體主題部分 放數據本體
????tfoot 表格的腳 放表格的腳注之類
????作用：優化表格加載， 增強用戶體驗，表格結構清晰，增強可讀性
5、常見的表單元素有哪些？
? ? ? 表單元素：input-type：text，password，radio，checkbox，buttom，submit，reset，flie，image
? ? ? select：option
? ? ? textarea
? ? ? 文本域，下拉列表，單選框，復選框
6、CSS的方式有幾種？
（1）內嵌式
????通過<style></style>來書寫CSS代碼。
????只能應用于當前網頁，不能被其它網頁共享。
????注意：<style>標記一般放在<head>。
（2）外聯式，外嵌式
????通過<link>標記來引入外部的CSS文件(.css)。
????可以被其它網頁共享。
????格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
????注意：<link>標記只能放在<head>中
（3）行內樣式
????通過style的屬性來書寫CSS代碼。
????舉例：<p style=“font-size:24px;”></p>
7、單行文本水平垂直居中如何實現
（1）水平居中
????text-align:center:控制單行文字水平居中
（2）垂直居中
????設置行高，line-height：元素的高度，如果元素的高度是50px，則line-height:50px
8、常見的選擇器有哪些？
????基礎選擇器：通配符選擇器(*),
? ? 標簽（元素選擇器，element）選擇器
????元素? ? ? ? ? 1
? ? ? ? ? ? ? ? ? ? ? ? 類選擇器? ? ? 10
? ? ? ? ? ? ? ? ? ? ? ? id選擇器? ? ? 100
????進階選擇器:? 群組選擇器
? ? ? ? ? ? ? ? ? ?后代
? ???? ????????????子代
? ???????????????? 交集
? 相鄰選擇器 +
9、選擇器優先級如何計算
????a.內聯樣式表的權值為1000
????b.ID選擇器的權值為100
????c.class類選擇器的權值為10
????d.HTML標簽選擇器的權值為1
? ? 將權重相加得到總權重值
? ? 等級相同， 則看權重大小，大優先
? ????????權重相同，后寫的優先
? ? ? ? ? 等級不同， 等級大優先
? ? ！important
????我們可以把選擇器中規則對應多加法，比較權值，如果權值相同那就后面的覆蓋前面的。
????!important可以使樣式優先級最高
10、哪些CSS屬性是可繼承的？
（1）、字體系列屬性
font-family：字體系列
font-weight：字體的粗細
font-size：字體的大小
? ? ????font-style：字體的風格
????????line-height：行高
（2）、文本系列屬性
text-indent：文本縮進
text-align：文本水平對齊
????????color：文本顏色
????????text-decoration：文本修飾
????????text-index，? text-color
11、簡述CSS盒模型
????盒模型又稱框模型,包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。
????元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
????元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。
? ? 盒模型是設計與布局的一種概念思想，把HTML中所有元素看作是一個盒子（盒模型）
12、margin外邊距常見問題及處理方法
????父子元素margin合并問題
????在父元素里面有子元素時，則父元素的margin-top的值為子元素中的margin-top的值。
????父子元素margin合并問題解決辦法
????方法一：設置父元素的overflow屬性為hidden。
????方法二：設置父元素的border屬性，如：border:1px solid red;
????兄弟元素margin合并問題
????規避
1，塌陷? 父子關系時，第一個元素的margin-top， 會影響父元素
? ????? a、border? padding
? ????? b、overflow：hideen nauto scroll
2、兩個元素上下垂直擺放時，上下外邊距會重疊
13、塊級標簽與行級標簽的區別
????Html中常見行級標簽：span、a、em、strong、b ......
????特點：在一行內顯示（在一行中可以并列多個行級標簽），不能設置寬高屬性，水平方向的padding和margin可以設置，垂直方向的無效。
????Html中常見塊級標簽：div、p、ul、li、dl、td、dd、h1~h6 ......
????特點：獨占一行，能設置width，height，margin和padding等屬性
14、浮動產生的問題？清除浮動的方案？
????浮動元素引起的問題：
????浮動元素脫離文檔流之后在文檔流中不占位，父元素的高度無法被撐開，影響與父元素同級的元素
????清楚浮動的方法：
? ? 1、給浮動標簽的父標簽固定高度
? ? 2、所有浮動元素的最后添加一個塊級標簽，并且給標簽添加clear：both樣式
? ? 3、在浮動標簽的最后加一個空div（塊標簽），標簽本身不浮動，且添加樣式? ?clear：both；（代碼沉余）
? ? 4、給父標簽加? overflow屬性，overflow為visible以外的其他值時可以幫助實現
? ? 5、推薦方法：給浮動標簽的父標簽添加? ? .clearflix（不會在結構上產生沉余代碼，可多次重復使用）
.clearfix{
*zoom：1；
}????/*處理ie7以下兼容*/
? ? .clearfix：after{
? ? content：“”；
? ? clear：both；
? ? display：block；
}
（1）給父級元素加高度（不推薦使用，它只適合高度固定的布局，一般父盒子都是為由內容撐起來）
（2）在結尾處添加空div標簽clear:both。具體做法：添加一個div標簽并定義一個cl的類名，給cl類名添加樣式clear:both，將該div標簽放到父元素內容結束前的位置（缺點：會多加CSS和HTML標簽）。
（3）給父級元素定義 overflow:hidden（推薦使用，缺點：不能和position配合使用，因為超出的尺寸的會被隱藏）
（4）給父級div定義偽類：after（推薦使用）
/*清除浮動代碼*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父級元素添加clearfloat類名即可
（5）給父級元素添加浮動（缺點：會產生新的浮動問題）
15、如何使用border實現實心小三角
/**向下的三角**/
.trangle_down{
? ? width:0;
? ? height:0;
? ? overflow:hidden;
? ? font-size: 0;? ? /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */
? ? line-height: 0;? /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */
? ? border-width:10px;
border-style:solid;? /*ie6下會出現不透明的兼容問題*/
border-color:#f30 transparent transparent transparent;
}
16、引入css樣式有幾種
（1）內嵌式
通過<style></style>來書寫CSS代碼。
只能應用于當前網頁，不能被其它網頁共享。
注意：<style>標記可以放在網頁的任何地方，但一般放在<head>。
（2）外聯式
通過<link>標記來引入外部的CSS文件(.css)。
可以被其它網頁共享。
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>標記只能放在<head>中
（3）行內樣式
通過style的屬性來書寫CSS代碼。
舉例：<p style=“font-size:24px;”></p>
單行文本水平居中如何實現
添加text-align:center;
設置盒子的高度，line-height：盒子的高度;(垂直居中)
1、哪些CSS屬性是可繼承的？
1、字體系列屬性? ? ? ? ? ? ? ? ? ? ? ?
font-family：字體系列? ? ? ? ? ? ? ? ?
font-weight：字體的粗細
font-size：字體的大小
font-style：字體的風格
文本;text-deronter、?
? ? ? ? text-style? 、
? ? ? ? text-size
行級標簽和塊級標簽的區別？？？？？？？
一、塊級標簽
1.總是在新行上開始，占據一整行。
2.高度，行高以及外邊距和內邊距都可控制。
3.寬帶始終是與瀏覽器寬度一樣，與內容無關。
4.它可以容納內聯元素和其他塊元素。
二、行級標簽
1.和其他元素都在一行上。
2.高，行高及外邊距和內邊距部分可改變。
3.寬度只與內容有關。
4.行內元素只能容納文本或者其他行內元素。
2、浮動產生的問題？清除浮動的方案？
答：標簽浮動以后，脫離正常文本流，導致父元素無法被撐開，影響后續布局
給浮動標簽的父標簽固定高度。? ? 在浮動標簽的最后加一個空的div。
1、固定高度
2、給父元素加浮動
3、overflow：hidden/scroll/auto
4、最后給所有浮動元素添加塊級元素，并給元素添加clear：both樣式
5、.clearfix:after{content:"";display:bock;clear:both;}
6、display：inline-block
7、position：absoulte/fixed
html布局中圖片之間有間隙的解決方案？？？？？？
*{margin: 0;padding: 0;font-size: 0;}
常見瀏覽器兼容性問題與解決方案
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
瀏覽器兼容問題三：設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度
瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
瀏覽器兼容問題五：圖片默認有間距
瀏覽器兼容問題七：透明度的兼容CSS設置
3、等高布局、雙飛翼布局的實現原理？
等高布局：
?- 假等高:
原理：利用內外邊距相抵消，注意父元素設置"overflow:hidden"，列變寬，其他列等高變化
優點：結構簡單，兼容所有瀏覽器
缺點：偽等高，需要合理控制margin和padding值配合
/*三列，把外面設置一個大盒子，里面3個小盒子*/
父級：overflow:hidden;(溢出隱藏)
子級：padding-bottom:99999px;
?? ? ?margin-bottom:-99999px;
<body>
? ? <div class="father">
? ? ? ?<div class="left">ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd </div>
? ? ? ? <div class="center">撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd </div>
? ? ? ? <div class="right">撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd </div>
? ? </div>
</body>
? ? ? ? .father {
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? /* width: 900px; */
? ? ? ? }
? ? ? ? .left {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? background-color: blue;
? ? ? ? ? ? float: left;
? ? ? ? ? ? padding-bottom: 9999px;
? ? ? ? ? ? margin-bottom: -9999px;
? ? ? ? }
? ? ? ? .center {
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? background-color: green;
? ? ? ? ? ? float: left;
? ? ? ? ? ? padding-bottom: 9999px;
? ? ? ? ? ? margin-bottom: -9999px;
? ? ? ? }
? ? ? ? .right {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? background-color: skyblue;
? ? ? ? ? ? float: left;
? ? ? ? ? ? padding-bottom: 9999px;
? ? ? ? ? ? margin-bottom: -9999px;
? ? ? ? }
-真等高：
原理：利用內容撐開父元素的特點，給每一列添加相對相應的容器，并進行相互嵌套，并在每個容器中設置背景色。（這里需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那么你就需要使用三個容器）。
優點：兼容各種瀏覽器，方便擴展容易創建任意列數
缺點：結構嵌套復雜，理解會有一定難度
有幾個盒子寫幾個盒子
把第二個父盒子bg2進行移動，移到最后一個盒子blue的寬度
移動最里面的父盒子bg3，移到倒數第二個子盒子green的大小
依次把原來倒數第一個盒子blue移到原來的移動剩下的兩個子元素到原位置
最大盒子overflow::hidden去掉超出部分
<div class="bigbox">
? ? ? ? <div class="bg1">
? ? ? ? ? ? <div class="bg2">
? ? ? ? ? ? ? ? <div class="bg3">
? ? ? ? ? ? ? ? ? ? <div class="red">第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅</div>
? ? ? ? ? ? ? ? ? ? <div class="green">第二列第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅</div>
? ? ? ? ? ? ? ? ? ? <div class="blue">第三列第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第三列第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第三列第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅第一列撒大概的 ad好貴呀噶 唉大概的噶大概空間大幅</div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
<style>
? ? .bigbox{
? ? ? ? margin: 0 auto;
? ? ? ? width:1000px;
? ? }
? ? .bg1{
? ? ? ? width: 100%;
? ? ? ? background-color: orange;
? ? ? ? overflow: hidden;
? ? }
? ? .bg2{
? ? ? ? width: 100%;
? ? ? ? background-color: pink;
? ? ? ? position: relative;
? ? ? ? right: 300px;
? ? ? ? float: left;
? ? }
? ? .bg3{
? ? ? ? width: 100%;
? ? ? ? background-color: skyblue;
? ? ? ? position: relative;
? ? ? ? right: 400px;
? ? ? ? float: left;
? ? }
? ? .red{
? ? ? ? width: 300px;
? ? ? ? /* background-color:red; */
? ? ? ? float: left;
? ? ? ? position: relative;
? ? ? ? left: 700px;
? ? }
? ? .green{
? ? ? ? width: 400px;
? ? ? ? /* background-color: green; */
? ? ? ? float: left;
? ? ? ? position: relative;
? ? ? ? left: 700px;
? ? }
? ? .blue{
? ? ? ? width: 300px;
? ? ? ? /* background-color: blue; */
? ? ? ? float: left;
? ? ? ? position: relative;
? ? ? ? left: 700px;
? ? }
? ? </style>
基于此原理也通過百分比建立流式布局（即外框自適應，每列百分比）
圣杯布局
圣杯布局和雙飛翼布局都是為了實現左右欄固定寬度，中間部分自適應的三欄布局，不過兩者實現的原理有所不同。以下是圣杯布局的實現思路。
1）將三者都float：left，再加上一個position:relative(因為相對定位后面會用到)；
2）middle部分width：100%；
3）此時middle占滿了，所以要把left拉到最左邊，使用margin-left：-100%
4）這時left拉回來了，但會覆蓋middle內容的左端，要把middle內容拉出來，所以在外圍container加上padding：0 220px 0 200px;
?5) middle內容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位left：-200px，同理，right也要相對定位還原right:-220px
6)到這里自適應就好了，若要想container高度保持一致可以給left middle right 都加上min-height：130px；
<body>
? ? <div class="container">
? ? ? ? <div class="middle">圣杯布局的中間自適應部分</div>
? ? ? ? <div class="left">圣杯布局左邊固定寬度部分</div>
? ? ? ? <div class="right">圣杯布局右邊固定寬度部分</div>
? ? </div>
</body>
? ? ? ? .container {
? ? ? ? ? ? padding: 0 200px 0 200px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .middle,
? ? ? ? .left,
? ? ? ? .right {
? ? ? ? ? ? float: left;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .middle {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background-color: blue;
? ? ? ? }
? ? ? ? .left {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? margin-left: -100%;
? ? ? ? ? ? left: -200px;
? ? ? ? }
? ? ? ? .right{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? background-color: green;
? ? ? ? ? ? margin-left: -200px;
? ? ? ? ? ? right: -200px;
? ? ? ? }
雙飛翼布局
雙飛翼布局始于淘寶UED。如果把三欄布局比作一只鳥，可以把main看成是鳥的身體，left和right則是鳥的翅膀。這個布局的實現思路是：先把重要的身體部分放好，然后再將翅膀放到適當的位置。
1）左翼left設置200px，右翼right設置220px,身體自適應；
2）html代碼中，main要放在最前邊，然后是left? right
3）將main left right都float：left
4）將main占滿100%；
5）此時main占滿100%，所以要把left拉到最左邊，使用margin-left：-100%，同理right使用margin-left：-220px';
6)main內容被覆蓋了，除了使用外圍的的padding，還可以考慮使用margin：
? ? ? ? ? ?給main加一個層div-- main-inner,然后margin：0 220px 0 200px
<body>
? ? <div class="middle">
? ? ? ? <div class="inner">雙飛翼布局的中間自適應部分</div>
? ? </div>
? ? <div class="left">雙飛翼布局左邊固定寬度部分</div>
? ? <div class="right">雙飛翼布局右邊固定寬度部分</div>
</body>
.middle,
? ? ? ? .left,
? ? ? ? .right {
? ? ? ? ? ? float: left;
? ? ? ? ? ? min-height: 130px;
? ? ? ? }
? ? ? ? .middle {
? ? ? ? ? ? width: 100%;
? ? ? ? }
? ? ? ? .inner {
? ? ? ? ? ? margin: 0 220px 0 200px;
? ? ? ? ? ? background-color: orange;
? ? ? ? ? ? min-height: 130px;
? ? ? ? }
? ? ? ? .left {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? margin-left: -100%;
? ? ? ? }
? ? ? ? .right {
? ? ? ? ? ? width: 220px;
? ? ? ? ? ? background-color: green;
? ? ? ? ? ? margin-left: -220px;
? ? ? ? }
4、為什么要初始化CSS樣式？那些樣式需要初始化？
? ? 答：? 默認樣式會影響我們自定義樣式
ul，ol{margin：0；padding：0；list-style：none}
a{text-decortion:none}
p{margin:0;}
input[{type="text"]{border：none；outline：none；}
5、如何讓盒子水平垂直居中？
? 1、水平居中：
a：margin：0 auto
b:display:inline-block
? 給父元素添加text-align：center
2、垂直居中：
margin
內容垂直居中：line-height：===height
表格中： vertical-align：middle
3、水平垂直居中
父元素：position：relative
子元素：position：absolute
left：50%；top：50%
margin-left：-自身寬度的一半
margin-top：-自身高度的一半
單行文字內容：
text-align：center；
line-height：height；
表格文字居中：
text-align：center
line-height：height
6、簡述BFC規則，及解決的問題？
? ? 答：BFC布局規則：
? ? ? ? ? 1、內部塊級元素會垂直一個接一個的排列
? ? ? ? ? 2、同一個BFC內部，兩個相鄰垂直的boxmargin會發生重疊
? ? ? ? ? 3、BFC時一個獨立的容器，里面的子元素不會影響到外面的元素
? ? ? ? ? 4、BFC區域不會與float區域重疊
? ? ? ? ? 5、BFC在計算高度時， 會自動計算浮動元素的高度
形成BFC：
a、根元素
b、overflow: 不為visible
c、display:inline-block
d、float: left/right
e、position:absolute/fixed
規則：
1、BFC中浮動子元素也會計算高度
2、BFC區域不會與float區域重疊
? 答： 解決常見問題
? ? ? ? ? 1、解決margin值塌陷問題
? ? ? ? ? 2、文字不會環繞浮動元素
? ? ? ? ? 3、實現兩列，三列布局
? ? ? ? ? 4、清浮動
? ? ? ? ? 5、利用兩個BFC解決margin會發生重疊的問題
7、簡述精靈圖的原理及優缺點？
? ? a、將多張小圖放在一張大圖中，通過background-position； background-image去選擇對應的小圖使用
? ? ? ? ? ? ? ? ? 優：
? ? ? ? ? ? ? ? ? ? 1、減少HTTP請求次數， 提網頁的性能
? ? ? ? ? ? ? ? ? ? 2、減少命名困擾
? ? ? ? ? ? ? ? ? ? 3、更換風格圖標方便
? ? ? ? ? ? ? ? ? 缺：? a、計算位置繁瑣
? ? ? ? ? ? ? ? ? ? ? ? ? b、限定寬高
8、CSS3新增了那些選擇器？
屬性選擇器：
E:[attr]{}; E:[attr="val"]{};
E:[attr^="val"]{};E[attr$="val"]{};E: ['attr*="val"];
? ? ? ? ? 答：
? ? ? ? ? ? 行為狀態選擇器? 偽類：
? ? ? ? ? ? ? ? E:link
? ? ? ? ? ? ? ? E:hover
? ? ? ? ? ? ? ? E:visited
? ? ? ? ? ? ? ? E:focus
? ? ? ? ? ? ? ? E:active
? ? ? ? ? ? ? ? E:checked? ? 元素被選中
? ? ? ? ? ? ? ? E:disabled? 元素失效被選中
? ? ? ? ? ? ? ? E:enabled? ? 元素有效時被選中
? ? ? ? ? ? ? ? E::placeholder? 元素占位符被選中
? ? ? ? ? ? 偽元素
? ? ? ? ? ? ? ? E:after
? ? ? ? ? ? ? ? E:before
? ? ? ? ? ? 結構偽類選擇器
? ? ? ? ? ? ? ? E:first-child{}
? ? ? ? ? ? ? ? E:last-child{}
? ? ? ? ? ? ? ? E:nth-child(m){}
9、如何處理HTML5新標簽的瀏覽器兼容問題？
? hearder、footer、setion、nav、article、aside、figure、figcaption、time、mark、hgrounp
一、利用JS腳本創建對應的新元素、設置新元素的樣式
document.createElement("Header"); header{display:blolock}
二、引入插件： html5shiv.js
<!--[if li IE 9]>
<script src="html5shiv.js">
<![endif]-->
? ? ? ? 答：兼容問題解決方法
? ? ? ? ? ? ? ? ? 1、通過js腳本創建對應的標簽/元素
? ? ? ? ? ? ? ? ? 2、將對應的元素修改對應的類型
? ? ? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? document.createElement("header")
? ? ? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? ? ? ? ? ? ? header {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: red;
? ? ? ? ? ? ? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? </style>
10、簡述網頁中常見圖片格式及特點？
? gif：動圖，透明，小圖片
png：透明，細膩，文件較大
jpg：色彩豐富，有損壓縮，文件相對較小
11、你能想出幾種方法讓元素在頁面中消失？
a、display：none
b、visibility：hidden；
c、opacity
d、overflow：hideen? 寬高：0
e、overflow：positipn：移除區域
f、position： z-index：
12、常見的瀏覽器及其內核？對應的兼容性前綴是什么？？
chrome webit ? ? ? -webkit
firfox Gecko? ? ? ? ? ? -moz
IE Trident ? ? ? -ms-
Opera Presto ? ? ? -o-
Safari Webkit
QQ\360：極速模式--webkit-- 兼容模式----Trident
13、常見的移動端布局解決方案有哪些？原理如何？
1、固定布局
在<head>里把viewport加好，跟pc端一樣，設想整個網頁的寬度為320px居中即可，超出部分留白
優點：思路沿用pc端，上手簡單? ? ? ? ? ? 缺點：大屏幕手機及手機橫屏時，兩邊留白較大，且大屏幕手機看起來頁面會特別小，操作的按鈕也很小，用戶體驗較差。
2、流式布局
流動式布局重點就是使用百分比來代替傳統px，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，優點是流動布局可以很好的解決自適應需求，缺點是通過大量的百分比布局，會出現兼容性的問題，且更適用于對橫向拉伸的設計元素，設計的時候存在很多局限性
3、響應式布局
@media? ? ?根據用戶的訪問設備的主要類型做三種或四種布局。每種布局有一個區間即可利用媒體查詢@media，可以為不同分辨率的設備加載不同的樣式。這種方法的優點是可以相對準確的控制顯示效果，但可能需要對同一個類書寫不同的樣式。這種方法的優點是可以相對精確的控制顯示效果，但可能需要對同一個類書寫不同的樣式會導致代碼比較繁復，后期維護困難
4、rem布局
? ? ? ? rem是指相對于根元素字體大小的單位，即根據html元素的font-size來計算大小。比如說html的font-size大小為100px，一個div的width為? ? ? ? ? ? 1rem，則div的width大小為100px
（1）設置頁面的viewport? ? ? ? （2）動態計算并設置html的fontsize值? ? ? ? （3）按照pc端布局方式正常布局，px單位換算成rem
14、簡述rem布局原理
? ? ? ? a、js：html的font-size： 100/設計高寬度 *屏幕寬度
????????b、量元素的px尺寸下的寬高， 換算成rem單位， n/100
15、在項目中你是如何做圖片優化的？
1、css? sprite雪碧圖
2、壓縮圖標質量
3、svg
4、字體圖標
5、將圖片拆分
HTML5\CSS3有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
（2）CSS3新特性：
實現圓角（border-radius），陰影（box-shadow），邊框圖片（border-image）；
對文字加特效（text-shadow），強制文本換行（word-wrap），線性漸變（linear-gradient）；
實現旋轉transform:rotate(90deg),縮放scale(0.85,0.90),translate(0px,-30px)定位,傾斜skew(-9deg,0deg);
增加了更多的CSS選擇器、多背景、rgba()；
唯一引入的偽元素是::selection ；
實現媒體查詢(@media)，多欄布局（flex）。
（3）移除的元素
純表現的元素：basefont，big，center，font，s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
（4）區分HTML和HTML5：
DOCTYPE聲明
新增的元素
CSS3有哪些新特性？
新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
彈性盒模型 display: flex;
多列布局 column-count: 5;
媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
個性化字體 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}
顏色透明度 color: rgba(255, 0, 0, 0.75);
圓角 border-radius: 5px;
漸變 background:linear-gradient(red, green, blue);
陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字裝飾 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
邊框效果 border-image:url(bt_blue.png) 0 10;
請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。這種布局方式在條目尺寸未知或動態時也能工作。
背景介紹：
網頁布局（layout）是 CSS 的一個重點應用。布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便
2009年，W3C 提出了一種新的方案—-Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。
（2）知識剖析：
1. 什么是flex
flex 是 Flexible Box 的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。 任何一個容器都可以指定為 Flex 布局。塊級元素只需要display屬性為flex即可。行內元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 內核的瀏覽器，必須加上-webkit前綴。 .3容器屬性? ? ? 4.項目屬性
什么是less？less有什莫好處？
less是動態的樣式表語言，通過簡單，明了的語法定義，使編寫css 的工作變得非常簡單，在實際項目開發中，大大提高了前端工程師的工作效率
css需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，造成這些困難的很大原因源于css是一門非程序性語言，沒有變量，函數，scope等概念
less在css基礎上引入了變量，混入，運算以及函數等功能，大大簡化了css的編寫，并且降低了css的維護成本，less可以讓我們用更少的代碼做更多的事。
如何顯示小于12px的字體？單行文本和多行文本溢出顯示省略號，如何實現？？？？
使用transform:scale()進行縮放
單行文本溢出顯示省略號
p{
width:200px;//限定盒子的寬度
overflow:hidden;溢出的文本隱藏
text-overflow:ellipsis;溢出的顯示省略號
white-space:nowrap;文本不換行
}
多行文本溢出
p {
width:200px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;//限制塊元素顯示的文本行數
-webkit-box-orient:vertical;//設置伸縮盒對象的子元素的排列方式
}
CSS3中過渡和動畫的區別和各自適用場景？
過渡動畫：當元素狀態發生改變，不想直接變化，而是逐漸變化，就使用過渡。
動畫：可自動觸發，支持多個狀態，循環播放
不同點：
1. ?觸發條件不同。transition通常和hover等事件配合使用，由事件觸發。animation則和gif動態圖差不多，立即播放。
2. 循環。 animation可以設定循環次數。
3. 精確性。 animation可以設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中可以設置每一幀需要單獨變化的樣式屬性， transition中所有樣式屬性都要一起變化。
4. 與JavaScript的交互。animation與js的交互不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果，天作之合，比之前只能用js時爽太多。
說出你知道的2D或3D變形函數？
（一）2D轉換
1.位移?transform:translate(x,y);
2.縮放 transform:scale(x,y);
3.旋轉 transform:rotate(deg) //deg 度數
旋轉中心 transform-origin：right top； //例子(初始值為50%，50%)
4.傾斜 transform:skew()
（二）3D變形
①位移（z軸）
translateZ(）正值靠近，負值后退（遠小近大）
②視距
3d變形必須設置，讓3d變形的元素具有3d效果（遠小近大，作用父元素上）??
perspective:600px;
translated(x,y,z)在x，y，z軸分別位移
什么是響應式設計？響應式設計的基本原理是什么？
頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。
響應式布局是根據設備屏幕寬度不同適當調整標簽顯示布局，在每種設備屏幕寬度的設備下呈現的界面是不同的。利用媒體查詢，rem單位，響應式圖片，百分比布局，彈性布局等技術實現
響應式網站的優點：
減少工作量 網站、設計、代碼、內容都 只需要一份，多出來的工作量只是JS腳本、CSS樣式做一些改變??????????? ??
節省時間
每個設備都能得到正確的設計
響應式網站的缺點：
會加載更多的樣式和腳本資源
設計比較難精確定位和控制
老版本瀏覽器兼容不好
Boostrap框架的核心是什么，簡述其規則？
bootstrap的核心是柵格系統.
簡述規則：
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列
通過一系列的行（row）與列（column）的組合來創建頁面布局，柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個?.col-xs-4?來創建。
四種類前綴：col-xs-*?,?col-ms-*?,?col-md-*,?col-lg-*.
一、將容器的font-size設成0
*{margin: 0;padding: 0;font-size: 0;}
