em、rem、vm、vw 分別如何計算尺寸的？
em：相對于當前元素字體大小，如2em為當前元素字體大小的兩倍；
rem：相對于默認根元素字體大小，一般瀏覽器默認字體大小為16px，2rem就是32px；
vh：相對于視窗高度，1vh為視窗高度的1%，如視窗高度200px，80vh即為200px80%=160px；
vw：相對于視窗寬度，1vw為視窗寬度的1%，如視窗寬度100px，60vw即為100px60%=60px；
注意：“視窗”叫視區更合適，指瀏覽器內部的可視區域（即window.innerWidth/window.innerHeight）大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域。
vm：相對于視口的寬度或高度，取決于哪一個更小。
顏色有幾種寫法?透明色如何表示?透明效果如何實現？currentColor如何來用?
顏色寫法：4種，分別是顏色關鍵字-如blue；十六進制值-如#abcdef或#333；RGB值-rgb(0,255,255)或rgb(50%,50%,50%)；HSL值（三個字母分別表示色相、飽和度、亮度，基于rgb值得來）-如hsl(276,100%,50%)。
透明色：表示為RGBA & HSLA -- 其中A為Alpha，表示不透明度，如rgba(200,150,255,.5)，hsla(200,100%,50%,0.5)，.5和0.5都代表0.5，即當前顏色半透明。
要實現完全透明把Alpha設置為0即可，也可使用transparent關鍵字實現透明效果。
currentColor關鍵字：代表原始的color屬性的計算值。
用法：讓繼承自屬性或子元素的屬性的顏色屬性以默認值不再繼承。
也能用于那些繼承了元素的 color 屬性計算值的屬性，相當于在這些元素上使用 inherit 關鍵字，如果這些元素有該關鍵字的話。
css 中calc是什么？實現一個footer 固定底部的效果，附上預覽鏈接
效果
calc()是一個函數，括號內為一個數學表達式，表達式可以與加減乘除這四個運算符組合，該表達式結果會作為最終的值，我們可以通過計算來決定一個css屬性的值。
注意：做+-運算時，運算符左右要有空格樣式才能生效。
如下代碼中，饑人谷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;}
下圖所示的代碼和效果中，為什么 h1 的字體大小沒變化? 為什么 a 的顏色沒變化?
h1字體大小變化了，只是沒有變成12px而已。h1默認樣式為2em，表現在瀏覽器中是32px，設置font-size是12px后，繼承自div的12px被劃掉，h1默認字體大小仍是2em，但字號變為24px。
繼承沒有特殊性，瀏覽器對a有默認樣式（user agent stylesheet），color:-webkit-link;，由于css層疊，繼承自div的red被劃掉了，即繼承的樣式與瀏覽器默認樣式沖突，被瀏覽器默認樣式覆蓋，直接定義a的顏色是可以生效的。
盒模型有哪些屬性？
內容區：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
什么是標簽的默認樣式？列舉幾個帶默認樣式的標簽，并寫出默認樣式的屬性-值
為了沒有樣式表也能活著，瀏覽器都有自己的一套默認樣式，不同的瀏覽器和不同版本的瀏覽器的默認樣式都不相同。
部分帶默認樣式的標簽：
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, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,
h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block; unicode-bidi: embed ;}
li{ display: list-item; }
pre:{ white-space: pre }
元素class 為 box，寬度400px，高度500px，邊框2px、實線、#ccc，背景色為紅色，在瀏覽器居中展示，上外邊距為40px。
回答如下截圖中的兩個問題
body是父元素，瀏覽器默認body有8px的margin，所以藍色區域外會有縫隙；默認的h1有上下margin，所以紅色區域上下有縫隙。
清除：
設置:*{margin:0;}或body,h1{margin:0;}
列舉display 的幾個值
inline-生成一個或多個行盒
block-塊元素盒
list-item-容納內容和單獨的列表行盒的塊狀盒
inline-block-塊狀行盒
table-相當于<table>
table-cell-相當于<td>
table-row-相當于<tr>
flex-類似于塊元素，并根據flexbox模型布局其內容
inline-flex-類似于行內元素，并根據flexbox模型布局其內容
grid-類似于塊元素，并根據grid模型布局其內容
inline-grid-類似于行內元素，并根據grid模型布局其內容
塊級元素和行內元素分別有什么特點？分別列舉二者對應的標簽
box-sizing: border-box； 是什么意思？
告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那么這100px會包含其它的border和padding，不包括margin，內容區的實際寬度會是width減去(border + padding)的計算值。這使得我們更容易的去設定一個元素的寬高。
維度計算：
width = 左右border + 左右padding + content width
height = 上下border + 上下padding + content height
inline-block有什么作用？inline-block的縫隙是怎么回事？如何解決
inline-block是一個塊狀行盒，表現為一個行內元素，它既擁有了塊狀元素可以設置width和height的特性，又保留了行內元素不換行的特點。比如之前做橫向菜單欄時可以用li和float實現，現在也可以用display:inline-block;實現。
有縫隙的原因：inline-block水平呈現的元素間，標簽段之間換行顯示或空格分隔的情況下會有間距，這是符合規范的應有表現。
解決方法：
方法1、去掉HTML中標簽段之間的空格或用注釋代替空格
方法2、設置margin值為負
方法3、去掉inline-block元素的閉合標簽
方法4、設置inline-block元素letter-space值為0，其父元素letter-space值為負值
