em、rem、vm、vw 分別如何計算尺寸
- px：相對長度單位，像素，是相對與顯示器分辨率而言的。
- em：相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。
- rem：相對長度單位。r’是“root”的縮寫，相對于根元素<html>的字體大小。
-
vh and vw：相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）。
1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度。 - vmin和vmax：關(guān)于視口高度和寬度兩者的最小值或者最大值。
顏色有幾種寫法?透明色如何表示?透明效果如何實現(xiàn)？currentColor如何來用?
- 顏色的寫法一般有四種。分別為：顏色關(guān)鍵字，如：bule。十六進制，如： #e0b0ff；RGB，如：rgb(224, 176, 255)；HSL值，三個字母分別表示色相、飽和度、亮度，基于rgb值，如：hsl(276,100%,50%)。
- 透明色用RGBA&HSLA表示，如 p {background-color: rgb(224, 176, 255, .5);}，
p { background-color: hsla(240, 100%, 50%, 0.5);}，A為Alpha,即透明度。 - currentcolor：表示和當前元素的color一樣的顏色。
css 中calc是什么？實現(xiàn)一個footer 固定底部的效果，附上預覽鏈接
calc,即calculate，是CSS里的運算，寫為height/width:calc(),括號內(nèi)為一個數(shù)學表達式，表達式可以與加減乘除這四個運算符組合,以此得出一個終值。
鏈接
如下代碼中，饑人谷3個字的樣式是
圖中饑人谷應為粉色 14px
根據(jù)權(quán)值計算：1.#msg { color: red; font-size: 16px; } 100分；
2.#content p {color: blue; font-size: 14px;} 101分；
3..container .box p {color: yellow; font-size: 18px;} 21分
4.p#msg {color: pink; } 101分。
又根據(jù)就近原則，所以為粉色 14px。
下圖所示的代碼和效果中，為什么 h1 的字體大小沒變化? 為什么 a 的顏色沒變化?
h1的大小和a的顏色未發(fā)生變化，因為h1標簽的大小和a標簽的顏色有瀏覽器的默認屬性，而.box規(guī)定的屬性屬于繼承屬性，其權(quán)值小于默認屬性，h1的默認屬性為2em，所以圖中大小為24px，而a的顏色默認為藍色。
盒模型有哪些屬性？
- border：border-top, border-right, border-bottom, border-left
- margin：margin-top, margin-right, margin-bottom, margin-left
- padding：padding-top, padding-right, padding-bottom, padding-left
- width，height：min-width, max-width，min-height,max-height
什么是標簽的默認樣式？列舉幾個帶默認樣式的標簽，并寫出默認樣式的屬性-值
瀏覽器對某些元素設(shè)置有默認樣式，為了沒有樣式表也有一個規(guī)范的樣式。
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;
}
body {
display: block;
margin: 8px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
按要求實現(xiàn)效果:元素class 為 box，寬度400px，高度500px，邊框2px、實線、#ccc，背景色為紅色
在瀏覽器居中展示，上邊距為40px
效果圖
回答問題。
出現(xiàn)圖中兩處的原因是body有默認的margin，為8px，h1標簽也有默認的上下margin。解決方法是規(guī)定*{margin：0；} 或body,h1 {margin: 0;}
列舉display 的幾個值
- block： 元素生成塊元素框。
- inline： 該元素生成一個或多個內(nèi)聯(lián)元素框。
- table：這些元素的行為像tableHTML元素。它定義了一個塊級框。
- inline-block：該元素生成一個塊元素框，它將與周圍的內(nèi)容一起流動，就像它是一個單行內(nèi)框（表現(xiàn)得像被替換的元素一樣）
- list-item：容納內(nèi)容和單獨的列表行盒的塊狀盒
- flex：元素的行為類似于塊元素，并根據(jù)flexbox模型布局其內(nèi)容。
塊級元素和行內(nèi)元素分別有什么特點？分別列舉二者對應的標簽
塊級元素默認占一行高度，寬度占滿父元素寬度，可以對塊級元素設(shè)置width、height、margin、padding，塊級元素可以包含其他塊級元素和行內(nèi)元素；<p>比較特殊，只能包含行內(nèi)元素。
行內(nèi)元素不會換行，寬度由自身的內(nèi)容決定，不能設(shè)置width和height，對于margin和padding只在設(shè)置水平方向有用，垂直方向沒有用，行內(nèi)元素可以包括其他行內(nèi)元素和數(shù)據(jù)。
塊級元素：<div>、<h1>~<h6>、<p>、<header>、<main>、<footer>、<table>等等
行內(nèi)元素：<a>、<img>、<span>等等
box-sizing: border-box； 是什么意思
在CSS中，你設(shè)置一個元素的 width 與 height 只會應用到這個元素的內(nèi)容區(qū)。如果這個元素有任何的 border 或 padding ，繪制到屏幕上時的盒子寬度和高度會加上設(shè)置的邊框和內(nèi)邊距值。
box-sizing 可以被用來調(diào)整這些表現(xiàn):
content-box 是默認值。如果你設(shè)置一個元素的寬為100px，那么這個元素的內(nèi)容區(qū)會有100px寬，并且任何邊框和內(nèi)邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個元素的width設(shè)為100px,那么這100px會包含其它的border和padding，內(nèi)容區(qū)的實際寬度會是width減去border + padding的計算值。
inline-block有什么作用？inline-block的縫隙是怎么回事？如何解決
inline-block是一個塊狀行盒，表現(xiàn)為一個行內(nèi)元素，它既擁有了塊狀元素可以設(shè)置width和height的特性，又保留了行內(nèi)元素不換行的特點。比如之前做橫向菜單欄時可以用li和float實現(xiàn)，現(xiàn)在也可以用display:inline-block;實現(xiàn)。
有縫隙的原因：inline-block水平呈現(xiàn)的元素間，標簽段之間換行顯示或空格分隔的情況下會有間距，這是符合規(guī)范的應有表現(xiàn)。
解決方法：
1.去掉HTML中標簽段之間的空格或用注釋代替空格
2.設(shè)置margin值為負
3.去掉inline-block元素的閉合標簽
4.設(shè)置inline-block元素letter-space值為0，其父元素letter-space值為負值
