### HTML語義化
* 讓人更容易讀懂（增加代碼可讀性）
* 讓搜索引擎更容易讀懂（SEO）
### 塊狀元素、內聯元素
* 塊狀元素：獨占一行。`display:block/table div h1 h2 table ui ol p 等`
* 內聯元素：不獨占，向后排列。`display:inline/inline-block; span img input button`
### 盒模型寬度
* offsetWidth = （內容寬度 + 內邊距 + 邊框），無外邊距。
* 答案：122px
#### box-sizing：border-box
```css
#div1 {
width: 100px;
padding: 10px;
border: 1px solid;
margin: 10px;
box-sizing: border-box;
}
// 加了border-box之后，offsetWidth為width的100px
```
### margin相關
#### margin 縱向重疊
* 相鄰元素的margin-top和margin-bottom會發生重疊（取最大值）
* 空白內容的 `<p></p>` 也會重疊
* 答案：15px
#### margin 負值
* margin-top 和 margin-left 負值，元素向上、向左移動
* margin-right負值，右側元素左移，自身不受影響；margin-bottom負值，下方元素上移，自身不受影響
### line-height 繼承問題
* 寫具體數值，如30px，繼承該值
* 寫比例，如2/1.5，繼承該比例
* 寫百分比，如200%，繼承計算出來的結果
### css - 響應式
#### rem
rem是一個長度單位；
* px，絕對長度單溫；
* em，相對長度單位，相對于父元素；
* rem，相對長度單位，相對于根元素，讓用于響應式布局。
#### 響應式布局常用方案
* media-query，根據不同屏幕寬度設置根元素 font-size
```css
@media only screen and(max-width:374px) {
/* iphone5 或更小尺寸，一iphone5的寬度 320px 比例設置 font-size */
html {
font-size: 86px;
}
}
@media only screen and(min-width :375px) and(max-width: 413px) {
/* iphone6/7/8 ,依此為基準 */
html {
font-size: 100px;
}
}
@media only screen and(min-width:414px) {
/* iphone6p 或更大尺寸，以iphone6p的寬度 414px 比例設置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div1 {
width: 1rem;
background-color: #ccc;
}
```
