# 什么是盒子模型勾扭？

在網(wǎng)頁中，一個(gè)元素占有空間的大小由元內(nèi)容（content）铁瞒，內(nèi)邊距（padding）妙色，邊框（border），外邊距（margin）四個(gè)部分慧耍。有的部分可以顯示相應(yīng)的內(nèi)容身辨，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域。4個(gè)部分一起構(gòu)成了css中元素的盒模型芍碧。
共有兩種盒子模型:
W3C標(biāo)準(zhǔn)盒模型: 屬性width,height包含content,不包含border和padding
IE盒模型: 屬性width,height包含content,border,padding

# box-sizing屬性煌珊？

用來控制元素的盒子模型的解析模式，默認(rèn)為content-box
context-box：設(shè)置元素的 height/width 屬性指的是content部分的高/寬
border-box：設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬

# 什么是css Hack?

就是針對(duì)不同的瀏覽器寫不同css樣式泌豆。css hack一般來說是為了兼容IE瀏覽器的定庵。
IE瀏覽器Hack一般又分為三種: 條件Hack、屬性Hack踪危、選擇器Hack洗贰。

# 為什么要初始化CSS樣式？

因?yàn)闉g覽器的兼容問題陨倡，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的敛滋，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。

# CSS選擇器有哪些兴革？哪些屬性可以繼承绎晃？

id選擇器(#myid)、類選擇器(.myclassname)杂曲、標(biāo)簽選擇器(div, h1, p)庶艾、相鄰選擇器(h1 + p)、子選擇器（ul > li）擎勘、后代選擇器（li a）咱揍、通配符選擇器（*）、屬性選擇器（a[rel="external"]）棚饵、偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height

優(yōu)先級(jí)（就近原則）：!important > id > class > tag ( !important 比內(nèi)聯(lián)優(yōu)先級(jí)高 )

元素選擇符： 1
class選擇符： 10
id選擇符：100
內(nèi)聯(lián)樣式：1000

!important聲明的樣式優(yōu)先級(jí)最高煤裙，如果沖突再進(jìn)行計(jì)算掩完。
如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式硼砰。
繼承得到的樣式的優(yōu)先級(jí)最低且蓬。

# CSS3新增偽類有那些?

p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中题翰。

# 偽類選擇器和偽元素的區(qū)別

偽類用于向某些選擇器添加特殊效果 (單冒號(hào))
偽元素用于將某個(gè)特殊的東西添加到某些元素的前后 (雙冒號(hào))

# display有哪些值恶阴？說明他們的作用?

bloc 塊類型。默認(rèn)寬度為父元素寬度豹障，可設(shè)置寬高冯事，換行顯示
none 元素不顯示，并從文檔流中移除
inline 行內(nèi)元素血公，默認(rèn)寬度為內(nèi)容寬度昵仅，不可設(shè)置寬高，同行顯示
inline-block 默認(rèn)寬度為內(nèi)容寬度坞笙，可以設(shè)置寬高岩饼，同行顯示
list-item 像塊類型元素一樣荚虚，可以設(shè)置寬高薛夜，同行顯示
table 此元素會(huì)作為會(huì)計(jì)表格來顯示
inherit 規(guī)定應(yīng)該從父元素繼承display屬性的值

# position的值？

static（默認(rèn)）：按照正常文檔流進(jìn)行排列版述；
relative（相對(duì)定位）：不脫離文檔流梯澜，參考自身靜態(tài)位置通過 top, bottom, left, right 定位；
absolute (絕對(duì)定位)：參考距其最近一個(gè)不為static的父級(jí)元素通過top, bottom, left, right 定位渴析；
fixed (固定定位)：所固定的參照對(duì)像是可視窗口晚伙。

# CSS里的 visibility 屬性有個(gè) collapse 屬性值？在不同瀏覽器下以后什么區(qū)別俭茧？

當(dāng)一個(gè)元素的 visibility 屬性被設(shè)置成 collapse 值后咆疗，對(duì)于一般的元素，它的表現(xiàn)跟 hidden 是一樣的母债。
chrome 中午磁，使用 collapse 值和使用 hidden 沒有區(qū)別。
firefox毡们，opera和IE迅皇，使用collapse值和使用display：none沒有什么區(qū)別。

# display:none 與 visibility：hidden的區(qū)別衙熔？

display：none 不顯示對(duì)應(yīng)的元素登颓，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對(duì)應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

# img红氯、inline-block 的 3 像素問題如何解決框咙？

1. 父標(biāo)簽增加font-size:0
2. 標(biāo)簽增加display:block
3. 標(biāo)簽增加vertical-align: middle
4. 標(biāo)簽增加float:left

# flex布局中 flex 的默認(rèn)值是多少

2009年咕痛，W3C提出了一種新的方案：Flex布局，可以簡(jiǎn)便扁耐、完整暇检、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。
Flex是Flexible Box的縮寫婉称，意為彈性布局块仆，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局王暗。

.box{
  display: flex;
}

行內(nèi)元素也可以使用Flex布局

box{
  display: inline-flex;
}

采用Flex布局的元素悔据，稱為Flex容器（flex container），簡(jiǎn)稱容器俗壹。
所有子元素自動(dòng)成為容器成員科汗，稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱項(xiàng)目绷雏。

設(shè)置在容器上的屬性有：

1. flex-direction: row | row-reverse | column | column-reverse;
   決定主軸的方向头滔，即項(xiàng)目的排列方向
2. flex-wrap: nowrap | wrap | wrap-reverse;
   如果一條軸線排不下，如何換行
3. flex-flow: <flex-direction> <flex-wrap>;
   flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式涎显，默認(rèn)值為row nowrap
4. justify-content: flex-start | flex-end | center | space-between | space-around;
   定義了項(xiàng)目在主軸上的對(duì)齊方式
5. align-items: flex-start | flex-end | center | baseline | stretch;
   定義項(xiàng)目在交叉軸上如何對(duì)齊
6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   定義了多根軸線的對(duì)齊方式坤检。如果項(xiàng)目只有一根軸線，該屬性不起作用

設(shè)置在項(xiàng)目上的屬性有：

1. order: <integer> /* default 0 */
   定義項(xiàng)目的排列順序期吓，數(shù)值越小早歇，排列越靠前
2. flex-grow: <number>; /* default 0 */
   定義項(xiàng)目的放大比例， 即如果存在剩余空間讨勤，也不放大
3. flex-shrink: <number>; /* default 1*/
   flex-shrink屬性定義了項(xiàng)目的縮小比例箭跳，默認(rèn)為1即如空間不足時(shí)項(xiàng)目縮小
4. flex-basis: <length> | auto; /* default auto*/
   flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）
   默認(rèn)為auto即項(xiàng)目的本來大小
5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫潭千，默認(rèn)值為0 1 auto谱姓。后兩個(gè)屬性可選
6. align-self: auto | flex-start | flex-end | center | baseline | stretch;
   允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性刨晴。
   默認(rèn)值為auto屉来，表示繼承父元素的align-items屬性，如果沒有父元素割捅，則等同于stretch

.CSS優(yōu)化奶躯、提高性能的方法有哪些？

1. 避免過度約束
2. 避免后代選擇符
3. 避免鏈?zhǔn)竭x擇符
4. 使用緊湊的語法
5. 避免不必要的命名空間
6. 避免不必要的重復(fù)
7. 最好使用表示語義的名字亿驾。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么
8. 避免嘹黔！important，可以選擇其他選擇器
9. 盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類里的重復(fù)規(guī)則

