1添祸、簡述<!doctype>的作用
????<!doctype>是文檔的聲明滚粟，告訴瀏覽器當前的文檔類型；<!doctype html>:告訴瀏覽器以當前html最新標準解析當前文檔刃泌。
2凡壤、談?wù)勀銓φZ義化的理解
? ? ?簡單講就是根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的? ? ? ? ? ? ?爬 蟲和機器很好地解析耙替，有利于SEO亚侠，便于團隊開發(fā)和維護。有利于拓展
3俗扇、如何合并表格單元格硝烂，需要注意什么？
????跨行合并：rowspan铜幽，跨兩行合并的表格滞谢；? 跨列合并colspan，跨兩列合并的表格除抛。
4狮杨、thead、tbody镶殷、tfoot有什么作用禾酱？
? ? thead 表格的頭部 用來放標題之類的東西
????tbody 表格的身體主題部分 放數(shù)據(jù)本體
????tfoot 表格的腳 放表格的腳注之類
????作用：優(yōu)化表格加載， 增強用戶體驗绘趋，表格結(jié)構(gòu)清晰，增強可讀性
5颗管、常見的表單元素有哪些陷遮？
? ? ? 表單元素：input-type：text，password垦江，radio帽馋，checkbox，buttom比吭，submit绽族，reset，flie衩藤，image
? ? ? select：option
? ? ? textarea
? ? ? 文本域吧慢，下拉列表，單選框赏表，復(fù)選框
6检诗、CSS的方式有幾種匈仗？
（1）內(nèi)嵌式
????通過<style></style>來書寫CSS代碼。
????只能應(yīng)用于當前網(wǎng)頁逢慌，不能被其它網(wǎng)頁共享悠轩。
????注意：<style>標記一般放在<head>。
（2）外聯(lián)式攻泼，外嵌式
????通過<link>標記來引入外部的CSS文件(.css)火架。
????可以被其它網(wǎng)頁共享。
????格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
????注意：<link>標記只能放在<head>中
（3）行內(nèi)樣式
????通過style的屬性來書寫CSS代碼忙菠。
????舉例：<p style=“font-size:24px;”></p>
7何鸡、單行文本水平垂直居中如何實現(xiàn)
（1）水平居中
????text-align:center:控制單行文字水平居中
（2）垂直居中
????設(shè)置行高，line-height：元素的高度只搁，如果元素的高度是50px音比，則line-height:50px
8、常見的選擇器有哪些氢惋？
????基礎(chǔ)選擇器：通配符選擇器(*),
? ? 標簽（元素選擇器洞翩，element）選擇器
????元素? ? ? ? ? 1
? ? ? ? ? ? ? ? ? ? ? ? 類選擇器? ? ? 10
? ? ? ? ? ? ? ? ? ? ? ? id選擇器? ? ? 100
????進階選擇器:? 群組選擇器
? ? ? ? ? ? ? ? ? ?后代
? ???? ????????????子代
? ???????????????? 交集
? 相鄰選擇器 +
9、選擇器優(yōu)先級如何計算
????a.內(nèi)聯(lián)樣式表的權(quán)值為1000
????b.ID選擇器的權(quán)值為100
????c.class類選擇器的權(quán)值為10
????d.HTML標簽選擇器的權(quán)值為1
? ? 將權(quán)重相加得到總權(quán)重值
? ? 等級相同焰望， 則看權(quán)重大小骚亿，大優(yōu)先
? ????????權(quán)重相同，后寫的優(yōu)先
? ? ? ? ? 等級不同熊赖， 等級大優(yōu)先
? ? 来屠！important
????我們可以把選擇器中規(guī)則對應(yīng)多加法，比較權(quán)值震鹉，如果權(quán)值相同那就后面的覆蓋前面的俱笛。
????!important可以使樣式優(yōu)先級最高
10、哪些CSS屬性是可繼承的传趾？
（1）迎膜、字體系列屬性
font-family：字體系列
font-weight：字體的粗細
font-size：字體的大小
? ? ????font-style：字體的風(fēng)格
????????line-height：行高
（2）、文本系列屬性
text-indent：文本縮進
text-align：文本水平對齊
????????color：文本顏色
????????text-decoration：文本修飾
????????text-index浆兰，? text-color
11磕仅、簡述CSS盒模型
????盒模型又稱框模型,包含了元素內(nèi)容（content）、內(nèi)邊距（padding）簸呈、邊框（border）榕订、外邊距（margin）幾個要素。
????元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度蜕便；
????元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度劫恒。
? ? 盒模型是設(shè)計與布局的一種概念思想，把HTML中所有元素看作是一個盒子（盒模型）
12玩裙、margin外邊距常見問題及處理方法
????父子元素margin合并問題
????在父元素里面有子元素時兼贸，則父元素的margin-top的值為子元素中的margin-top的值段直。
????父子元素margin合并問題解決辦法
????方法一：設(shè)置父元素的overflow屬性為hidden。
????方法二：設(shè)置父元素的border屬性溶诞，如：border:1px solid red;
????兄弟元素margin合并問題
????規(guī)避
1鸯檬，塌陷? 父子關(guān)系時，第一個元素的margin-top螺垢， 會影響父元素
? ????? a喧务、border? padding
? ????? b、overflow：hideen nauto scroll
2枉圃、兩個元素上下垂直擺放時功茴，上下外邊距會重疊
13、塊級標簽與行級標簽的區(qū)別
????Html中常見行級標簽：span孽亲、a坎穿、em、strong返劲、b ......
????特點：在一行內(nèi)顯示（在一行中可以并列多個行級標簽）玲昧，不能設(shè)置寬高屬性，水平方向的padding和margin可以設(shè)置篮绿，垂直方向的無效孵延。
????Html中常見塊級標簽：div、p亲配、ul尘应、li、dl吼虎、td犬钢、dd、h1~h6 ......
????特點：獨占一行思灰，能設(shè)置width娜饵，height，margin和padding等屬性
14官辈、浮動產(chǎn)生的問題？清除浮動的方案遍坟？
????浮動元素引起的問題：
????浮動元素脫離文檔流之后在文檔流中不占位拳亿，父元素的高度無法被撐開，影響與父元素同級的元素
????清楚浮動的方法：
? ? 1愿伴、給浮動標簽的父標簽固定高度
? ? 2肺魁、所有浮動元素的最后添加一個塊級標簽，并且給標簽添加clear：both樣式
? ? 3隔节、在浮動標簽的最后加一個空div（塊標簽）鹅经，標簽本身不浮動寂呛，且添加樣式? ?clear：both；（代碼沉余）
? ? 4瘾晃、給父標簽加? overflow屬性贷痪，overflow為visible以外的其他值時可以幫助實現(xiàn)
? ? 5、推薦方法：給浮動標簽的父標簽添加? ? .clearflix（不會在結(jié)構(gòu)上產(chǎn)生沉余代碼蹦误，可多次重復(fù)使用）
.clearfix{
*zoom：1劫拢；
}????/*處理ie7以下兼容*/
? ? .clearfix：after{
? ? content：“”；
? ? clear：both强胰；
? ? display：block舱沧；
}
（1）給父級元素加高度（不推薦使用，它只適合高度固定的布局偶洋，一般父盒子都是為由內(nèi)容撐起來）
（2）在結(jié)尾處添加空div標簽clear:both熟吏。具體做法：添加一個div標簽并定義一個cl的類名，給cl類名添加樣式clear:both玄窝，將該div標簽放到父元素內(nèi)容結(jié)束前的位置（缺點：會多加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）給父級元素添加浮動（缺點：會產(chǎn)生新的浮動問題）
15缸剪、如何使用border實現(xiàn)實心小三角
/**向下的三角**/
.trangle_down{
? ? width:0;
? ? height:0;
? ? overflow:hidden;
? ? font-size: 0;? ? /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */
? ? line-height: 0;? /* 字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長矩形 */
? ? border-width:10px;
border-style:solid;? /*ie6下會出現(xiàn)不透明的兼容問題*/
border-color:#f30 transparent transparent transparent;
}
16、引入css樣式有幾種
（1）內(nèi)嵌式
通過<style></style>來書寫CSS代碼东亦。
只能應(yīng)用于當前網(wǎng)頁杏节，不能被其它網(wǎng)頁共享。
注意：<style>標記可以放在網(wǎng)頁的任何地方典阵，但一般放在<head>奋渔。
（2）外聯(lián)式
通過<link>標記來引入外部的CSS文件(.css)。
可以被其它網(wǎng)頁共享壮啊。
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>標記只能放在<head>中
（3）行內(nèi)樣式
通過style的屬性來書寫CSS代碼嫉鲸。
舉例：<p style=“font-size:24px;”></p>
單行文本水平居中如何實現(xiàn)
添加text-align:center;
設(shè)置盒子的高度，line-height：盒子的高度;(垂直居中)
1歹啼、哪些CSS屬性是可繼承的玄渗？
1、字體系列屬性? ? ? ? ? ? ? ? ? ? ? ?
font-family：字體系列? ? ? ? ? ? ? ? ?
font-weight：字體的粗細
font-size：字體的大小
font-style：字體的風(fēng)格
文本;text-deronter狸眼、?
? ? ? ? text-style? 藤树、
? ? ? ? text-size
行級標簽和塊級標簽的區(qū)別？拓萌？岁钓？？？屡限？品嚣？
一、塊級標簽
1.總是在新行上開始钧大，占據(jù)一整行翰撑。
2.高度，行高以及外邊距和內(nèi)邊距都可控制拓型。
3.寬帶始終是與瀏覽器寬度一樣额嘿，與內(nèi)容無關(guān)。
4.它可以容納內(nèi)聯(lián)元素和其他塊元素劣挫。
二册养、行級標簽
1.和其他元素都在一行上。
2.高压固，行高及外邊距和內(nèi)邊距部分可改變球拦。
3.寬度只與內(nèi)容有關(guān)。
4.行內(nèi)元素只能容納文本或者其他行內(nèi)元素帐我。
2坎炼、浮動產(chǎn)生的問題？清除浮動的方案拦键？
答：標簽浮動以后谣光，脫離正常文本流，導(dǎo)致父元素?zé)o法被撐開芬为，影響后續(xù)布局
給浮動標簽的父標簽固定高度萄金。? ? 在浮動標簽的最后加一個空的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;}
常見瀏覽器兼容性問題與解決方案
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析店归，造成頁面顯示效果不統(tǒng)一的情況阎抒。
瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補丁和內(nèi)補丁不同
瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下消痛，在IE6顯示margin比設(shè)置的大
瀏覽器兼容問題三：設(shè)置較小高度標簽（一般小于10px），在IE6，IE7田弥，遨游中高度超出自己設(shè)置高度
瀏覽器兼容問題四：行內(nèi)屬性標簽饮睬，設(shè)置display:block后采用float布局，又有橫行的margin的情況纱新，IE6間距bug
瀏覽器兼容問題五：圖片默認有間距
瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
3展氓、等高布局、雙飛翼布局的實現(xiàn)原理脸爱？
等高布局：
?- 假等高:
原理：利用內(nèi)外邊距相抵消遇汞，注意父元素設(shè)置"overflow:hidden"，列變寬簿废，其他列等高變化
優(yōu)點：結(jié)構(gòu)簡單空入，兼容所有瀏覽器
缺點：偽等高，需要合理控制margin和padding值配合
/*三列族檬，把外面設(shè)置一個大盒子歪赢，里面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;
? ? ? ? }
-真等高：
原理：利用內(nèi)容撐開父元素的特點，給每一列添加相對相應(yīng)的容器单料，并進行相互嵌套埋凯，并在每個容器中設(shè)置背景色。（這里需要提醒大家你有多少列就需要多少個容器看尼，比如說我們說的三列递鹉，那么你就需要使用三個容器）。
優(yōu)點：兼容各種瀏覽器藏斩，方便擴展容易創(chuàng)建任意列數(shù)
缺點：結(jié)構(gòu)嵌套復(fù)雜躏结，理解會有一定難度
有幾個盒子寫幾個盒子
把第二個父盒子bg2進行移動，移到最后一個盒子blue的寬度
移動最里面的父盒子bg3狰域，移到倒數(shù)第二個子盒子green的大小
依次把原來倒數(shù)第一個盒子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>
基于此原理也通過百分比建立流式布局（即外框自適應(yīng)媳拴，每列百分比）
圣杯布局
圣杯布局和雙飛翼布局都是為了實現(xiàn)左右欄固定寬度，中間部分自適應(yīng)的三欄布局兆览，不過兩者實現(xiàn)的原理有所不同屈溉。以下是圣杯布局的實現(xiàn)思路。
1）將三者都float：left抬探，再加上一個position:relative(因為相對定位后面會用到)子巾；
2）middle部分width：100%帆赢；
3）此時middle占滿了，所以要把left拉到最左邊线梗，使用margin-left：-100%
4）這時left拉回來了椰于，但會覆蓋middle內(nèi)容的左端，要把middle內(nèi)容拉出來仪搔，所以在外圍container加上padding：0 220px 0 200px;
?5) middle內(nèi)容拉回來了瘾婿，但left也跟著過來了，所以要還原烤咧，就對left使用相對定位left：-200px偏陪，同理，right也要相對定位還原right:-220px
6)到這里自適應(yīng)就好了煮嫌，若要想container高度保持一致可以給left middle right 都加上min-height：130px笛谦；
<body>
? ? <div class="container">
? ? ? ? <div class="middle">圣杯布局的中間自適應(yīng)部分</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則是鳥的翅膀。這個布局的實現(xiàn)思路是：先把重要的身體部分放好宝泵，然后再將翅膀放到適當?shù)奈恢谩?/p>
1）左翼left設(shè)置200px好啰，右翼right設(shè)置220px,身體自適應(yīng)；
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內(nèi)容被覆蓋了瓤鼻，除了使用外圍的的padding秉版，還可以考慮使用margin：
? ? ? ? ? ?給main加一個層div-- main-inner,然后margin：0 220px 0 200px
<body>
? ? <div class="middle">
? ? ? ? <div class="inner">雙飛翼布局的中間自適應(yīng)部分</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
內(nèi)容垂直居中：line-height：===height
表格中： vertical-align：middle
3起惕、水平垂直居中
父元素：position：relative
子元素：position：absolute
left：50%；top：50%
margin-left：-自身寬度的一半
margin-top：-自身高度的一半
單行文字內(nèi)容：
text-align：center挂签；
line-height：height疤祭；
表格文字居中：
text-align：center
line-height：height
6、簡述BFC規(guī)則饵婆，及解決的問題？
? ? 答：BFC布局規(guī)則：
? ? ? ? ? 1戏售、內(nèi)部塊級元素會垂直一個接一個的排列
? ? ? ? ? 2侨核、同一個BFC內(nèi)部，兩個相鄰垂直的boxmargin會發(fā)生重疊
? ? ? ? ? 3灌灾、BFC時一個獨立的容器搓译，里面的子元素不會影響到外面的元素
? ? ? ? ? 4、BFC區(qū)域不會與float區(qū)域重疊
? ? ? ? ? 5锋喜、BFC在計算高度時些己， 會自動計算浮動元素的高度
形成BFC：
a、根元素
b嘿般、overflow: 不為visible
c段标、display:inline-block
d、float: left/right
e炉奴、position:absolute/fixed
規(guī)則：
1逼庞、BFC中浮動子元素也會計算高度
2、BFC區(qū)域不會與float區(qū)域重疊
? 答： 解決常見問題
? ? ? ? ? 1瞻赶、解決margin值塌陷問題
? ? ? ? ? 2赛糟、文字不會環(huán)繞浮動元素
? ? ? ? ? 3、實現(xiàn)兩列砸逊，三列布局
? ? ? ? ? 4璧南、清浮動
? ? ? ? ? 5、利用兩個BFC解決margin會發(fā)生重疊的問題
7师逸、簡述精靈圖的原理及優(yōu)缺點司倚？
? ? a、將多張小圖放在一張大圖中字旭，通過background-position对湃； background-image去選擇對應(yīng)的小圖使用
? ? ? ? ? ? ? ? ? 優(yōu)：
? ? ? ? ? ? ? ? ? ? 1、減少HTTP請求次數(shù)遗淳， 提網(wǎng)頁的性能
? ? ? ? ? ? ? ? ? ? 2拍柒、減少命名困擾
? ? ? ? ? ? ? ? ? ? 3、更換風(fēng)格圖標方便
? ? ? ? ? ? ? ? ? 缺：? a屈暗、計算位置繁瑣
? ? ? ? ? ? ? ? ? ? ? ? ? b拆讯、限定寬高
8脂男、CSS3新增了那些選擇器？
屬性選擇器：
E:[attr]{}; E:[attr="val"]{};
E:[attr^="val"]{};E[attr$="val"]{};E: ['attr*="val"];
? ? ? ? ? 答：
? ? ? ? ? ? 行為狀態(tài)選擇器? 偽類：
? ? ? ? ? ? ? ? E:link
? ? ? ? ? ? ? ? E:hover
? ? ? ? ? ? ? ? E:visited
? ? ? ? ? ? ? ? E:focus
? ? ? ? ? ? ? ? E:active
? ? ? ? ? ? ? ? E:checked? ? 元素被選中
? ? ? ? ? ? ? ? E:disabled? 元素失效被選中
? ? ? ? ? ? ? ? E:enabled? ? 元素有效時被選中
? ? ? ? ? ? ? ? E::placeholder? 元素占位符被選中
? ? ? ? ? ? 偽元素
? ? ? ? ? ? ? ? E:after
? ? ? ? ? ? ? ? E:before
? ? ? ? ? ? 結(jié)構(gòu)偽類選擇器
? ? ? ? ? ? ? ? E:first-child{}
? ? ? ? ? ? ? ? E:last-child{}
? ? ? ? ? ? ? ? E:nth-child(m){}
9种呐、如何處理HTML5新標簽的瀏覽器兼容問題宰翅？
? hearder、footer爽室、setion汁讼、nav、article阔墩、aside嘿架、figure、figcaption啸箫、time耸彪、mark、hgrounp
一忘苛、利用JS腳本創(chuàng)建對應(yīng)的新元素蝉娜、設(shè)置新元素的樣式
document.createElement("Header"); header{display:blolock}
二、引入插件： html5shiv.js
<!--[if li IE 9]>
<script src="html5shiv.js">
<![endif]-->
? ? ? ? 答：兼容問題解決方法
? ? ? ? ? ? ? ? ? 1扎唾、通過js腳本創(chuàng)建對應(yīng)的標簽/元素
? ? ? ? ? ? ? ? ? 2召川、將對應(yīng)的元素修改對應(yīng)的類型
? ? ? ? ? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? document.createElement("header")
? ? ? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? ? ? ? ? ? ? header {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: red;
? ? ? ? ? ? ? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? </style>
10、簡述網(wǎng)頁中常見圖片格式及特點稽屏？
? gif：動圖扮宠，透明，小圖片
png：透明狐榔，細膩坛增，文件較大
jpg：色彩豐富，有損壓縮薄腻，文件相對較小
11收捣、你能想出幾種方法讓元素在頁面中消失？
a庵楷、display：none
b罢艾、visibility：hidden；
c尽纽、opacity
d咐蚯、overflow：hideen? 寬高：0
e、overflow：positipn：移除區(qū)域
f弄贿、position： z-index：
12春锋、常見的瀏覽器及其內(nèi)核？對應(yīng)的兼容性前綴是什么差凹？期奔？
chrome webit ? ? ? -webkit
firfox Gecko? ? ? ? ? ? -moz
IE Trident ? ? ? -ms-
Opera Presto ? ? ? -o-
Safari Webkit
QQ\360：極速模式--webkit-- 兼容模式----Trident
13侧馅、常見的移動端布局解決方案有哪些？原理如何呐萌？
1馁痴、固定布局
在<head>里把viewport加好，跟pc端一樣肺孤，設(shè)想整個網(wǎng)頁的寬度為320px居中即可罗晕，超出部分留白
優(yōu)點：思路沿用pc端，上手簡單? ? ? ? ? ? 缺點：大屏幕手機及手機橫屏?xí)r赠堵，兩邊留白較大攀例，且大屏幕手機看起來頁面會特別小，操作的按鈕也很小顾腊，用戶體驗較差。
2挖胃、流式布局
流動式布局重點就是使用百分比來代替?zhèn)鹘y(tǒng)px杂靶，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長酱鸭，但是高度還是和原來一樣吗垮，優(yōu)點是流動布局可以很好的解決自適應(yīng)需求，缺點是通過大量的百分比布局凹髓，會出現(xiàn)兼容性的問題烁登，且更適用于對橫向拉伸的設(shè)計元素，設(shè)計的時候存在很多局限性
3蔚舀、響應(yīng)式布局
@media? ? ?根據(jù)用戶的訪問設(shè)備的主要類型做三種或四種布局饵沧。每種布局有一個區(qū)間即可利用媒體查詢@media，可以為不同分辨率的設(shè)備加載不同的樣式赌躺。這種方法的優(yōu)點是可以相對準確的控制顯示效果狼牺，但可能需要對同一個類書寫不同的樣式。這種方法的優(yōu)點是可以相對精確的控制顯示效果礼患，但可能需要對同一個類書寫不同的樣式會導(dǎo)致代碼比較繁復(fù)是钥，后期維護困難
4、rem布局
? ? ? ? rem是指相對于根元素字體大小的單位缅叠，即根據(jù)html元素的font-size來計算大小悄泥。比如說html的font-size大小為100px，一個div的width為? ? ? ? ? ? 1rem肤粱，則div的width大小為100px
（1）設(shè)置頁面的viewport? ? ? ? （2）動態(tài)計算并設(shè)置html的fontsize值? ? ? ? （3）按照pc端布局方式正常布局弹囚，px單位換算成rem
14、簡述rem布局原理
? ? ? ? a狼犯、js：html的font-size： 100/設(shè)計高寬度 *屏幕寬度
????????b余寥、量元素的px尺寸下的寬高领铐， 換算成rem單位， n/100
15宋舷、在項目中你是如何做圖片優(yōu)化的绪撵？
1、css? sprite雪碧圖
2祝蝠、壓縮圖標質(zhì)量
3音诈、svg
4、字體圖標
5绎狭、將圖片拆分
HTML5\CSS3有哪些新特性细溅、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題儡嘶？如何區(qū)分HTML和HTML5喇聊？
（2）CSS3新特性：
實現(xiàn)圓角（border-radius），陰影（box-shadow）蹦狂，邊框圖片（border-image）誓篱；
對文字加特效（text-shadow），強制文本換行（word-wrap）凯楔，線性漸變（linear-gradient）窜骄；
實現(xiàn)旋轉(zhuǎn)transform:rotate(90deg),縮放scale(0.85,0.90),translate(0px,-30px)定位,傾斜skew(-9deg,0deg);
增加了更多的CSS選擇器、多背景摆屯、rgba()邻遏；
唯一引入的偽元素是::selection ；
實現(xiàn)媒體查詢(@media)虐骑，多欄布局（flex）准验。
（3）移除的元素
純表現(xiàn)的元素：basefont，big富弦，center沟娱，font，s腕柜，strike济似，tt，u盏缤；
對可用性產(chǎn)生負面影響的元素：frame砰蠢，frameset，noframes唉铜；
（4）區(qū)分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（彈性盒布局模型）,以及適用場景？
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間竞惋。這種布局方式在條目尺寸未知或動態(tài)時也能工作柜去。
背景介紹：
網(wǎng)頁布局（layout）是 CSS 的一個重點應(yīng)用。布局的傳統(tǒng)解決方案拆宛，基于盒狀模型嗓奢，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便
2009年浑厚，W3C 提出了一種新的方案—-Flex 布局股耽，可以簡便、完整钳幅、響應(yīng)式地實現(xiàn)各種頁面布局物蝙。目前，它已經(jīng)得到了所有瀏覽器的支持敢艰，這意味著诬乞，現(xiàn)在就能很安全地使用這項功能。
（2）知識剖析：
1. 什么是flex
flex 是 Flexible Box 的縮寫钠导，意為”彈性布局”，用來為盒狀模型提供最大的靈活性辈双。 任何一個容器都可以指定為 Flex 布局。塊級元素只需要display屬性為flex即可柜砾。行內(nèi)元素也可以使用 Flex 布局湃望。.box{ display: inline-flex; }。Webkit 內(nèi)核的瀏覽器痰驱，必須加上-webkit前綴证芭。 .3容器屬性? ? ? 4.項目屬性
什么是less？less有什莫好處担映？
less是動態(tài)的樣式表語言废士，通過簡單，明了的語法定義蝇完，使編寫css 的工作變得非常簡單官硝，在實際項目開發(fā)中，大大提高了前端工程師的工作效率
css需要書寫大量看似沒有邏輯的代碼短蜕，不方便維護及擴展氢架，不利于復(fù)用，造成這些困難的很大原因源于css是一門非程序性語言朋魔，沒有變量岖研，函數(shù)，scope等概念
less在css基礎(chǔ)上引入了變量警检，混入孙援，運算以及函數(shù)等功能害淤，大大簡化了css的編寫，并且降低了css的維護成本拓售，less可以讓我們用更少的代碼做更多的事窥摄。
如何顯示小于12px的字體？單行文本和多行文本溢出顯示省略號邻辉，如何實現(xiàn)溪王？值骇？？道伟？
使用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;//限制塊元素顯示的文本行數(shù)
-webkit-box-orient:vertical;//設(shè)置伸縮盒對象的子元素的排列方式
}
CSS3中過渡和動畫的區(qū)別和各自適用場景？
過渡動畫：當元素狀態(tài)發(fā)生改變使碾，不想直接變化，而是逐漸變化拘鞋，就使用過渡。
動畫：可自動觸發(fā)矢门，支持多個狀態(tài)盆色，循環(huán)播放
不同點：
1. ?觸發(fā)條件不同祟剔。transition通常和hover等事件配合使用物延，由事件觸發(fā)。animation則和gif動態(tài)圖差不多浑吟，立即播放耗溜。
2. 循環(huán)。 animation可以設(shè)定循環(huán)次數(shù)忿项。
3. 精確性。 animation可以設(shè)定每一幀的樣式和時間寞酿。tranistion 只能設(shè)定頭尾脱柱。 animation中可以設(shè)置每一幀需要單獨變化的樣式屬性榨为， transition中所有樣式屬性都要一起變化。
4. 與JavaScript的交互日川。animation與js的交互不是很緊密龄句。tranistion和js的結(jié)合更強大散罕。js設(shè)定要變化的樣式，transition負責(zé)動畫效果职抡，天作之合误甚，比之前只能用js時爽太多靶草。
說出你知道的2D或3D變形函數(shù)岳遥？
（一）2D轉(zhuǎn)換
1.位移?transform:translate(x,y);
2.縮放 transform:scale(x,y);
3.旋轉(zhuǎn) transform:rotate(deg) //deg 度數(shù)
旋轉(zhuǎn)中心 transform-origin：right top； //例子(初始值為50%派继，50%)
4.傾斜 transform:skew()
（二）3D變形
①位移（z軸）
translateZ(）正值靠近驾窟，負值后退（遠小近大）
②視距
3d變形必須設(shè)置认轨，讓3d變形的元素具有3d效果（遠小近大，作用父元素上）??
perspective:600px;
translated(x,y,z)在x杉畜，y衷恭，z軸分別位移
什么是響應(yīng)式設(shè)計随珠？響應(yīng)式設(shè)計的基本原理是什么？
頁面的設(shè)計與開發(fā)應(yīng)當根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺茸歧、屏幕尺寸举娩、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整构罗。
響應(yīng)式布局是根據(jù)設(shè)備屏幕寬度不同適當調(diào)整標簽顯示布局遂唧，在每種設(shè)備屏幕寬度的設(shè)備下呈現(xiàn)的界面是不同的。利用媒體查詢纹烹，rem單位召边，響應(yīng)式圖片隧熙，百分比布局贞盯，彈性布局等技術(shù)實現(xiàn)
響應(yīng)式網(wǎng)站的優(yōu)點：
減少工作量 網(wǎng)站、設(shè)計闷愤、代碼件余、內(nèi)容都 只需要一份，多出來的工作量只是JS腳本魏滚、CSS樣式做一些改變??????????? ??
節(jié)省時間
每個設(shè)備都能得到正確的設(shè)計
響應(yīng)式網(wǎng)站的缺點：
會加載更多的樣式和腳本資源
設(shè)計比較難精確定位和控制
老版本瀏覽器兼容不好
Boostrap框架的核心是什么坟漱，簡述其規(guī)則芋齿？
bootstrap的核心是柵格系統(tǒng).
簡述規(guī)則：
Bootstrap 提供了一套響應(yīng)式觅捆、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加掂摔，系統(tǒng)會自動分為最多12列
通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局乙漓，柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍释移。例如玩讳，三個等寬的列可以使用三個?.col-xs-4?來創(chuàng)建。
四種類前綴：col-xs-*?,?col-ms-*?,?col-md-*,?col-lg-*.
一同诫、將容器的font-size設(shè)成0
*{margin: 0;padding: 0;font-size: 0;}
