1、簡述!DOCTYPE的作用？
<!DOCTYPE> 決定浏覽器渲染方式；
幫助浏覽器正确地顯示網頁
文檔類型聲明（簡稱為 "DTD"），告訴浏覽器這個檔案的類型，讓浏覽器知道該用哪個規範來解析文檔。
聲明必須在HTML中的第一行，Doctype 是一條聲明它不是一個HTML标簽，隻起到聲明作用。
<!DOCTYPE html>：用HTML5的doctype聲明檔案包含HTML5标記
2、常見的浏覽器及其核心有哪些？
有五大浏覽器，分别是：
1、chrome 浏覽器 --Google公司
特點 安全、高效、安全
2013年前使用蘋果公司的webkit核心，13年後開始使用 webkit 的分支 Blink 核心
核心 webkit,Blink
2、Firefox 浏覽器 --Mozilla公司
特點 非盈利、Gecko項目開源
核心 Gecko
3、safari 浏覽器 --蘋果公司
特點 移動端占有率高
核心 webkit
4、Opera 浏覽器 --Opera Sftware ASA公司
特點 自主研發presto核心
使用自研的 Presto 核心 2016年被收購後改用 webkit 核心，後跟随谷歌改用 Blink 核心
核心 presto、webkit -> blink
5、 IE 浏覽器 --Microsoft微軟公司
特點 依托強大的Windows系統的市場占有率捆綁安裝不可解除安裝
核心 trident
1）使用trident核心的IE，及一些國産浏覽器
2）使用Gecko核心的Mozilla Firefox
3）使用blink核心的chrome、opera
4）使用webkit核心的Safari、chrome，及一些國産的雙核浏覽器 3、常見的塊級标簽和行内标簽分别有哪些？
塊級标簽
h1-h6、p、div、ul、ol、dl、li、dt、dd、br、hr
行内标簽
span、i、em、b、strong、sub、sup、del 4、b 和 strong （i 和 em ）标簽的差別？
b 和 strong
預設情況下它們起的均是加粗字型的作用
二者所不同的是，<b>标簽是一個實體标簽，用來呈現文字的粗體效果
而<strong>标簽是一個語義标簽，它的作用是加強字元的語義，用來表示重要文本，在文本中呈現粗體效果
i 和 em
預設情況下它們起的均是傾斜字型的作用
二者所不同的是，<i>标簽是一個實體标簽，文本呈現為斜體，沒有特殊語義
而<em>标簽是一個語義标簽，它的作用是用來呈現被強調的文本，在文本中呈現斜體效果 5、談談對語義化的了解？
即根據頁面内容的結構，選擇合适的标簽，便于開發者閱讀和寫出更優雅的代碼，便于浏覽器、搜尋引擎解析，有利于SEO，便于團隊開發和維護。如：标題用h1~h6,段落使用p标簽
語義化的好處：
1）在沒有css的情況下，頁面也能呈現出較好的内容結構；
2）語義化使代碼更具有可讀性，便于團隊開發和維護；
3）語義化有利于使用者體驗
4）語義化有利于SEO搜尋引擎優化 6、如何合并表格單元格？
表格合并
跨行合并 rowspan
跨列合并 colspan 7、thead、tbody、tfoot 有什麼作用？
thead、tbody、tfoot标簽結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）
标簽預設不會影響表格布局 8、常見表格元素有哪些？
<table> 标簽定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更複雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
caption 元素定義表格标題。
caption 标簽必須緊随 table 标簽之後。您隻能對每個表格定義一個标題。通常這個标題會被居中于表格之上。
<tr> 标簽定義 HTML 表格中的行。tr 元素包含一個或多個 th 或 td 元素。
td（标準單元格）|th（表頭單元格）元素 定義表格内的表頭單元格。
9、引入css的方式有幾種?
引入的三種方式：
行内樣式/内部樣式/外部樣式
行内樣式
<p style="color:red;font-size:20px;">内容</p>
内部樣式
<style type="text/css">
@import "css.css" /*或者： @import url(css.css)*/
或者
color：red；
</style>
外部樣式
<link href="css.css" rel="stylesheet" type="text/css"> 10、單行文本水準垂直居中如何實作？
先設定高度
height:10px;
行高等于高度
line-height:10px;
文本居中
text-align:center; 11、選擇器優先級如何計算？
一般來說選擇器的權值越大，優先級越高
基本選擇器的權值由小到大分别為：
通配符選擇器（0）<标簽選擇器（1）<class選擇器（10）<id選擇器（100）<行間樣式（1000）
如果選擇器的權值相同，後寫的内容會覆寫先寫的内容；
行間樣式擁有最高優先級但是高不過!important
background-color: lightcoral !important; 12、哪些CSS屬性是可以繼承的？
子标簽可以繼承父标簽的樣式
1）、字型系列屬性
font-family：字型系列
font-weight：字型的粗細
font-size：字型的大小
font-style：字型的風格
line-height：行高
2）、文本系列屬性
text-indent：文本縮進
text-align：文本水準對齊
color：文本顔色
13、簡述css盒模型？
盒模型又稱框模型（Box Model）在頁面布局中，将頁面元素合理有效地組織在一起，形成一套完整的、行之有效的原則和規範。,包含了元素内容（content）、内邊距（padding）、邊框（border）、外邊距（margin）幾個要素。css盒模型的本質是一個盒子，封裝周圍的HTML元素
盒模型由：
元素的内容(content) + 内邊距(padding) + 邊框(border) + 外邊距(margin)要素組成
元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。
14、如何使用border實作小三角?
三角形
.box1 {
width: 0;
height: 0;
border: 40px solid;
border-color: #f30 transparent;
border-bottom: 0;
/* 清除ie6下預設高度和最小高度問題 */
overflow: hidden;
font-size: 0;
line-height: 0;
}
空三角
.box2 {
width: 1em;
height: 1em;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(135deg);
}
<div class="box1"></div>
<div class="box2"></div> 15、margin外邊距常見問題及處理方法？
（1）父子關系外邊距塌陷問題——元素嵌套關系，子元素的margin值會疊加給父元素
現象：給子元素設定外間距，會和父元素的外間距合并，最終會表現其中較大的外間距的值
原因：父盒和子盒公用一個上外間距的區域
解決方法：
給父元素設定邊框或内邊距；
給父元素添加overflow:hidden屬性，觸發BFC，改變父元素的渲染規則
（2）兄弟關系的外邊距疊加——元素并列關系，垂直方向上相鄰的margin值相遇會出現疊加
現象：上一個盒子設定下外間距，下一個盒子設定上外間距，兩個值相同時，取目前值，如果兩個值不同，取較大值
原因：上、下兩個兄弟關系的盒子共用一個外間距區域
解決方法：
給兩個盒子都套一個父盒子，父盒添加overflow屬性
--->改變父級的渲染規則有以下四種：
position: absolute/fixed;
display: inline-block;
float: left/right;
overflow: hidden;
16、CSS選擇器有哪些？優先級算法如何計算？内聯和important哪個優先級高？
基本選擇器：通配符選擇器、标簽選擇器、類選擇器、id選擇器
基本選擇器權值：通配符選擇器（0）、标簽選擇器（1）、class選擇器（10）、id選擇器（100）
複合選擇器：群組選擇器、後代選擇器、父子選擇器、交集選擇器、僞類選擇器
div,p div p div>p div.box1
複合選擇器權值計算方式：組成複合選擇器的所有單一選擇器的權值累加
選擇器的權值越大，優先級越高，選擇器中的權值使用加法計算，如果權值相同後寫的内容覆寫先寫的内容
行間樣式的優先級高于id選擇器的優先級
繼承樣式的權值為0，子元素中設定的樣式，會覆寫繼承到的樣式；
在樣式中定義!important ，優先級高于行間樣式
17、行内元素和塊級元素的特性，具體差別是什麼？行内元素有哪些？塊級元素有哪些？
行内元素：寬度自适應；高度自适應；預設并列在一行顯示；具有部分盒模型特征（預設沒有寬高[css定義寬高時無效]，有橫向間距margin-right、margin-left和留白padding-left、padding-right，沒有縱向margin-top、margin-bottom和留白padding- top、padding-bottom，邊框保留）；換行會被解析成空格
行内元素: a b strong em i del sup sub span
塊級元素：寬度100%；高度自适應；預設獨立成行；具有盒模型特征（預設可以設定盒子的寬、高、外間距、内填充、邊框）
塊級元素：div p h1 h2 h3 h4 h5 h6 form ul ol li dl dt dd
18、margin外間距常見問題及處理方法
（1）父子關系外邊距塌陷問題——元素嵌套關系,子元素的margin值會疊加給父元素
解決方法：
給父元素設定邊框或内填充；
給父元素添加overflow:hidden屬性，觸發BFC，改變父元素的渲染規則
（2）兄弟關系的外邊距疊加——元素并列關系，垂直方向上相鄰的margin值相遇會出現疊加
解決方法： 給兩個盒子都套一個父盒子，父盒添加overflow屬性
觸發bfc，改變父級渲染規則的方法
19、浮動産生的問題，清浮動的方案？
元素浮動以後，脫離正常文檔流，導緻父元素高度塌陷，影響與父元素同級的後續元素的正常布局
1）為浮動元素的父級盒加強定的高度——不夠靈活
2）為浮動元素的父級盒加浮動——會産生新的浮動問題
3）為浮動元素的父級盒設定overflow屬性，屬性值可以是hidden|scroll|auto——可能會導緻内容顯示不完全；代碼簡潔
4）在浮動元素之後，跟浮動元素呈并列關系的位置，加一個空div，在空div上添加一個屬性clear: both;——代碼備援；通俗易懂、書寫友善
5）推薦方法：
給浮動元素的父元素添加.clearfix，(不會在結構上産生備援代碼，可多次重複使用)
.clearfix{ *zoom: 1; } /*處理ie6,7相容*/
.clearfix:after{ content: ""; display: block; clear: both; }
20、簡述BFC規則，及解決的問題？
1）什麼是BFC？
BFC(Block Formatting Context)是web頁面的可視化CSS 視覺渲染的一部分，是頁面中的一個獨立的渲染區域。用于決定塊盒子的布局及浮動元素與其他元素互動的一個區域，可以改變父級的渲染規則。
2）BFC規則：
内部的标簽會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定，屬于同一個BFC的兩個相鄰标簽的margin會發生重疊
每個标簽的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動标簽也是如此。
BFC的區域不會與float的标簽區域重疊
計算BFC的高度時，浮動子标簽也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子标簽不會影響到外面标簽，反之亦然
3）BFC解決的問題
解決外邊距折疊問題
自适應兩欄或三欄布局
防止字型環繞
清除浮動
21、如何讓盒子水準垂直居中
1）margin負間距
必須知道居中盒的寬度和高度；
為居中盒設定絕對定位；
距離定位父級左邊框和上邊框的距離設定為50%；
将元素分别左移和上移，移動元素寬度和高度的一半
2）margin: auto；實作絕對定位元素的居中
必須知道居中盒的寬度和高度；
為居中盒設定絕對定位；
分别設定left: 0; right: 0; top: 0; bottom: 0;
為居中盒設定margin: auto;
22、等高布局、聖杯布局、雙飛翼布局的實作原理？
等高布局：
方法一：利用内外間距相抵消，注意為父元素設定“overflow: hidden;”
方法二：利用内容撐開父元素的特點，給每一列添加相對應的容器，進行互相嵌套，并在每個容器中設定背景色
方法三：利用邊框模拟背景，實作等高列顯示效果
聖杯布局：
聖杯布局和雙飛翼布局都是為了實作左右兩欄固定寬度，中間部分自适應的三欄布局，不過兩者的實作原理有所不同。聖杯布局的實作思路：
1）HTML結構中，先主體内容後側邊欄
2）兩側固定寬度，中間内容寬度設定100%;
3）主體内容和左右側邊欄分别加浮動；
4）将左側拉到最左邊，将右側拉到最右邊；
5）将中間露出來；
6）分别為左側邊和右側邊設定position:relative; 然後還原左側邊和右側邊
雙飛翼布局：
1）HTML結構中--先主體後側邊欄；
2）兩側固定寬度，中間寬度100%；
3）主體内容和左右側邊欄分别加浮動；
4）将左側拉到最左邊，将右側拉到最右邊；
5）在主體内容的子盒上設定margin值，将中間内容露出來
23、簡述精靈圖(css sprites)的原理及優缺點，如何使用
css sprites——精靈技術、雪碧技術，通常也稱“css圖像拼合”或“貼圖定位”。将一堆小圖整合到一張大圖上，通過background-image、background-repeat屬性顯示圖檔，并且使用background-position屬性實作圖檔的精确顯示，減少伺服器對圖檔的請求數量。
好處：
1）減少網頁的http請求，進而大大的提高頁面的性能
2）圖檔命名上的困擾
3）更換風格友善
缺點：
1）必須要限定容器大小符合背景圖元素位置 ，需要計算
2）維護的時候比較麻煩—圖檔修改麻煩
步驟：
1）制作一張具有多個狀态的拼合圖檔
2）給要顯示背景的盒一個固定的尺寸，以背景方式加載讓其局部顯示
3）通過背景圖定位控制不同的顯示狀态
24、你能想出幾種方法讓元素在頁面中消失？
1）display: none; 元素的隐藏，将整個元素隐藏，不占用任何空間
2）visibility: hidden; 元素内容不可見，隻隐藏内容，占位空間仍然保留
3）通過position屬性設定元素位置，讓其消失
4）overflow屬性實作，将要隐藏元素移出父元素的範圍
5）opacity屬性，實作元素的不可見
25、css3新增了哪些選擇器
屬性選擇器：
element[attr^=value]{ } 指定了屬性名，并且屬性值以value開頭的element元素
element[attr$=value]{ } 指定了屬性名，并且屬性值以value結尾的element元素
element[attr*=value]{ } 指定了屬性名，并且屬性值中包含value的element元素
結構性僞類選擇器
:root{ } 比對根元素
element:first-child{ } 選擇一組相同元素中的第一個元素
element:last-child{ } 選擇一組相同元素中的最後一個元素
element:nth-child(n){ } 選擇一組相同元素中的第n個元素
element:nth-last-child(n){ } 選擇一組相同元素中的倒數第n個元素 element:nth-of-type(n){ } 一組元素中選擇特定類型的元素
element:nth-last-of-type(n){ } 一組元素中選擇特定類型的元素，但是需要從最後一個開始計算
狀态僞類選擇器
element:checked{ } 選擇頁面中處于選中狀态的element元素
element:disabled{ } 選擇頁面中處于禁用狀态的element元素
element:enabled{ } 選擇頁面中處于可用狀态的element元素
26、如何處理HTML5新标簽的浏覽器相容問題？
方案一：使用javascript新增元素的方法解決
document.createElement(“header”);
document.createElement(“footer”);
…
由于建立出來的元素是内聯元素，是以需要轉換成塊級，寬度和高度才能生效。
header,footer{ display:block;}
方案二：使用封裝好的插件html5shiv.js解決相容性問題。
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
27、說說常見浏覽器相容問題
1）ie8中圖檔邊框問題：
解決方案:img{ border:none; }
2) ie8中背景複合屬性寫法問題：
在标準浏覽器中能正常顯示背景圖檔，但在ie8中圖檔顯示異常。
.bg{ background:url(“./images/bg.jpg”)no-repeat center; }
解決方案:
.bg{ background:url(“./images/bg.jpg”) no-repeat center; }
3) 在 IE6 及更早浏覽器中定義小高度的容器問題？
解決方案：#test{ overflow:hidden; height:0px; font-size:0; line-height:0; }
4) IE6 及更早浏覽器浮動時産生雙倍邊距的 BUG問題 ？
解決方案：針對 ie6 設定該标簽的 display 屬性為 inline 即可
#test{ float:left; _display:inline; }
5) IE7 下子标簽相對定位時父标簽 overflow 屬性的 auto|hidden 失效的問題
解決方案：給父标簽也設定相對定位 position:relative;
6)塊轉内聯塊 ie7- 不在一行顯示問題
解決方案：div { display:inline-block; *display:inline; *zoom:1; }
7) IE7 及更早浏覽器下當 li 中出現 2 個或以上的浮動時，li之間産生的空白間隙
解決方案：給<li>加vertical-align:middle/top/bottom
li{ vertical-align:top; }
28、HTML5中新增的表單元素和表單屬性有哪些？
新增表單标簽--input類型
1）url類型：包含通路協定的URL位址的輸入域
2）email類型：包含e-mail位址的輸入域
3）search類型：用于檢索關鍵字的輸入域
4）tel類型：用于輸入電話号碼的輸入域
5）number類型：用于包含數值的輸入域
6）range類型：生成一個數字滑動條
7）color類型：生成一個顔色選擇器
8）date類型：日期選擇器
9）datetime類型：輸入日期時間
10）datetime-local類型：日期和時間選擇器
11）month類型：月選擇器
12）time類型：時間選擇器
13）week類型：周選擇器
14）datalist類型：選項清單，與input元素配合使用
新增表單屬性：
1）min、max、step屬性：輸入域中所允許的最小值、最大值、步長
2）placeholder屬性：為輸入域設定提示資訊
3）list屬性：通過input元素和datalist元素實作可選的下拉清單
4）autocomplete屬性：是否啟用自動完成功能
5）autofocus屬性：自動擷取焦點
6）form屬性：定義表單元素所屬的表單區域
7）required屬性：送出表單時，表單元素不能為空
8）pattern屬性：對使用者輸入内容做驗證
9）multiple屬性：選擇多個值
29、簡述rem布局原理
rem是指相對于根元素的字型大小的機關,即根據html元素的font-size來計算大小。 比如說html的font-size大小為100px，一個div的width為1rem，則div的width大小為100px。
rem布局實作步驟
1）設定頁面的viewport
2）動态計算并設定html的fontsize值
3）按照pc端布局方式正常布局，把px機關換算成rem
30、什麼是less?less有什麼好處？
擁有一套自定義的文法和一個解析器，将程式員編寫的樣式規則，通過解析器編譯成對應的css檔案，才能被浏覽器識别。
好處：
結構清晰，結構清晰，便于擴充，可以屏蔽浏覽器中私有文法的差異，可以實作多重繼承，完全相容css代碼，可以友善地應用到老項目中。
31、常見的移動端布局解決方案有哪些？原理如何？
1）流式布局
垂直方向高度固定，水準方向使用百分比實作，并且使用彈性布局、浮動、定位等技術綜合使用建立可擴充的流式布局
優先：可以很好解決自适應需求
缺點：實際效果可能會不協調，設計存在局限性
2）rem布局
rem——相對于根元素的font-size屬性值的機關，css3新增機關
未經調整的浏覽器的預設字号為16像素，1rem = 16px
rem布局的實作：
設定頁面的viewport；
動态計算并設定html的font-size值;
按照PC端布局方式正常布局，将px機關換算成rem機關
3）vw适配
vw——viewport's width css3規範中視口機關
vh——viewport's height
vw和vh都是将螢幕分成100份，1vw等于螢幕寬度的1%
4）flexible.js
将裝置劃分成10份，确定好html标簽的font-size屬性值。假設有750px的設計稿，則html{ font-size: 75px; }，頁面中元素的rem值 = 元素的px值/75
5）響應式布局
一站适配所有終端。通過媒體查詢檢測不同的裝置螢幕尺寸，适當調整标簽顯示布局，在每種裝置螢幕寬度下呈現出不同的頁面效果
6）grid網格布局
将頁面劃分成相應的表格進行布局 32、<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">如何解釋這句話呢？
viewport 虛拟視窗
width 虛拟視窗的寬度
device-width裝置寬度
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許使用者手動縮放視窗
自定義虛拟視窗，指定虛拟視窗的寬度為裝置寬，初始縮放比為1倍，最大縮放比1倍，最小縮放比1倍，同時不允許使用者手動縮放
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)