.你對(duì)line-height是如何理解的儡蔓？

行高是指一行文字的高度郭蕉，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height喂江，沒有定義height屬性召锈，最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中获询，其實(shí)也可以把height刪除涨岁。
多行文本垂直居中：需要設(shè)置display屬性為inline-block。

.說一說BFC

塊格式化上下文（Block Formatting Context吉嚣，BFC）
用于對(duì)塊級(jí)元素排版梢薪，默認(rèn)情況下只有根元素（body）一個(gè)塊級(jí)上下文。是Web頁面的可視CSS渲染的一部分尝哆，是塊盒子的布局過程發(fā)生的區(qū)域秉撇，也是浮動(dòng)元素與其他元素交互的區(qū)域。

觸發(fā)條件,滿足其一即可

1. body元素
2. float的值不為none秋泄；
3. overflow的值不為visible琐馆；
4. position的值為fixed / absolute；
5. display的值為table-cell / table-caption / inline-block / flex / inline-flex恒序。

BFC作用

1. 可以包含浮動(dòng)元素——清除內(nèi)部浮動(dòng)
   當(dāng)給元素設(shè)置overflow: hidden時(shí)瘦麸，實(shí)際上創(chuàng)建了一個(gè)超級(jí)屬性BFC，此超級(jí)屬性反過來決定了height:auto是如何計(jì)算的奸焙。在“BFC布局規(guī)則”中提到：計(jì)算BFC的高度時(shí)瞎暑，浮動(dòng)元素也參與計(jì)算彤敛。因此与帆，父元素在計(jì)算其高度時(shí)，加入了浮動(dòng)元素的高度墨榄，達(dá)成了清除浮動(dòng)的目標(biāo)玄糟，所以父元素就包裹住了子元素。
