em、rem嗡靡、vm跺撼、vw分別如何計算尺寸的？
em：相對長度單位讨彼，通常是所繼承字體大小的倍數(shù)歉井，如果未設(shè)置字體大小，則為瀏覽器默認(rèn)字體大小的倍數(shù)哈误。
rem：相對長度單位哩至，根元素(html節(jié)點(diǎn))字體大小的倍數(shù)，不設(shè)置時為瀏覽器默認(rèn)字體大小倍數(shù)黑滴。
vm：相對于視口的寬度或高度中較小的那個憨募。
vw：窗口寬度的百分比，1vw默認(rèn)為視窗寬度的1%袁辈。類似的有vh,窗口高度的百分比菜谣。
顏色有幾種寫法？透明色如何表示？透明效果如何實(shí)現(xiàn)尾膊？currentColor如何來用媳危？
- 顏色關(guān)鍵字：
color: blue; - 十六進(jìn)制值：
color: #ffffff - RGB：
color: rgb(224,176,77);（三個字母分別表示色相、飽和度冈敛、亮度待笑，基于rgb值得來） - HSL：
color: hsl(276,100%,85%); - RGBA&HSLA：A是阿爾法通道，代表顏色的透明度
- 透明色可以設(shè)置阿爾法值為0或者使用transparent關(guān)鍵字（透明色只能設(shè)置背景色為透明抓谴，元素本身不是透明的暮蹂，透明色和元素透明度是不同的）
- currentColor關(guān)鍵字：如果你想設(shè)置當(dāng)前元素顏色和所繼承的父元素顏色一樣時，使用currentColor癌压。
- Opacity屬性：設(shè)置整個元素為透明
CSS 中calc是什么仰泻？
通常用于計算，例如實(shí)現(xiàn)一個footer 固定底部的效果：
注：cslc(100% - 90px)中空格不能省
為什么不能輕易的使用height: 100%;
如果元素要使用height: 100%滩届，其父元素必須顯示去指明一個高度集侯，若父容器的height也為100%，那么其父父容器必須指明高度帜消，否則元素高度不會被撐開棠枉。
CSS樣式的來源
- 使用不同選擇器設(shè)置的樣式
- 瀏覽器默認(rèn)樣式（user agent stylesheet）
- 繼承的樣式（inherited form xxx）
權(quán)重：用戶設(shè)置樣式 > 瀏覽器默認(rèn)樣式 > 繼承的樣式
什么是CSS繼承？哪些屬性能繼承泡挺，哪些不能辈讶？
通過 CSS 繼承，子元素將繼承最高級元素所擁有的屬性如設(shè)置body{font-family:Verdana;}粘衬，不需要另外的規(guī)則荞估，所有 body 的子元素都應(yīng)該顯示 Verdana 字體，子元素的子元素也一樣稚新。而比如p不想繼承高級元素body的字體屬性勘伺，只需要針對自身的特殊規(guī)則，如p{font-family:Times}褂删，即可擺脫父元素的規(guī)則,這就是CSS繼承飞醉。
繼承屬性：color、font-size屯阀、font-family缅帘、font-style、letter-spacing难衰、white-spacing钦无、text-decoration、text-align盖袭、text-indent等失暂。
非繼承屬性：display彼宠、height、width弟塞、padding凭峡、border、margin决记、min-width摧冀、max-width、min-height系宫、max-height索昂、background、overflow笙瑟、position楼镐、float、clear往枷、top、right凄杯、bottom错洁、left、vertical-align等戒突。
注：inherit關(guān)鍵字可用于繼承性/非繼承性屬性屯碴。
CSS的權(quán)重如何計算
- 最高權(quán)重為添加
!important - Specificity 特異性
| 分?jǐn)?shù) | 條件 |
|---|---|
| 1000 | +1/在style屬性內(nèi)或在<style>標(biāo)簽內(nèi) |
| 100 | +1/每個出現(xiàn)的ID選擇器 |
| 10 | +1/每個出現(xiàn)的類，偽類或?qū)傩赃x擇器 |
| 1 | +1/每個元素選擇器或偽元素 |
注：通用選擇器(*), 組合選擇器 (+, >, ~, ' ') 和 (:not) 對特異性沒有影響膊存。
如果特異性形同或都是!important导而，那后聲明的規(guī)則會被應(yīng)用。
我們來看個例子：如下代碼中大家好3個字的樣式是隔崎，原因今艺？
結(jié)果：粉色，14px
權(quán)值計算：
1爵卒、#msg：0,1,0,0=100;
2虚缎、#content p: 0,1,0,0+0,0,0,1=101;
3、.container .box p: (0,0,1,0)*2+0,0,0,1=21;
4钓株、p#msg: 0,0,0,1+0,1,0,0=101;
2和4權(quán)值相同实牡，即取得{color: blue; font-size: 14px;}和{color: pink; }這兩個屬性，未沖突的樣式都會生效轴合，沖突的樣式采取后來居上原則创坞。
所以上例最終結(jié)果為{color:pink;font-size:14px;}
盒模型有哪些屬性？
內(nèi)容區(qū)：
width,height,min-width,max-width,min-height,max-height邊框：
border,border-top,border-right,border-bottom,border-left內(nèi)邊距：
padding,padding-top,padding-right,padding-bottom,padding-left外邊距：
margin,margin-top,margin-right,margin-bottom,margin-left
下圖中問題如何解決受葛？
可見代碼中并沒有給任何元素設(shè)置外邊距margin题涨，所以圖中縫隙都為瀏覽器默認(rèn)外邊距（問題二中的縫隙涉及到外邊距合并）偎谁。
解決：在<style>標(biāo)簽中使用* {margin: 0;} 清除瀏覽器默認(rèn)外邊距。
合并外邊距
- 父子關(guān)系合并：
圖中<main>和<h1>是父子關(guān)系携栋，<main>如果沒有border沒有padding就會產(chǎn)生外邊距合并搭盾。可以理解為如果沒有一條線攔在<main>和<h1>中間那么這兩個元素就會發(fā)生外邊距合并婉支，如何解決：
方案一
方案二 -
相鄰元素的合并
相鄰元素外邊距合并鸯隅，外邊距最終取兩者margin的最大值。
相鄰元素外邊距合并 -
元素自身外邊距合并
當(dāng)元素本身沒有內(nèi)容向挖，padding蝌以，border，height時何之，自身的上下外邊距產(chǎn)生合并跟畅。
元素自身外邊距合并
什么是標(biāo)簽的默認(rèn)樣式？列舉幾個帶默認(rèn)樣式的標(biāo)簽溶推，并寫出默認(rèn)樣式的屬性-值
為了沒有樣式表也能正常顯示徊件，瀏覽器都有自己的一套默認(rèn)樣式，不同的瀏覽器和不同版本的瀏覽器的默認(rèn)樣式都不相同蒜危。
部分帶默認(rèn)樣式的標(biāo)簽：
a{color:-webkit-link;text-decoration:underline;}- h1-h6：
font-size依次為2em,1.5em,1.17em,1.12em,0.83em,0.75em虱痕，且默認(rèn)font-weight為bolder。 - p與h4默認(rèn)字號相同辐赞。
-
:link,:visited,:focus{text-decoration:underline;} body{ margin: 8px; }html, body, div,form,h1, h2, h3, h4, h5, h6, ol, p, ul { display: block; unicode-bidi: embed ;}li{ display: list-item; }
box-sizing: border-box部翘； 是什么意思？
box-sizing 用于更改用于計算元素寬度和高度的默認(rèn)的 CSS 盒模型响委。
box-sizing: border-box新思；使元素的寬度等于元素的內(nèi)容區(qū)寬度加左右內(nèi)邊距寬度和左右邊框的寬度，元素的高度等于內(nèi)容區(qū)高度加上下內(nèi)邊距寬度和上下邊框的寬度赘风。
維度計算：
width = 左右border + 左右padding + content width
height = 上下border + 上下padding + content height
inline-block有什么作用夹囚？inline-block的縫隙是怎么回事？如何解決
inline-block表現(xiàn)為行內(nèi)元素但是擁有塊元素設(shè)置寬高的特性,又保留了行內(nèi)元素不換行的特點(diǎn)贝次。
有縫隙的原因：inline-block水平呈現(xiàn)的元素間崔兴，標(biāo)簽之間會有換行，Tab或字符之間的空格蛔翅，最后導(dǎo)致呈現(xiàn)的元素之間產(chǎn)生了縫隙敲茄。
解決方案：
- 給父元素設(shè)置 font-size: 0，在 inline-block 元素上重新設(shè)置 font-size山析。
- 設(shè)置margin值為負(fù)
- 設(shè)置inline-block元素letter-space值為0堰燎，其父元素letter-space值為負(fù)值
- 去掉HTML中標(biāo)簽段之間的空格或用注釋代替空格
通用解決辦法：不要設(shè)置 inline-block，使用 float 或 flex笋轨。
用垂直方向的PADDING來實(shí)現(xiàn)等比縮放的盒子
固定圖片百分比是一個針對響應(yīng)式布局很有效的方案秆剪，尤其是在移動端赊淑，可以說是一個剛性需求。簡單來說仅讽，就是根據(jù)容器的寬度陶缺，按照寬高比例自動計算出容器的大小，并且讓容器內(nèi)的如img等子元素自適應(yīng)寬高洁灵。
解決方案
圖片父容器寬度100%饱岸，父容器的高度百分比為：100*3 / 4 = 75% ; 圖片absolute并且完全鋪滿父容器。
