1.<div class="parent"><div class="child"></div></div>,父元素和子元素寬高不固定，如何實現(xiàn)水平垂直居中。
方法1：
<style type="text/css">
html,body{height: 100%;}
body{ margin: 0;display: flex; justify-content: center; align-items: center; }
.parent{ display: flex; justify-content: center; align-items: center;}
</style>
方法2：
html,body{height: 100%;}
body{ margin: 0;display: flex;}
.parent{ border: 1px solid red; display: flex;margin: auto;}
.child{ border: 1px solid blue; margin: auto;}
方法3：
<style type="text/css">
body{ margin: 0;}
.parent{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
</style>
2.分別實現(xiàn)骰子中的 '一點' 和 '三點' 的布局。
一點的布局：
<div>
<span></span>
</div>
<style type="text/css">
body{ margin: 0;}
div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;}
span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%;}
</style>
三點的布局
<div>
<span></span>
<span></span>
<span></span>
</div>
<style type="text/css">
body{ margin: 0;}
div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content:space-between; padding: 20px;}
span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%;}
div span:nth-child(1){ align-self: flex-end;}
div span:nth-child(2){ align-self:center;}
</style>
3.簡述選擇器~和+的區(qū)別。
1）.相鄰兄弟選擇器。選擇有相同父元素的兩個挨著的元素的后一個元素。語法：元素1 + 元素2 {聲明}
例如1：
h1 + p { color：red；}
HTML中：
<h1>······</h1>
<p>·······</p> //可以匹配
<a>······</a>
<p>·······</p> //不可以匹配
例如2：
li + li { color：red；}
HTML中：
<ul>
<li>······</li>
<li>······</li> //可以匹配，上一個<li>的兄弟
<li>······</li> //可以匹配，上一個<li>的兄弟
</ul>
2).普通兄弟選擇器。選擇有相同父元素的兩個元素中，第一個元素后所有的第二個元素。語法：元素1 ~ 元素2 { 聲明}
例如：
h1 ~ p { color：red；}
HTML中：
<h1>······</h1>
<p>·······</p> //可以匹配
<a>······</a>
<p>·······</p> //可以匹配
<h2>······<p>···</p>······</h2> //不可以匹配
4.簡述box-sizing的有效值以及所對應(yīng)的盒模型規(guī)則。
box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。
語法：box-sizing: content-box|border-box|inherit;
1）box-sizing:content-box；這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。是默認值。如果你設(shè)置一個元素的寬為100px，那么這個元素的內(nèi)容區(qū)會有100px 寬，并且任何邊框和內(nèi)邊距的寬度都會被增加到最后繪制出來的元素寬度中
2）box-sizing:border-box；為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個元素的width設(shè)為100px,那么這100px會包含其它的border和padding，內(nèi)容區(qū)的實際寬度會是width減去border + padding的計算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個元素的寬高。
3）box-sizing:inherit;；規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值
5.flex中元素的margin是否會合并？
不會合并
6.簡述align-items和align-content的區(qū)別。
align-items屬性適用于所有的flex容器，它是用來設(shè)置每個flex元素在交叉軸上的默認對齊方式。如果是多行多行容器，多行和多行之間是有間距的。
align-content有相同的功能，但是align-content屬性只適用于多行的flex容器，有一個重點就是多行，并且align-content在對齊的過程中，如果是多行多行容器，多行和多行之間的間距是沒有的。
單行容器：
多行容器：
7.簡述data:屬性的用法（如何設(shè)置，如何獲?。?；有何優(yōu)勢？
data-* 的值的獲取和設(shè)置，2種方法：
1）傳統(tǒng)方法
getAttribute() 獲取data-屬性值；
setAttribute() 設(shè)置data-屬性值
2)HTML5新方法
例如 data-href
dataset.href 獲取data-href屬性值
dataset.href = 'http://baidu.com' 設(shè)置data-href屬性值
傳統(tǒng)方法無兼容性問題，但是不夠優(yōu)雅、方便
HTML5新方法很優(yōu)雅、方便，但是有兼容性問題，可以在移動端開發(fā)或不支持低版本瀏覽器的項目中使用
優(yōu)勢：自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗（不需要使用 Ajax 或去服務(wù)端查詢數(shù)據(jù)）。
8.簡述title與h1的區(qū)別，b與strong的區(qū)別，i與em的區(qū)別。
1)title與h1的區(qū)別:
定義：title是網(wǎng)站標題，h1是文章主題
作用：title概括網(wǎng)站信息，可以直接告訴搜索引擎和用戶這個網(wǎng)站是關(guān)于什么主題和內(nèi)容的，是顯示在網(wǎng)頁Tab欄里的；h1突出文章主題，面對用戶，是顯示在網(wǎng)頁中的.
2)b與strong的區(qū)別:
從視覺上效果觀看b與strong是沒有區(qū)別的,從單詞的語義也可以分析得出，b是Bold(加粗)的簡寫，所以這個B標記所傳達的意思只是加粗，沒有任何其它的作用，而Strong我們從字面理解就可以知道他是強調(diào)的意思，所以我們用這個標記向瀏覽器傳達了一個強調(diào)某段文字的消息，他是強調(diào)文檔邏輯的，并非是通知瀏覽器應(yīng)該如何顯示。
3)i與em的區(qū)別:同樣，I是Italic(斜體)，而em是emphasize(強調(diào))。
9.什么是標準文檔流？
標準文檔流：網(wǎng)頁在解析的時候，遵循于從上向下，從左向右的一個順序，而這個順序就是來源于標準文檔流。
標準文檔流等級，分為兩種等級：塊級元素和行內(nèi)元素；
塊級元素：
1).霸占一行，不能與其他任何元素并列
2).能接受寬、高
3).如果不設(shè)置寬度，那么寬度將默認變?yōu)楦赣H的100%，即和父親一樣寬
行內(nèi)元素：
1).與其他元素并排
2).不能設(shè)置寬、高。默認的寬度就是文字的寬度
10.z-index是什么？在position的值是什么時可以觸發(fā)？
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面，當脫離文檔流內(nèi)容較多，并且相互重疊的時候，就有可能發(fā)生本想完全顯示的內(nèi)容被其他內(nèi)容遮擋的結(jié)果，這時我們就需要人為指定哪個層在上面，哪個在下面，z-index屬性就是干這個用的。注意：Z-index 僅能在定位元素上奏效.
在position的值是relative、absolute、fixed、sticky時候可以觸發(fā)
11、PC端常用的布局方法
固定布局、浮動布局、定位布局、流式布局、彈性布局
12 布局 左邊20% 中間自適應(yīng) 右邊200px 不能用定位
方法1：
<div class>>left</div>
<div class>>center</div>
<div class>>right</div>
<style type="text/css">
body{ margin: 0; display: flex;}
.left{width: 20%; height: 200px; background: red;}
.center{height: 400px; background: blue; flex-grow: 1;}
.right{width: 200px; height: 600px; background: pink; }
</style>
方法2：
<div class>>left</div>
<div class>>right</div>
<div class>>center</div>
<style>
body{ margin: 0; }
.left{width: 20%; height: 200px; background: red; float: left;}
.center{height: 600px; background: blue; margin-left: 20%; margin-right: 200px;}
.right{width: 200px; height: 400px; background: pink; float: right;}
</style>
方法3：
<div class>left</div>
<div class>>right</div>
<div class>>center</div>
<style type="text/css">
body{ margin: 0; }
.left{width: 20%; height: 200px; background: red; float: left;}
.center{overflow: hidden; height: 400px; background: blue;}
.right{width: 200px; height: 600px; background: pink; float: right;}
</style>