2. 分屬于不同的BFC時(shí)可以阻止margin重疊
   兄弟袄秩、父子元素等之間之所以會(huì)發(fā)生margin合并阵翎，是因?yàn)樗鼈儗儆谕粋€(gè)BFC。
   所以只要讓它們不屬于同一個(gè)BFC就可以了之剧，即加上overflow: hidden郭卫。

BFC布局規(guī)則

1. 內(nèi)部的塊級(jí)元素會(huì)在垂直方向，一個(gè)接一個(gè)地放置背稼；
2. 塊級(jí)元素垂直方向的距離由margin決定贰军。
   屬于同一個(gè)BFC的兩個(gè)相鄰的塊級(jí)元素會(huì)發(fā)生margin合并，不屬于同一個(gè)BFC的兩個(gè)相鄰的塊級(jí)元素不會(huì)發(fā)生margin合并蟹肘；
3. 每個(gè)元素的margin box的左邊词疼，與包含border box的左邊相接觸（對(duì)于從左往右的格式化俯树，否則相反）。即使存在浮動(dòng)也是如此贰盗；
4. BFC的區(qū)域不會(huì)與float box重疊许饿；
5. BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素舵盈；外面的元素也不會(huì)影響到容器里面的子元素陋率；
6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算秽晚。

.說說回流和重繪

回流: 當(dāng)Render Tree中部分或全部元素的尺寸翘贮、結(jié)構(gòu)、或某些屬性發(fā)生改變時(shí)爆惧，瀏覽器重新渲染部分或全部文檔的過程
如何引發(fā)回流? 頁面首次渲染狸页，瀏覽器窗口改變大小，元素尺寸或位置發(fā)生改變扯再，元素內(nèi)容變化（文字?jǐn)?shù)量或圖片大小等等）芍耘，元素字體大小變化，DOM操作熄阻，激活CSS偽類（例如：:hover）
查詢某些屬性或調(diào)用某些方法
scrollTo()斋竞，getComputedStyle()，scrollIntoView()秃殉、scrollIntoViewIfNeeded()坝初，getBoundingClientRect()

重繪: 當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時(shí)（例如：color、background-color钾军、visibility等）鳄袍，瀏覽器會(huì)將新樣式賦予給元素并重新繪制它的過程。

瀏覽器使用流式布局模型吏恭。瀏覽器會(huì)把HTML解析成DOM拗小，把CSS解析成CSSOM，DOM和CSSOM合并就產(chǎn)生了Render Tree樱哼。有了RenderTree哀九，我們就知道了所有節(jié)點(diǎn)的樣式，然后計(jì)算他們?cè)陧撁嫔系拇笮『臀恢媒练詈蟀压?jié)點(diǎn)繪制到頁面上阅束。由于瀏覽器使用流式布局，對(duì)Render Tree的計(jì)算通常只需要遍歷一次就可以完成茄唐，但table及其內(nèi)部元素除外息裸，他們可能需要多次計(jì)算，通常要花3倍于同等元素的時(shí)間，這也是為什么要避免使用table布局的原因之一界牡〔炯牛回流必將引起重繪，重繪不一定會(huì)引起回流

如何避免

1.避免使用table布局宿亡。
2.盡可能在DOM樹的最末端改變class
3.避免設(shè)置多層內(nèi)聯(lián)樣式
4.將動(dòng)畫效果應(yīng)用到position屬性為absolute或fixed的元素上常遂。
5.避免使用CSS表達(dá)式（例如：calc()）
6.避免頻繁操作樣式，最好一次性重寫style屬性挽荠，或?qū)邮搅斜矶x為class并一次性更改class屬性
7.避免頻繁操作DOM克胳，創(chuàng)建一個(gè)documentFragment，在它上面應(yīng)用所有DOM操作圈匆，最后再把它添加到文檔中
8.先為元素設(shè)置display: none漠另，操作結(jié)束后再把它顯示出來。因?yàn)樵赿isplay屬性為none的元素上進(jìn)行的DOM操作不會(huì)引發(fā)回流和重繪
9.避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性跃赚，如確實(shí)需要多次使用笆搓，就用一個(gè)變量緩存起來
10.對(duì)具有復(fù)雜動(dòng)畫的元素使用絕對(duì)定位，使它脫離文檔流纬傲，否則會(huì)引起父元素及后續(xù)元素頻繁回流

