一翼岁、 em类垫、rem、vm琅坡、vw 分別如何計算尺寸的悉患？
em：相對于父元素的font-size屬性值來計算的，如果父元素為14px榆俺，那么2em=28px售躁；
rem：相對于根元素<html>的font-size屬性值來計算的，一般瀏覽器默認字體大小為16px茴晋，那么2rem=32px陪捷；
vh和vw相對于視口的高度和寬度，1vh 等于1%的視口高度诺擅，1vw 等于1%視口寬度
二市袖、 顏色相關屬性
- 顏色的幾種寫法
- 顏色關鍵字（color: white;）；
- 十六進制（background-color: #e0b0ff;）烁涌；
- rgb(224, 176, 255)苍碟；
//rgb分別表示red green blue比例 - hsl(276, 100%, 85%)；
H：Hue(色調)烹玉。0(或360)表示紅色驰怎，120表示綠色阐滩，240表示藍色二打，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)掂榔。取值為：0.0% - 100.0%
L：Lightness(亮度)继效。取值為：0.0% - 100.0%
- 透明色表示
注：設置透明色只針對背景顏色生效，對文本及其他元素效果并不生效装获。
-
background-color:transparent完全透明 -
rgba(255,255,255,0.5)a表示Alpha透明度 -
hsla(276, 100%, 85%,0.5)瑞信；a表示Alpha透明度
- 透明效果的實現
-
opacity規(guī)定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）穴豫。
<html>
<head>
<style>
div
{
background-color:red;
opacity:0.5;
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5凡简。請注意逼友，文本和背景色都受到不透明級別的影響。</div>
</body>
</html>
-
color: transparent
不建議使用該方法
- currentColor屬性
currentColor關鍵字代表原始的 color 屬性的計算值秤涩。
它允許讓繼承自屬性或子元素的屬性顏色屬性以默認值不再繼承帜乞。
它也能用于那些繼承了元素的 color 屬性計算值的屬性，相當于在這些元素上使用 inherit 關鍵字筐眷，如果這些元素有該關鍵字的話黎烈。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<div style="color:darkred">
The color of this text is the same as the one of the line:
<div style="background:currentcolor; height:1px"></div>
Some more text.
</div>
</body>
</html>
三、calc元素
calc()是css3的一個新增的功能匀谣，用來指定元素的動態(tài)長度照棋。
calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度武翎。
calc()的運算規(guī)則
calc()使用通用的數學運算規(guī)則烈炭，但是也提供更智能的功能：
- 使用“+”、“-”后频、“*” 和 “/”四則運算梳庆；
- 可以使用百分比、px卑惜、em膏执、rem等單位；
- 可以混合使用各種單位進行計算露久；
- 表達式中有“+”和“-”時更米，其前后必須要有空格，如"width: calc(12%-5em)"這種沒有空格的寫法是錯誤的毫痕，瀏覽器會認為是一個無效的表達式征峦，解析成為一個長度后跟一個加號再跟一個負百分比。
- 表達式中有“*”和“/”時消请，其前后可以沒有空格栏笆，但建議留有空格。
四臊泰、CSS選擇器權重
- 權重決定了哪一條規(guī)則會被瀏覽器應用在元素上蛉加。
- 權重的不同，是你所期望的效果缸逃，沒有通過css規(guī)則在元素上生效的主要原因针饥。
- 權重的級別劃分時包含了所有的css選擇器
- 如果兩個選擇器作用在同一元素上，則權重高者生效需频。
- 權重的級別根據選擇器被劃分為四個分類：行內樣式丁眼，id，類與屬性昭殉，以及元素苞七。
- 如果兩個選擇器權重值相同藐守，則最后定義的規(guī)則被計算到權重中(后面定度的CSS規(guī)則權重要更大，會取代前面的CSS規(guī)則)
- 如果兩個選擇器權重值不同蹂风，則權重大的規(guī)則被計算到權重中
- 如果一條規(guī)則包含了更高權重的選擇器吗伤，那么這個規(guī)則權重更高
- 最后定義的規(guī)則會覆蓋所有跟前面沖突的規(guī)則
- 內聯(lián)樣式表含有比別的規(guī)則更高的權重
- Id選擇器的權重比屬性選擇器更高
- 你可以使用id來增大權重
- 類選擇器比任意數量的元素選擇器都高
- 通配符選擇器跟繼承來的樣式，他們的權重以 0硫眨，0足淆，0，0來計算
- 你可以用css權重計算器來計算權重礁阁。
| 分數 | 條件 |
|---|---|
| 1000 | + 1 / 在 style 屬性內或在 <style>標簽內 |
| 100 | + 1 / 每個出現的 ID 選擇器 |
| 10 | + 1 / 每個出現的 類巧号，偽類或 屬性選擇器 |
| 1 | + 1 / 每個元素選擇器或偽元素 |
| 選擇器 | 1000 | 100 | 10 | 1 | 總分 |
|---|---|---|---|---|---|
| body | 0 | 0 | 0 | 1 | 1 |
| #flash | 0 | 1 | 0 | 0 | 100 |
| h1 + p::after | 0 | 0 | 0 | 3 | 3 |
| li > a[download] > .warning | 0 | 0 | 2 | 2 | 22 |
| #notice a:hover 在 <style> 里 | 1 | 1 | 1 | 1 | 1111 |
五、盒模型
所有HTML元素可以看作盒子姥闭，在CSS中丹鸿，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子棚品，封裝周圍的HTML元素靠欢，它包括：邊距，邊框铜跑，填充门怪，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素锅纺。
不同部分的說明：
- Margin(外邊距) - 清除邊框外的區(qū)域掷空，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框囤锉。
- Padding(內邊距) - 清除內容周圍的區(qū)域坦弟，內邊距是透明的。
- Content(內容) - 盒子的內容官地，顯示文本和圖像酿傍。
在標準模式下最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
根據 W3C 的規(guī)范，元素內容占據的空間是由 width 屬性設置的驱入，而內容周圍的 padding 和 border 值是另外計算的赤炒。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型沧侥。這些瀏覽器的 width 屬性不是內容的寬度可霎，而是內容魄鸦、內邊距和邊框的寬度的總和宴杀。
六、瀏覽器默認樣式
當對網頁標簽不設置屬性時拾因，瀏覽器對某些元素設置有默認樣式旺罢。
常見的例如：p旷余、h1、ul扁达、div都是block顯示正卧。
所以建議在制作網頁時對常用元素進行reset樣式聲明，減少默認樣式有可能帶來的問題跪解。
七炉旷、 display屬性
這個屬性用于定義建立布局時元素生成的顯示框類型。
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示叉讥。 |
| block | 此元素將顯示為塊級元素窘行，此元素前后會帶有換行符。 |
| inline | 默認图仓。此元素會被顯示為內聯(lián)元素罐盔，元素前后沒有換行符。 |
| inline-block | 行內塊元素救崔。（CSS2.1 新增的值） |
| list-item | 此元素會作為列表顯示惶看。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯(lián)元素顯示。 |
| compact | CSS 中有值 compact六孵，不過由于缺乏廣泛支持纬黎，已經從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker劫窒，不過由于缺乏廣泛支持莹桅，已經從 CSS2.1 中刪除。 |
| table | 此元素會作為塊級表格來顯示（類似 <table>）烛亦，表格前后帶有換行符诈泼。 |
| inline-table | 此元素會作為內聯(lián)表格來顯示（類似 <table>），表格前后沒有換行符煤禽。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）铐达。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）若皱。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
| inherit | 規(guī)定應該從父元素繼承 display 屬性的值倾芝。 |
八、 塊級元素和行內元素
塊元素：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
行內元素：em strong span a br img button input label select textarea (包含inline-block元素)
特點：
- 塊級元素可以包含文本羊始，塊級、行內元素，而行內元素只能包含文本和行內元素
- 塊級元素單獨占據一整行偏灿，行內元素占據的位置只有自身文本寬度的空間
- 塊級元素可以設置寬高，行內元素設置寬高無效
- 塊級元素的padding钝的，margin值設置有效翁垂，行內元素padding铆遭，margin上下的值設置無效，但左右有效(雖然表面上看起來變了沿猜，但是沒有影響到其他元素枚荣，換言之，其他元素認為它的大小沒變啼肩，因此其他元素不會因為他看起來大了橄妆，就改變自己的位置)
九、 box-sizing屬性
box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素祈坠。
取值：
content-box(默認值)：
padding和border不被包含在定義的width和height之內呼畸。對象的實際寬度等于設置的width值和border、padding之和颁虐，即 ( Element width = width + border + padding )
此屬性表現為標準模式下的盒模型蛮原。
border-box：
padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值另绩，即使定義有border和padding也不會改變對象的實際寬度儒陨，即 ( Element width = width )
此屬性表現為怪異模式下的盒模型。
十笋籽、inline-block
前面提到display屬性可取值為inline-block蹦漠，表示元素以行內塊級元素方式展現。
當元素設置display:inline-block時會發(fā)現一個問題车海，即元素之間會出現縫隙笛园，例下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</body>
</html>
span {
display: inline-block;
background-color: red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
}
解決方式
- 元素間留白間距出現的原因就是標簽段之間的空格，因此侍芝，去掉HTML中的空格研铆，自然間距就沒有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span>aaa</span><span>
bbb</span><span>
ccc</span>
</body>
</html>
- 使用font-size:0 （推薦）
針對父元素設置font-size為0州叠，子元素重新聲明正確font-size 棵红。這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距咧栗。
body {
font-size: 0px;
}
span {
display: inline-block;
background-color: red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 16px;
}
- 使用letter-spacing/word-spacing
一個是字符間距(letter-spacing)一個是單詞間距(word-spacing)逆甜，大同小異。有一定兼容性問題致板，有興趣的可以自己測試交煞。
body {
letter-spacing: -0.31em;
}
span {
display: inline-block;
background-color: red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
letter-spacing: 0;
}
