如何居中 div琼开？
水平居中： 給 div 設(shè)置一個(gè)寬度鸠删， 然后添加 margin:0 auto 屬性
div{width:200px;margin:0 auto;}
讓絕對(duì)定位的 div 居中
div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;
left: 0;bottom: 0;right: 0;background-color: pink; /* 方便看效果 */}
水平垂直居中一
確定容器的寬高 寬 500 高 300 的層,設(shè)置層的外邊距
div {position: relative; /* 相對(duì)定位或絕對(duì)定位均可 */
width:500px;height:300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;
/* 外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */}
水平垂直居中二
未知容器的寬高稠歉， 利用 `transform` 屬性
div {position: absolute; /* 相對(duì)定位或絕對(duì)定位均可 */
width:500px;height:300px;top: 50%;left: 50%;transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */}
水平垂直居中三
利用 flex 布局,實(shí)際使用時(shí)應(yīng)考慮兼容性
.container {display: flex; align-items: center;/* 垂直居中 */justify-content: center;/*
水平居中 */}
.container div {width: 100px;height: 100px;background-color: pink;/* 方便看效果 */}
display 有哪些值射众？ 說(shuō)明他們的作用
block 塊類型澎胡。 默認(rèn)寬度為父元素寬度钮追， 可設(shè)置寬高预厌， 換行顯示。
none 缺省值元媚。 象行內(nèi)元素類型一樣顯示轧叽。 //隱藏不展示
inline 行內(nèi)元素類型。 默認(rèn)寬度為內(nèi)容寬度刊棕， 不可設(shè)置寬高炭晒， 同行顯示。
inline-block 默認(rèn)寬度為內(nèi)容寬度甥角， 可以設(shè)置寬高网严， 同行顯示。
list-item 象塊類型元素一樣顯示蜈膨， 并添加樣式列表標(biāo)記屿笼。
table 此元素會(huì)作為塊級(jí)表格來(lái)顯示牺荠。
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值
position 的值 relative 和 absolute 定位原點(diǎn)是
absolute
生成絕對(duì)定位的元素翁巍， 相對(duì)于值不為 static 的第一個(gè)父元素進(jìn)行定位。
fixed （ 老 IE 不支持）
生成絕對(duì)定位的元素休雌， 相對(duì)于瀏覽器窗口進(jìn)行定位灶壶。
relative
生成相對(duì)定位的元素， 相對(duì)于其正常位置進(jìn)行定位杈曲。
static
默認(rèn)值驰凛。 沒(méi)有定位， 元素出現(xiàn)在正常的流中（ 忽略 top, bottom, left, right z-index 聲明） 担扑。
inherit? 規(guī)定從父元素繼承 position 屬性的值恰响。
一個(gè)滿屏 ‘ 品’ 字布局 如何設(shè)計(jì)
簡(jiǎn)單的方式：
上面的 div 寬 100%，
下面的兩個(gè) div 分別寬 50%涌献，
然后用 float 或者 inline 使其不換行即可
//其實(shí)沒(méi)明白這是干嘛胚宦，要我啊 自己P一張品字 img放上去 反正全屏，干凈利索燕垃。
css 多列等高如何實(shí)現(xiàn)
利用 padding-bottom|margin-bottom 正負(fù)值相抵枢劝；
設(shè)置父容器設(shè)置超出隱藏（ overflow:hidden） ， 這樣子父容器的高度就還是它里面的列沒(méi)有設(shè)定 padding-bottom 時(shí)的高度卜壕，
當(dāng)它里面的任 一列高度增加了您旁， 則父容器的高度被撐到里面最高那列的高度，
其他比這列矮的列會(huì)用它們的 padding-bottom 補(bǔ)償這部分高度差
//這個(gè)還需要在看看
li 與 li 之間有看不見(jiàn)的空白間隔是什么原因引起的轴捎？ 有什么解決辦法
行框的排列會(huì)受到中間空白（ 回車\空格） 等的影響鹤盒， 因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式蚕脏， 占據(jù)空間，
所以會(huì)有間隔昨悼， 把字符大小設(shè)為 0蝗锥， 就沒(méi)有空格了
為什么要初始化 CSS 樣式
因?yàn)闉g覽器的兼容問(wèn)題， 不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的率触， 如果沒(méi)對(duì) CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異
當(dāng)然终议， 初始化樣式會(huì)對(duì) SEO 有一定的影響， 但魚和熊掌不可兼得葱蝗， 但力求影響最小的情況下初始化穴张。
最簡(jiǎn)單的初始化方法： * {padding: 0; margin: 0;}
*?absolute 的 containing block(容器塊)計(jì)算方式跟正常流有什么不同
無(wú)論屬于哪種， 都要先找到其祖先元素中最近的 position 值不為 static 的元素两曼，
然后再判斷：
1皂甘、 若此元素為 inline 元素， 則 containing block 為能夠包含這個(gè)元素生成的第一
個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形悼凑；
2偿枕、 否則,則由這個(gè)祖先元素的 padding box 構(gòu)成。
如果都找不到户辫， 則為 initial containing block渐夸。
補(bǔ)充：
? ? 1.? static(默認(rèn)的)/relative： 簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框 （ 即去掉 padding 的部分）
? ? 2. absolute: 向上找最近的定位為 absolute/relative 的元素
? ? 3. fixed: 它的 containing block 一律為根元素(html/body)， 根元素也是 initial? containing block
? ? //不是很明白可以再看看
*?CSS 里的 visibility 屬性有個(gè) collapse 屬性值是干嘛用的渔欢？ 在不同瀏覽器下以后什么區(qū)別墓塌？
其實(shí) visibility 可以有第三種值， 就是 collapse奥额。 當(dāng)一個(gè)元素的 visibility 屬性被設(shè)置成 collapse 值后苫幢，對(duì)于一般的元素， 它的表現(xiàn)跟 hidden 是一樣的垫挨。 但例外的是韩肝， 如果這個(gè)元素是 table 相關(guān)的元素， 例如 table 行九榔，table group哀峻， table 列， table column group帚屉， 它的表現(xiàn)卻跟 display: none 一樣谜诫， 也就是說(shuō)， 它們占用的空間也會(huì)釋放攻旦。在谷歌瀏覽器里喻旷， 使用 collapse 值和使用 hidden 值沒(méi)有什么區(qū)別
? ? 在火狐瀏覽器、 Opera 和 IE11 里牢屋， 使用 collapse 值的效果就如它的字面意思： table的行會(huì)消失且预， 它的下面一行會(huì)補(bǔ)充它的位置槽袄。
對(duì) BFC 規(guī)范(塊級(jí)格式化上下文： block formatting context)的理解
（ W3C CSS 2.1 規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器， 決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用锋谐。 ）
一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型遍尺。
不同類型的 Box,會(huì)參與不同的 Formatting Context（ 決定如何渲染文檔的容器） ,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響
css 定義的權(quán)重
以下是權(quán)重的規(guī)則： 標(biāo)簽的權(quán)重為 1， class 的權(quán)重為 10涮拗， id 的權(quán)重為 100乾戏， 以下例子是演示各種定義的權(quán)重值
權(quán)重為 1 div{}
權(quán)重為 10 .class1{}
權(quán)重為 100 #id1{}
權(quán)重為 100+1=101 #id1 div{}
權(quán)重為 10+1=11 .class1 div{}
權(quán)重為 10+10+1=21 .class1 .class2 div{}
如果權(quán)重相同， 則最后定義的樣式會(huì)起作用三热， 但是應(yīng)該避免這種情況出現(xiàn)
請(qǐng)解釋一下為什么需要清除浮動(dòng)鼓择？ 清除浮動(dòng)的方式
清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。 浮動(dòng)的元素就漾， 高度會(huì)塌陷呐能，而高度的塌陷使我們頁(yè)面后面的布局不能正常顯示
1、 父級(jí) div 定義 height抑堡；
2摆出、 父級(jí) div 也一起浮動(dòng)；
3首妖、 常規(guī)的使用一個(gè) class偎漫；
.clearfix:after {
? ? content: " ";
? ? display: table;
}
.clearfix:after {
? ? clear: both;
}
.clearfix {
? ? *zoom: 1;
}
*?SASS 編譯的時(shí)候， 浮動(dòng)元素的父級(jí) div 定義偽類:after
&:after,&:before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：
1) display:block 使生成的元素以塊級(jí)元素顯示,占滿剩余空間;
2) height:0 避免生成內(nèi)容破壞原有布局的高度悯搔。
3) visibility:hidden 使生成的內(nèi)容不可見(jiàn)骑丸， 并允許可能被生成內(nèi)容蓋住的內(nèi)容可
以進(jìn)行點(diǎn)擊和交互;
4） 通過(guò) content:"."生成內(nèi)容作為最后一個(gè)元素舌仍， 至于 content 里面是點(diǎn)還是其
他都是可以的妒貌， 例如 oocss 里面就有經(jīng)典的 content:".",有些版本可能 content 里面內(nèi)容
為空,一絲冰涼是不推薦這樣做的,firefox 直到 7.0 content:” " 仍然會(huì)產(chǎn)生額外的空隙；
5） zoom： 1 觸發(fā) IE hasLayout铸豁。
通過(guò)分析發(fā)現(xiàn)灌曙， 除了 clear： both 用來(lái)閉合浮動(dòng)的， 其他代碼無(wú)非都是為了隱藏掉 content 生成的內(nèi)容节芥，
這也就是其他版本的閉合浮動(dòng)為什么會(huì)有 font-size： 0在刺， line-height： 0。
什么是外邊距合并
外邊距合并指的是头镊， 當(dāng)兩個(gè)垂直外邊距相遇時(shí)蚣驼， 它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者
*?zoom:1 的清除浮動(dòng)原理
清除浮動(dòng)相艇， 觸發(fā) hasLayout颖杏；
Zoom 屬性是 IE 瀏覽器的專有屬性， 它可以設(shè)置或檢索對(duì)象的縮放比例坛芽。 解決 ie 下
比較奇葩的 bug留储。
譬如外邊距（ margin） 的重疊翼抠， 浮動(dòng)清除， 觸發(fā) ie 的 haslayout 屬性等获讳。
來(lái)龍去脈大概如下：
當(dāng)設(shè)置了 zoom 的值之后阴颖， 所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小， 高度寬度就會(huì)重
新計(jì)算了丐膝， 這里一旦改變 zoom 值時(shí)其實(shí)也會(huì)發(fā)生重新渲染量愧， 運(yùn)用這個(gè)原理， 也就解決了 ie 下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題帅矗。
Zoom 屬是 IE 瀏覽器的專有屬性侠畔， 火狐和老版本的 webkit 核心的瀏覽器都不持這個(gè)屬性。 然而损晤， zoom 現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化软棺， 出現(xiàn)在 CSS 3.0 規(guī)范草案中。
目前非 ie 由于不支持這個(gè)屬性尤勋， 它們又是通過(guò)什么屬性來(lái)實(shí)現(xiàn)元素的縮放呢喘落？
可以通過(guò) css3 里面的動(dòng)畫屬性 scale 進(jìn)行縮放。
CSS 優(yōu)化最冰、 提高性能的方法有哪些
關(guān)鍵選擇器（ key selector） 瘦棋。 選擇器的最后面的部分為關(guān)鍵選擇器（ 即用來(lái)匹配目標(biāo)元素的部分） ；
如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器暖哨， 則不要為規(guī)則增加標(biāo)簽赌朋。 過(guò)濾掉無(wú)關(guān)的規(guī)則（ 這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了） ；
提取項(xiàng)目的通用公有樣式篇裁， 增強(qiáng)可復(fù)用性沛慢， 按模塊編寫組件； 增強(qiáng)項(xiàng)目的協(xié)同開發(fā)性达布、 可維護(hù)性和可擴(kuò)展性;
使用預(yù)處理工具或構(gòu)建工具（ gulp 對(duì) css 進(jìn)行語(yǔ)法檢查团甲、 自動(dòng)補(bǔ)前綴、 打包壓縮黍聂、自動(dòng)優(yōu)雅降級(jí)） 躺苦；
瀏覽器是怎樣解析 CSS 選擇器的
樣式系統(tǒng)從關(guān)鍵選擇器開始匹配， 然后左移查找規(guī)則選擇器的祖先元素产还。
只要選擇器的子樹一直在工作匹厘， 樣式系統(tǒng)就會(huì)持續(xù)左移， 直到和規(guī)則匹配脐区， 或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則
margin 和 padding 分別適合什么場(chǎng)景使用
margin 是用來(lái)隔開元素與元素的間距愈诚； padding 是用來(lái)隔開元素與內(nèi)容的間隔。
margin 用于布局分開元素使元素與元素互不相干；
padding 用于元素與內(nèi)容之間的間隔扰路， 讓內(nèi)容（ 文字） 與（ 包裹） 元素之間有一段
CSS 優(yōu)先級(jí)算法如何計(jì)算
優(yōu)先級(jí)就近原則尤溜， 同權(quán)重情況下樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級(jí)為:
同權(quán)重: 內(nèi)聯(lián)樣式表（ 標(biāo)簽內(nèi)部） > 嵌入樣式表（ 當(dāng)前文件中） > 外部樣式表（ 外部文
件中） 。
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
//這里我記得看過(guò)那個(gè)書上有寫 是是個(gè)權(quán)重值汗唱，每種代表一種意思宫莱，每一種多給一個(gè)在相應(yīng)權(quán)重值上加1.? 比如? 1111? ? 第一個(gè)1 代表ID 那么ID 多一個(gè) 就是2111? class代表第二個(gè) ，再多的class也不會(huì)比2111高（記得大概是這么個(gè)意思）
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
介紹一下標(biāo)準(zhǔn)的 CSS 的盒子模型？ 低版本 IE 的盒子模型有什么不同的际插？
（ 1） 有兩種碘耳， IE 盒子模型、 W3C 盒子模型框弛；
（ 2） 盒模型： 內(nèi)容(content)辛辨、 填充(padding)、 邊界(margin)瑟枫、 邊框(border)斗搞；
（ 3） 區(qū) 別： IE 的 content 部分把 border 和 padding 計(jì)算了進(jìn)去;
//box-sizing:border-box;? 可以用這個(gè)規(guī)定一下
title 與 h1 的區(qū)別、 b 與 strong 的區(qū)別慷妙、 i 與 em 的區(qū)別僻焚？
title 屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題， H1 則表示層次明確的標(biāo)題膝擂， 對(duì)頁(yè)面信息的抓取也有很大的影響虑啤；
strong 是標(biāo)明重點(diǎn)內(nèi)容， 有語(yǔ)氣加強(qiáng)的含義架馋， 使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)會(huì)重讀狞山， 而是展示強(qiáng)調(diào)內(nèi)容。
i 內(nèi)容展示為斜體绩蜻， em 表示強(qiáng)調(diào)的文本铣墨；
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語(yǔ)義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽室埋。
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的办绝， 是為了解決什么安全問(wèn)題
區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序。 可以防止惡意破解密碼姚淆、 刷票孕蝉、 論壇灌水；
有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試
//防止刷票之類的
簡(jiǎn)述一下你對(duì) HTML 語(yǔ)義化的理解？
用正確的標(biāo)簽做正確的事情
html 語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化， 結(jié)構(gòu)更清晰历造， 便于對(duì)瀏覽器互妓、 搜索引擎解析;
即使在沒(méi)有樣式 CSS 情況下也以一種文檔格式顯示粗俱， 并且是容易閱讀的;
搜索引擎的爬蟲也依賴于 HTML 標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重收班， 利于 SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊涮帘， 便于閱讀維護(hù)理解
//不要什么都用div? 標(biāo)簽要用h1帝簇、h2系吩、h3? session aside 等 讓瀏覽器更好的識(shí)別
介紹一下你對(duì)瀏覽器內(nèi)核的理解来庭？
主要分成兩部分： 渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。
渲染引擎： 負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（ HTML穿挨、 XML月弛、 圖像等等） 、 整理訊息（例如加入
CSS 等） 科盛，
以及計(jì)算網(wǎng)頁(yè)的顯示方式帽衙， 然后會(huì)輸出至顯示器或打印機(jī)。 瀏覽器的內(nèi)核的不同對(duì)
于網(wǎng) 頁(yè)的語(yǔ)法解釋會(huì)有不同贞绵， 所以渲染的效果也不相同厉萝。 所有網(wǎng)頁(yè)瀏覽器、 電子郵
件客戶端 以及其它需要編輯榨崩、 顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核冀泻。
JS 引擎則： 解析和執(zhí)行 javascript 來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開始渲染引擎和 JS 引擎并沒(méi)有區(qū)分的很明確蜡饵， 后來(lái) JS 引擎越來(lái)越獨(dú)立弹渔， 內(nèi)核就
傾向 于只指渲染引擎。
頁(yè)面導(dǎo)入樣式時(shí)溯祸， 使用 link 和@import 有什么區(qū)別肢专？
（ 1） link 屬于 XHTML 標(biāo)簽， 除了加載 CSS 外焦辅， 還能用于定義 RSS, 定義 rel 連接屬性等
作用博杖； 而@import 是 CSS 提供的， 只能用于加載 CSS;
（ 2） 頁(yè)面被加載的時(shí)筷登， link 會(huì)同時(shí)被加載剃根， 而@import 引用的 CSS 會(huì)等到頁(yè)面被加載完
再加載;
（ 3） import 是 CSS2.1 提出的， 只在 IE5 以上才能被識(shí)別前方， 而 link 是 XHTML 標(biāo)簽狈醉， 無(wú)兼
容問(wèn)題;
//但是看書中說(shuō)@import的性能并不比link的好
行內(nèi)元素有哪些？ 塊級(jí)元素有哪些惠险？ 空(void)元素有那些苗傅？
首先： CSS 規(guī)范規(guī)定， 每個(gè)元素都有 display 屬性班巩， 確定該元素的類型渣慕， 每個(gè)元素都有默
認(rèn)的 display 值， 如 div 的 display 默認(rèn)值為“block” ， 則為“ 塊級(jí)” 元素逊桦；
span 默認(rèn) display 屬性值為“inline” 眨猎， 是“ 行內(nèi)” 元素。
（ 1） 行內(nèi)元素有： a b span img input select strong（ 強(qiáng)調(diào)的語(yǔ)氣）
（ 2） 塊級(jí)元素有： div ul ol li dl dt dd h1 h2 h3 h4…p
????(3)空元素有：br,hr,img,input,link,meta,
Doctype 作用强经？ 標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
（ 1） 聲明位于位于 HTML 文檔中的第一行宵呛， 處于 標(biāo)簽之前。
告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔夕凝。
DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)宝穗。
（ 2） 標(biāo)準(zhǔn)模式的排版 和 JS 運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。 在兼容
模式中码秉，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作逮矛。