.link 和 @import的區(qū)別

1. link是XHTML標(biāo)簽满败，除了加載CSS外，還可以定義RSS等其他事務(wù)叹括；@import屬于CSS范疇算墨，只能加載CSS。
2. link引用CSS時(shí)汁雷，在頁面載入時(shí)同時(shí)加載净嘀；@import需要頁面網(wǎng)頁完全載入以后加載。
3. link是XHTML標(biāo)簽侠讯，無兼容問題挖藏；@import是在CSS2.1提出的，低版本的瀏覽器不支持继低。
4. link支持使用Javascript控制DOM去改變樣式熬苍；而@import不支持稍走。

.CSS單位都有哪些

1. %：
   (1). margin袁翁，padding 是相對(duì)父元素的 寬度 計(jì)算的
   (2). top，left婿脸，bottom粱胜，right 是相對(duì)于父元素的 高度 計(jì)算的
   (3). translate 是相對(duì)自身元素來算的

2. px：像素
   (1). em：1em 等于當(dāng)前父元素的 font-size (瀏覽器默認(rèn)16px，可繼承狐树，em 可以省略)
   (2). rem：1rem 等于 html 根元素的 font-size
   (3). vw焙压，vh：視口寬度被均分成 100vw，視口高度被均分成 100vh。視口寬高是頁面的可視區(qū)域涯曲，如鍵盤彈起安卓的視口寬高發(fā)生變化野哭，但 iPhone 不會(huì)。（安卓4.4幻件，iOS6以上支持）

3. vmax, vmin：
   1.vmax = max(vw,vh)（vmax安卓4.4拨黔，iOS8以上支持）
   2.vmin = min(vw,vh)（vmin安卓4.4，iOS6以上支持）

4. ex和ch：
   1.ex以字符"x"的高度為基準(zhǔn)绰沥；例如1ex表示和字符"x"一樣長(zhǎng)篱蝇。
   2.ch以數(shù)字"0"的寬度為基準(zhǔn)；例如2ch表示和2個(gè)數(shù)字"0"一樣長(zhǎng)

.讓頁面里的字體變清晰徽曲，變細(xì)用CSS怎么做零截？

-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的秃臣，灰度平滑涧衙。

.li 與 li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法奥此？

行框的排列會(huì)受到中間空白（回車空格）等的影響绍撞，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間得院，所以會(huì)有間隔傻铣，把字符大小設(shè)為0，就沒有空格了祥绞。

解決方法：

1. 可以將<li>代碼全部寫在一排
2. 浮動(dòng)li中float：left
3. 在ul中用font-size：0（谷歌不支持）非洲；可以使用letter-space：-3px

# CSS 寫在 body前 和 body后 有什么區(qū)別

1. 如果沒有遇到j(luò)S阻塞，放哪里都一樣蜕径，
2. 如果遇到j(luò)s阻塞两踏，把CSS寫在BODY上面，不會(huì)出現(xiàn)二次渲染兜喻，把CSS寫在BODY下面梦染，JS阻塞時(shí)，會(huì)出現(xiàn)一次渲染朴皆，等阻塞完畢會(huì)出現(xiàn)二次渲染（除非外鏈的CSS下載時(shí)間比阻塞時(shí)間長(zhǎng)）帕识。

.如何選擇圖片格式，例如 png, webp

圖片格式 壓縮方式 透明度 動(dòng)畫 瀏覽器兼容 適應(yīng)場(chǎng)景
JPEG 有損壓縮 不支持 不支持 所有 復(fù)雜顏色及形狀遂铡、 尤其是照片
GIF 無損壓縮 支持 支持 所有 簡(jiǎn)單顏色肮疗， 動(dòng)畫
PNG 無損壓縮 支持 不支持 所有 需要透明時(shí)
APNG 無損壓縮 支持 支持 FirefoxSafariiOS Safari 需要半透明效果的動(dòng)畫
WebP 有損壓縮 支持 支持 ChromeOperaAndroid ChromeAndroid Browser 復(fù)雜顏色及形狀瀏覽器平臺(tái)可預(yù)知
SVG 無損壓縮 支持 支持 所有（IE8以上） 簡(jiǎn)單圖形，需要良好的放縮體驗(yàn)需要?jiǎng)討B(tài)控制圖片特效