### 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;
}
```
