em、rem、vm、vw分別如何計算尺寸的？
em：相對長度單位，通常是所繼承字體大小的倍數，如果未設置字體大小，則為瀏覽器默認字體大小的倍數。
rem：相對長度單位，根元素(html節(jié)點)字體大小的倍數，不設置時為瀏覽器默認字體大小倍數。
vm：相對于視口的寬度或高度中較小的那個。
vw：窗口寬度的百分比，1vw默認為視窗寬度的1%。類似的有vh,窗口高度的百分比。
顏色有幾種寫法？透明色如何表示？透明效果如何實現？currentColor如何來用？
- 顏色關鍵字：
color: blue; - 十六進制值：
color: #ffffff - RGB：
color: rgb(224,176,77);（三個字母分別表示色相、飽和度、亮度，基于rgb值得來） - HSL：
color: hsl(276,100%,85%); - RGBA&HSLA：A是阿爾法通道，代表顏色的透明度
- 透明色可以設置阿爾法值為0或者使用transparent關鍵字（透明色只能設置背景色為透明，元素本身不是透明的，透明色和元素透明度是不同的）
- currentColor關鍵字：如果你想設置當前元素顏色和所繼承的父元素顏色一樣時，使用currentColor。
- Opacity屬性：設置整個元素為透明
CSS 中calc是什么？
通常用于計算，例如實現一個footer 固定底部的效果：
注：cslc(100% - 90px)中空格不能省
為什么不能輕易的使用height: 100%;
如果元素要使用height: 100%，其父元素必須顯示去指明一個高度，若父容器的height也為100%，那么其父父容器必須指明高度，否則元素高度不會被撐開。
CSS樣式的來源
- 使用不同選擇器設置的樣式
- 瀏覽器默認樣式（user agent stylesheet）
- 繼承的樣式（inherited form xxx）
權重：用戶設置樣式 > 瀏覽器默認樣式 > 繼承的樣式
什么是CSS繼承？哪些屬性能繼承，哪些不能？
通過 CSS 繼承，子元素將繼承最高級元素所擁有的屬性如設置body{font-family:Verdana;}，不需要另外的規(guī)則，所有 body 的子元素都應該顯示 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關鍵字可用于繼承性/非繼承性屬性。
CSS的權重如何計算
- 最高權重為添加
!important - Specificity 特異性
| 分數 | 條件 |
|---|---|
| 1000 | +1/在style屬性內或在<style>標簽內 |
| 100 | +1/每個出現的ID選擇器 |
| 10 | +1/每個出現的類，偽類或屬性選擇器 |
| 1 | +1/每個元素選擇器或偽元素 |
注：通用選擇器(*), 組合選擇器 (+, >, ~, ' ') 和 (:not) 對特異性沒有影響。
如果特異性形同或都是!important，那后聲明的規(guī)則會被應用。
我們來看個例子：如下代碼中大家好3個字的樣式是，原因？
結果：粉色，14px
權值計算：
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權值相同，即取得{color: blue; font-size: 14px;}和{color: pink; }這兩個屬性，未沖突的樣式都會生效，沖突的樣式采取后來居上原則。
所以上例最終結果為{color:pink;font-size:14px;}
盒模型有哪些屬性？
內容區(qū)：
width,height,min-width,max-width,min-height,max-height邊框：
border,border-top,border-right,border-bottom,border-left內邊距：
padding,padding-top,padding-right,padding-bottom,padding-left外邊距：
margin,margin-top,margin-right,margin-bottom,margin-left
下圖中問題如何解決？
可見代碼中并沒有給任何元素設置外邊距margin，所以圖中縫隙都為瀏覽器默認外邊距（問題二中的縫隙涉及到外邊距合并）。
解決：在<style>標簽中使用* {margin: 0;} 清除瀏覽器默認外邊距。
合并外邊距
- 父子關系合并：
圖中<main>和<h1>是父子關系，<main>如果沒有border沒有padding就會產生外邊距合并?？梢岳斫鉃槿绻麤]有一條線攔在<main>和<h1>中間那么這兩個元素就會發(fā)生外邊距合并，如何解決：
方案一
方案二 -
相鄰元素的合并
相鄰元素外邊距合并，外邊距最終取兩者margin的最大值。
相鄰元素外邊距合并 -
元素自身外邊距合并
當元素本身沒有內容，padding，border，height時，自身的上下外邊距產生合并。
元素自身外邊距合并
什么是標簽的默認樣式？列舉幾個帶默認樣式的標簽，并寫出默認樣式的屬性-值
為了沒有樣式表也能正常顯示，瀏覽器都有自己的一套默認樣式，不同的瀏覽器和不同版本的瀏覽器的默認樣式都不相同。
部分帶默認樣式的標簽：
a{color:-webkit-link;text-decoration:underline;}- h1-h6：
font-size依次為2em,1.5em,1.17em,1.12em,0.83em,0.75em，且默認font-weight為bolder。 - p與h4默認字號相同。
-
: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 用于更改用于計算元素寬度和高度的默認的 CSS 盒模型。
box-sizing: border-box；使元素的寬度等于元素的內容區(qū)寬度加左右內邊距寬度和左右邊框的寬度，元素的高度等于內容區(qū)高度加上下內邊距寬度和上下邊框的寬度。
維度計算：
width = 左右border + 左右padding + content width
height = 上下border + 上下padding + content height
inline-block有什么作用？inline-block的縫隙是怎么回事？如何解決
inline-block表現為行內元素但是擁有塊元素設置寬高的特性,又保留了行內元素不換行的特點。
有縫隙的原因：inline-block水平呈現的元素間，標簽之間會有換行，Tab或字符之間的空格，最后導致呈現的元素之間產生了縫隙。
解決方案：
- 給父元素設置 font-size: 0，在 inline-block 元素上重新設置 font-size。
- 設置margin值為負
- 設置inline-block元素letter-space值為0，其父元素letter-space值為負值
- 去掉HTML中標簽段之間的空格或用注釋代替空格
通用解決辦法：不要設置 inline-block，使用 float 或 flex。
用垂直方向的PADDING來實現等比縮放的盒子
固定圖片百分比是一個針對響應式布局很有效的方案，尤其是在移動端，可以說是一個剛性需求。簡單來說，就是根據容器的寬度，按照寬高比例自動計算出容器的大小，并且讓容器內的如img等子元素自適應寬高。
解決方案
圖片父容器寬度100%，父容器的高度百分比為：100*3 / 4 = 75% ; 圖片absolute并且完全鋪滿父容器。
