1. 盒子模型，普通盒子模型和怪異盒子模型有什么區(qū)別？
?答：普通盒子模型又稱標(biāo)準(zhǔn)W3C盒子模型越妈，標(biāo)準(zhǔn)盒子模型的Width等于content的寬度，標(biāo)準(zhǔn)盒子模型的Height等于Content的高度?
? ? ? ? 標(biāo)準(zhǔn)盒子大小計(jì)算公式：width（content）+padding +border + margin
? ? 怪異盒子模型又稱IE盒子模型钮糖，怪異盒子模型的Width等于Content?padding?border的寬度梅掠，怪異盒子模型的Height等于content?padding?border的高度
? ? 怪異盒子大小的計(jì)算公式：width（content + padding + border）+ margin
2. 塊元素和行內(nèi)元素的區(qū)別是什么？常見塊元素和行內(nèi)元素有哪些藐鹤？
答：? ? 塊級(jí)元素一般從新行開始瓤檐，可以容納行內(nèi)元素和其他塊級(jí)元素；常見的必入div / p娱节，form這個(gè)塊級(jí)元素比較特殊，他只能容納其它塊級(jí)元素祭示。
? ? ? ? ? ? 行內(nèi)元素又稱內(nèi)聯(lián)元素肄满，一般都是語義級(jí)別元素，他只能容納文本或者其他內(nèi)聯(lián)（行內(nèi)）元素质涛。（span / label / a / h / b / i）
????塊級(jí)元素與行內(nèi)元素的三個(gè)區(qū)別：1.行內(nèi)元素會(huì)在一條直線上排列稠歉，都是同一行的，水平方向汇陆；塊級(jí)元素各占一行怒炸，垂直方向排列，塊級(jí)元素從新行開始結(jié)束接著斷行毡代。2. 塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素阅羹；行內(nèi)元素不包含塊級(jí)元素。3. 行內(nèi)元素與塊級(jí)元素屬性上不同教寂，主要體現(xiàn)在盒子模型屬性上：行內(nèi)元素設(shè)置width無效捏鱼，height無效（可設(shè)置line-height），margin上下無效酪耕，padding上下無效
? ??行內(nèi)元素轉(zhuǎn)為塊級(jí)元素：display:block （字面意思表現(xiàn)形式設(shè)為塊級(jí)）
3. HTML語義化標(biāo)簽有哪些导梆？
答：語義化標(biāo)簽可以理解為用于進(jìn)行網(wǎng)頁頁面構(gòu)建的標(biāo)簽，他們不會(huì)影響頁面內(nèi)容，只是對(duì)頁面結(jié)構(gòu)規(guī)范化看尼。
????為什適用語義化標(biāo)簽：1）已修改递鹉，維護(hù)? ?2）更易理解頁面結(jié)構(gòu)。 3）有利于SEO搜索引擎檢索
????語義化標(biāo)簽的使用：1. 頭部標(biāo)簽<header>: 1) 標(biāo)注內(nèi)容的標(biāo)題? 2）標(biāo)注網(wǎng)頁的頁眉? 藏斩；2. 導(dǎo)航欄標(biāo)簽<nav>：用于一組文章鏈接梳虽，一個(gè)頁面可以包含多個(gè)<nav>標(biāo)簽，但通常僅僅在頁面主要導(dǎo)航部分使用它灾茁；3. 附注標(biāo)簽<aside>：元素不僅僅是側(cè)欄窜觉，它表示與它周圍文本沒有密切關(guān)系的內(nèi)容； 4. 頁腳標(biāo)簽<footer>：可以包含版權(quán)北专，來源信息禀挫，法律限制等等之類文本或鏈接信息，可以包含其他行內(nèi)或塊級(jí)元素拓颓； 5. 主要內(nèi)容標(biāo)簽<main> 语婴； 6. 文章標(biāo)簽<article>：是一個(gè)完整的自成一體的內(nèi)容塊
4.偽類和偽元素的區(qū)別是什么？
答：相同點(diǎn)：都屬于選擇器中的一種驶睦，能實(shí)現(xiàn)對(duì)于頁面元素的修飾
? ? ? ? 不同點(diǎn)：
? ? ? ? ? ? 1. 概念不同：偽類：用于已有元素出于某種狀態(tài)時(shí)為其添加相對(duì)應(yīng)地樣式砰左，這個(gè)狀態(tài)是根據(jù)用戶的行為而動(dòng)態(tài)變化的，例如：鼠標(biāo)懸停（:hover）场航；偽元素：用于創(chuàng)建一些不在DOM樹中的元素缠导，并未其添加樣式，例如：先向前后插入元素內(nèi)容等
? ? ? ? ? ? 2. 使用方法不同：css3規(guī)范中要求使用雙冒號(hào)（::）表示偽元素溉痢，以此來區(qū)分偽類和偽元素僻造，比如：::before，::after等偽元素使用雙冒號(hào)孩饼，:hover,:active偽類使用單冒號(hào)
5.CSS如何實(shí)現(xiàn)垂直居中髓削？
答：1. 通過vertical-align:middle實(shí)現(xiàn)CSS垂直居中； 2. 通過display:flex實(shí)現(xiàn)CSS垂直居中镀娶； 3. 通過偽元素:before實(shí)現(xiàn)CSS垂直居中立膛；4. 通過display:table-cell實(shí)現(xiàn)CSS垂直居中；5. 通風(fēng)過隱藏節(jié)點(diǎn)實(shí)現(xiàn)垂直居中梯码；6. 已知父層元素高度通過transform來實(shí)現(xiàn)宝泵；7. 到垂直居中的位置；8. 通過line-height來實(shí)現(xiàn)忍些；
6.? CSS選擇器有哪些鲁猩？
答：1.元素選擇器；2.id選擇器罢坝； 3.類選擇器廓握； 4. 分組選擇器（并集選擇器）搅窿；5.符合選擇器（交集選擇器）；6. 通配選擇器隙券； 7. 后代選擇器男应；8.子元素選擇器；9.偽類選擇器娱仔；10.屬性選擇器沐飘；11.兄弟元素選擇器。
7.CSS的優(yōu)先級(jí)如何計(jì)算牲迫？
答：CSS的優(yōu)先級(jí)是根據(jù)樣式生命的特殊性值來判斷的
? ? 選擇器的特殊性值分為4個(gè)等級(jí)耐朴，如下：
? ? ? ? 1） 標(biāo)簽內(nèi)選擇符想x，0盹憎，0筛峭，0
? ? ? ? 2） ID選擇符0，x陪每，0影晓，0
? ? ? ? 3） class選擇符/屬性選擇符/偽類選擇符0，0檩禾，x挂签，0
? ? ? ? 4）元素和偽元素選擇符0，0盼产，0饵婆，x
? ? 計(jì)算方法：
? ? ? ? 1）每個(gè)等級(jí)初始值為0
? ? ? ? 2）每個(gè)等級(jí)的疊加為選擇器出現(xiàn)的次數(shù)相加
? ? ? ? 3）不可進(jìn)位，比如：0辆飘，999啦辐，999，99
? ? ? ? 4）以此表示為：0蜈项，0，0续挟，0
? ? ? ? 5）每個(gè)等級(jí)計(jì)數(shù)之間沒有關(guān)聯(lián)
? ? ? ? 6）等級(jí)判斷從左到右紧卒，如果某一位值相同，則判斷下一位數(shù)值
? ? ? ? 7）如果兩個(gè)優(yōu)先級(jí)相同诗祸，則后出現(xiàn)的優(yōu)先級(jí)高跑芳，！important 也適用
? ? ? ? 8）通配符選擇器的特殊性值為：0直颅，0博个，0，0
? ? ? ? 9） 繼承樣式優(yōu)先級(jí)最低功偿，通配符樣式高于繼承樣式
? ? ? ? 10）!important（權(quán)重）盆佣，他沒有特殊性值，但他的優(yōu)先級(jí)最高，為了方便記憶可以認(rèn)為他的特殊性值為1共耍，0虑灰，0，0痹兜，0
8. 長(zhǎng)度單位px穆咐，em，和 rem 的區(qū)別是什么字旭？
答：1) px是固定像素对湃，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面大小而改變
? ? ? ? 2）em和rem相對(duì)于px更具靈活性，他們是相對(duì)長(zhǎng)度單位遗淳，更適用于響應(yīng)式布局拍柒。
? ? ? ? 3）em是相對(duì)父元素來設(shè)置大小，一般以<body>的“font-size”為準(zhǔn)洲脂。這樣會(huì)存在一個(gè)問題斤儿，進(jìn)行任何元素設(shè)置都有可能需要知道他的父元素的大小。但是rem是相對(duì)于根元素<html>恐锦，就是說我們只需要在跟元素確定一個(gè)參考值
? ? ? ? 4) 像素（px）：用于元素的邊框或定位
? ? ? ? 5）em/rem：用于做響應(yīng)式頁面往果，最好使用rem，因?yàn)閑m不同元素的參照物不一樣（都是該元素的父元素）一铅，所以在計(jì)算的時(shí)候不方便陕贮，相比之下rem就只有一個(gè)參照物（html元素）
9.講一下Flex彈性盒布局？
答：原理：通過給父盒子添加 display：flex 屬性潘飘，來控制盒子的位置和排? 列方式
? ? ? ? 特點(diǎn)：1）flex布局相對(duì)于傳統(tǒng)布局（浮動(dòng)肮之，定位）更簡(jiǎn)便，但兼容性更差
? ? ? ? ? ? ? ? ? ? 2）父元素設(shè)為flex布局后卜录，子元素的float戈擒，clear，vertical-align屬性失效
? ? ? ? ? ? ? ? ? ? 3）應(yīng)用于任何元素：塊元素艰毒，行元素筐高，行內(nèi)塊元素
? ? ? ? ? ? ? ? ? ? 4）display：聲明flex屬性值 flex ，對(duì)應(yīng)塊元素丑瞧，即容器轉(zhuǎn)化為塊元素 inline-flex柑土， 對(duì)應(yīng)行行內(nèi)元素，即容器轉(zhuǎn)化為行內(nèi)元素
? ? ? ? ? ? ? ? ? ? 5）子項(xiàng)目中行元素可直接設(shè)置寬高绊汹，塊級(jí)元素寬度不繼承稽屏，行內(nèi)塊元素沒有間隔
? ? ? ? ? ? ? ? ? ? 6）沒有外邊距合并問題
? ? ? ? ? ? ? ? ? ? 7）能讓頁面寬度自適應(yīng)，高度與字體大小自適應(yīng)需要配合rem+媒體查詢
10.浮動(dòng)坍塌問題的解決方案是什么西乖？
答：浮動(dòng)元素的特點(diǎn)：1）浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)文件流狐榔，已經(jīng)不區(qū)分塊行了; 2）浮動(dòng)的元素會(huì)胡想貼靠坛增；3）浮動(dòng)的元素有“字圍”的效果；4）收縮
? ? ? ? 坍塌解決方案：1）給浮動(dòng)的元素的上級(jí)添加高度荒叼；2）clear：both轿偎；3）隔墻法：中間加空盒子；4）隔墻法進(jìn)化版-內(nèi)墻法：空也盒子加在浮動(dòng)元素內(nèi)被廓；5）overflow：hidden坏晦；6）偽元素
11.position的屬性值有哪些，各個(gè)值是什么含義嫁乘？
答：1）static：默認(rèn)位置昆婿，（static 元素會(huì)忽略任何top，bottom蜓斧，left或right聲明）一般不常用仓蛆；2）relative：位置被設(shè)置為relative的元素，偏移的top挎春，right看疙，bottom，left的值都以他原來的位置為基準(zhǔn)偏移直奋，注意relative移動(dòng)后的元素在原來的位置仍占據(jù)空間能庆；3）absolute：位置設(shè)置absolute的元素，可定位于相對(duì)包含的它的元素的置頂坐標(biāo)脚线；4）fixed：位置被設(shè)置fixed的元素搁胆，可定位相對(duì)于窗口的指定坐標(biāo)
12.BFC，IFC是什么邮绿？
答：BFC（block formatting contexts）塊級(jí)格式化上下文
? ? ? ? a）縱向一個(gè)挨著一個(gè)排列
? ? ? ? b）兩個(gè)盒子的縱向間距由margin來決定渠旁，兩個(gè)相鄰的盒子在垂直方向上的margin會(huì)有種“重疊合并”的效果，此時(shí)縱向間距距離取較大的margin值
? ? IFC（inline formatting contexts）行內(nèi)格式上下文
