1营密、H5 的新特性有哪些械媒？C3 的新特性有哪些？
一评汰、H5新特性：
1纷捞、語義化更好的標(biāo)簽(header、nav被去、aside主儡、footer、article惨缆、section)糜值；
2、表單控件坯墨，新增search寂汇、number、date捣染、color骄瓣、image、file耍攘、time榕栏、email；
3少漆、自定義屬性data-id臼膏；
4、本地存儲(chǔ)：sessionStorage(瀏覽器關(guān)閉后自動(dòng)刪除)示损、localStorage(長期存儲(chǔ)數(shù)據(jù)渗磅，瀏覽器關(guān)閉后數(shù)據(jù)不清除)；
5、新增媒體標(biāo)簽：audio始鱼、video
以上為常用的仔掸，此外不經(jīng)常用的還有：canvas、地理API(Geolocation)医清、webSocket起暮、拖拽Api(ondrop)。
二会烙、C3新特性：
1负懦、邊框：border-radius，邊框陰影：box-shadow(水平陰影柏腻、垂直陰影纸厉、模糊距離、陰影尺寸五嫂、陰影顏色颗品、inset(從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影))
2、文字陰影：text-shadow（水平陰影沃缘、垂直陰影躯枢、模糊距離、陰影顏色）
3槐臀、顏色：新增GRBA锄蹂、HLSA模式
4、2D轉(zhuǎn)換峰档、3D轉(zhuǎn)換 transform(translate败匹、rotate寨昙、scale)
5讥巡、彈性布局(flex布局)
6、盒子模型: box-sizing
7舔哪、過渡 : transition 可實(shí)現(xiàn)動(dòng)畫
8欢顷、媒體查詢 @media screen and (width:800px){}
9、字體圖標(biāo)font-face
10捉蚤、背景:background-size background-origin(背景原點(diǎn)抬驴、背景起始位置) background-clip(背景繪制區(qū)域:border-box|padding-box|content-box)
2、Localstorage缆巧、sessionStorage布持、cookie 的區(qū)別
相同點(diǎn)：
都是同源的，且存在于瀏覽器端陕悬。
不同點(diǎn)：
1题暖、cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳遞，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)往服務(wù)器端，僅在本地保存胧卤。此外唯绍，cookie還有路徑(path)的概念，可以限制cookie只屬于某一路徑下枝誊。
2况芒、存儲(chǔ)大小限制不同。因?yàn)槊看?http 請(qǐng)求都會(huì)攜帶 cookie叶撒、所以 cookie 只適合保存很小的數(shù)據(jù)绝骚，大小不能超過4K，比如可以存儲(chǔ)會(huì)話標(biāo)識(shí)祠够。而sessionStorage和localStorage雖然也有大小限制皮壁，但是卻比cookie大得多，可以達(dá)到5M或者更多哪审。
3蛾魄、數(shù)據(jù)有效期不同。sessionStorage僅在當(dāng)前瀏覽器關(guān)閉前有效湿滓，localStorage在關(guān)閉瀏覽器后依然存在滴须。cookie則是在設(shè)置的有效期過期前有效。
4叽奥、作用域不同扔水。sessionStorage不在不同的瀏覽器窗口中共享，即使是同一頁面朝氓，而localStorage和cookie則是在所有同源窗口中都是共享的魔市。
3、如何使一個(gè)盒子水平垂直居中赵哲？
方法一待德、定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法二、利用 margin:auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法三枫夺、利用 display：flex;設(shè)置垂直水平都居中
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex; //父元素設(shè)置display：flex将宪；
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
}
方法四、transform
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4橡庞、如何垂直居中一個(gè) img?
#container {
display:table-cell; //會(huì)使元素表現(xiàn)的類似一個(gè)表格中的單元格td较坛，利用這個(gè)特性可以實(shí)現(xiàn)文字的垂直居中效果。
//同時(shí)它也會(huì)破壞一些CSS屬性扒最，使用table-cell時(shí)最好不要與float以及position: absolute一起使用丑勤，設(shè)置了table-cell的元素對(duì)高度和寬度高度敏感，對(duì)margin值無反應(yīng)吧趣，可以響應(yīng)padding的設(shè)置法竞，表現(xiàn)幾乎類似一個(gè)td元素除呵。
text-align:center;
vertical-align:middle;
}
5、CSS 的盒模型
box-sizing:content-box; // border 和 padding 不算到 width 范圍內(nèi)爪喘，可以理解為是 W3c 的標(biāo)準(zhǔn)模型(default)颜曾。總寬=width+padding+border+margin
box-sizing:border-box;//border 和 padding 劃歸到 width 范圍內(nèi)秉剑，可以理解為是 IE 的怪異盒 模型泛豪，總寬=width+margin
6、哪些是塊級(jí)元素那些是行內(nèi)元素侦鹏，各有什么特點(diǎn)?
行內(nèi)元素: a诡曙、span、b略水、img价卤、strong、input渊涝、select慎璧、lable、em跨释、button胸私、textarea
塊級(jí)元素：div、ul鳖谈、li岁疼、dl、dt缆娃、dd捷绒、p、h1-h6贯要、blockquote暖侨、form
7、CSS 選擇器有哪些?哪些屬性可以繼承?
CSS 選擇器：
1郭毕、id 選擇器（ # myid）
2它碎、類選擇器（.myclassname）
3、標(biāo)簽選擇器（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
8兽肤、CSS 中哪些屬性可繼承套腹，哪些不可以？
能繼承的屬性
- 字體系列屬性:font资铡、font-family电禀、font-weight、font-size笤休、font-style;
- 文本系列屬性:
2.1）內(nèi)聯(lián)元素：color尖飞、line-height、word-spacing店雅、letter-spacing政基、
text-transform;
2.2）塊級(jí)元素：text-indent、text-align; - 元素可見性：visibility
- 表格布局屬性：caption-side闹啦、border-collapse沮明、border-spacing、empty-cells窍奋、
table-layout; - 列表布局屬性：list-style
不能繼承的屬性 - display：規(guī)定元素應(yīng)該生成的框的類型荐健；
- 文本屬性：vertical-align、text-decoration;
- 盒子模型的屬性：width琳袄、height摧扇、margin 、border挚歧、padding;
- 背景屬性：background扛稽、background-color、background-image;
- 定位屬性：float滑负、clear在张、position、top矮慕、right帮匾、bottom、left痴鳄、min-width瘟斜、
min-height、max-width痪寻、max-height螺句、overflow、clip
9橡类、CSS 單位中 px蛇尚、em 和 rem 的區(qū)別？
1顾画、px 像素（Pixel）取劫。絕對(duì)單位匆笤。像素 px 是相對(duì)于顯示器屏幕分辨率而言的，是一
個(gè)虛擬長度單位谱邪，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長度單位
2炮捧、em 是相對(duì)長度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸惦银。如當(dāng)前對(duì)行內(nèi)文本的字
體尺寸未被人為設(shè)置咆课，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大
小璧函，因此并不是一個(gè)固定的值
3傀蚌、rem 是 CSS3 新增的一個(gè)相對(duì)單位（root em，根 em）蘸吓，使用 rem 為元素設(shè)定字
體大小時(shí)善炫，仍然是相對(duì)大小，但相對(duì)的只是 HTML 根元素
4库继、區(qū)別：
IE 無法調(diào)整那些使用 px 作為單位的字體大小箩艺，而 em 和 rem 可以縮放，rem相對(duì)的只是 HTML 根元素宪萄。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身艺谆，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)拜英。目前静汤，除了 IE8 及更早版本外，所有瀏覽器均已支持 rem
10居凶、rem 適配方法如何計(jì)算 HTML 跟字號(hào)及適配方案虫给？
通用方案
1、設(shè)置根 font-size：625%（或其它自定的值侠碧，但換算規(guī)則 1rem 不能小于 12px）
2抹估、通過媒體查詢分別設(shè)置每個(gè)屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可換算為 rem
優(yōu)：有一定適用性弄兜，換算也較為簡單
劣：有兼容性的坑药蜻，對(duì)不同手機(jī)適配不是非常精準(zhǔn)；需要設(shè)置多個(gè)媒體查詢來適應(yīng)不同
手機(jī)替饿，單某款手機(jī)尺寸不在設(shè)置范圍之內(nèi)语泽，會(huì)導(dǎo)致無法適配
網(wǎng)易方案
1、拿到設(shè)計(jì)稿除以 100盛垦，得到寬度 rem 值
2湿弦、通過給 html 的 style 設(shè)置 font-size，把 1 里面得到的寬度 rem 值代入
x document.documentElement.style.fontSize =
document.documentElement.clientWidth / x + ‘px‘;
3腾夯、設(shè)計(jì)稿 px/100 即可換算為 rem
優(yōu)：通過動(dòng)態(tài)根 font-size 來做適配颊埃，基本無兼容性問題，適配較為精準(zhǔn)蝶俱，換算簡便
劣：無 viewport 縮放班利，且針對(duì) iPhone 的 Retina 屏沒有做適配，導(dǎo)致對(duì)一些手機(jī)的適
配不是很到位
手淘方案
1榨呆、拿到設(shè)計(jì)稿除以 10罗标，得到 font-size 基準(zhǔn)值
2、引入 flexible
3积蜻、不要設(shè)置 meta 的 viewport 縮放值
4闯割、設(shè)計(jì)稿 px/ font-size 基準(zhǔn)值，即可換算為 rem
優(yōu)：通過動(dòng)態(tài)根 font-size竿拆、viewpor宙拉、dpr 來做適配，無兼容性問題丙笋，適配精準(zhǔn)谢澈。
劣：需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用 sublime text 編輯器插件開發(fā)時(shí)御板，單
位計(jì)算復(fù)雜
11锥忿、CSS 中 link 和@import 的區(qū)別？
適用范圍不同 ：@import 可以在網(wǎng)頁頁面中使用怠肋，也可以在 CSS 文件中使用敬鬓，用來將多個(gè) CSS 文件引入到一個(gè) CSS 文件中；而 link 只能將 CSS 文件引入到網(wǎng)頁頁面中笙各。
功能范圍不同： link 屬于XHTML 標(biāo)簽钉答，而@import 是 CSS 提供的一種方式，link 標(biāo)簽除了可以加載 CSS 外酪惭，還可以定義 RSS希痴，定義 rel 連接屬性等，@import 就只能加載 CSS春感。
加載順序不同： 當(dāng)一個(gè)頁面被加載的時(shí)候砌创，link 引用的 CSS 會(huì)同時(shí)被加載，@import引用CSS 會(huì)等到頁面全部被下載完再被加載鲫懒。所以有時(shí)候?yàn)g覽@import 加載 CSS 的頁面時(shí)開始會(huì)沒有樣式（就是閃爍）嫩实，網(wǎng)速慢的時(shí)候還挺明顯。
兼容性：由于@import 是 css2.1 提出的窥岩，所以老的瀏覽器不支持甲献，@import 只有在 IE5以上的才能識(shí)別，而 link 標(biāo)簽無此問題控制樣式時(shí)的差別 使用 link 方式可以讓用戶切換 CSS 樣式.現(xiàn)代瀏覽器Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同 的風(fēng)格), 當(dāng)然你還可以使用 Javascript 使得 IE 也支持用戶更換樣式
權(quán)重區(qū)別 ：link 引入的樣式權(quán)重大于@import 引入的樣式
12颂翼、Display：none 與 visibility：hidden 的區(qū)別晃洒？
最常用的為 display:none 和 visibility:hidden
dispaly:none 設(shè)置該屬性后慨灭，該元素下的元素都會(huì)隱藏，占據(jù)的空間消失
visibility:hidden 設(shè)置該元素后球及，元素雖然不可見了氧骤，但是依然占據(jù)空間的位置
區(qū)別
1.visibility 具有繼承性，其子元素也會(huì)繼承此屬性吃引，若設(shè)置 visibility:visible筹陵，則子元
素會(huì)顯示
2.visibility 不會(huì)影響計(jì)數(shù)器的計(jì)算，雖然隱藏掉了镊尺，但是計(jì)數(shù)器依然繼續(xù)運(yùn)行著朦佩。
3.在 CSS3 的 transition 中支持 visibility 屬性，但是不支持 display庐氮，因?yàn)?transition 可
以延遲執(zhí)行语稠，因此配合 visibility 使用純 CSS 實(shí)現(xiàn) hover 延時(shí)顯示效果可以提高用戶 體
驗(yàn)
4.display:none 會(huì)引起回流(重排)和重繪 visibility:hidden 會(huì)引起重繪
