## 1. 塊級盒子和內聯盒子(div\p\)
### 1. 塊級盒子
#### 1.特性
1. 獨占一行
2. 支持所有樣式
3. 不寫寬度的時候，跟父容器的寬度相同
4. 所占區域是一個矩形
#### 2.默認屬于塊級盒子的元素主要有：
```
1. 地址(**address**)；
2. 塊引用(**blockquote**)；
3. 居中對其塊(**center**)；
4. 目錄列表(**dir**)；
5. 常用塊級(**div**)；
6. 定義列表(**dl**)、定義列表描述(**dd**)、定義列表聲明(**dt**)；
7. 交互表單(**form**)、表單控制組(**fieldest**)；
8. 大標簽(**h1**)、副標簽(**h2**)、3級標簽(**h3**)、4級標簽(**h4**)、5級標簽(**h5**)、6級標簽(**h6**)；
9. 水平分隔線(**hr**)；
10. 菜單列表(**menu**)；
11. 可選腳本內容(**noscript**)；
12. 排序列表(**ol**)、非排序列表(**ul**)、列表項(**li**)；
13. 段落(**p**)；
14. 格式化文本(**pre**)；
15. 表格(**table**)；
```
### 2. 內聯盒子
#### 1.特性
1. 盒子不會產生換行
2. 有些樣式不支持，如：width、height
3. 不寫寬度的時候，寬度由內容決定
4. 所占的區域不一定是矩形
5. 內聯盒子之間存在空隙
#### 2.內聯標簽
```
a - 錨點；
abbr - 縮寫；
acronym - 首字；
b - 粗體(不推薦)；
bdo - bidi override；
big - 大字體；
br - 換行；
cite - 引用；
code - 計算機代碼(在引用源碼的時候需要)；
dfn - 定義字段；
em - 強調；
font - 字體設定(不推薦)；
i - 斜體；
img - 圖片；
nput - 輸入框；
kbd - 定義鍵盤文本；
label - 表格標簽；
q - 短引用；
s - 中劃線(不推薦)；
samp - 定義范例計算機代碼；
select - 項目選擇；
small - 小字體文本；
span - 常用內聯容器，定義文本內區塊；
strike - 中劃線；
strong - 粗體強調；
sub - 下標；
sup - 上標；
textarea - 多行文本輸入框；
tt - 電傳文本；
u - 下劃線；
var - 定義變量。
```
## 2.標準盒模型和怪異盒模型
### 1. 標準盒模型
**在標準盒模型中，如果給盒設置了 width 和 height ，實際設置的是 content box 。padding 和 border 再加上設置的寬高一起決定整個盒子的大小**
### 2.怪異盒模型
**在怪異盒模型中，所有寬度都是可見寬度（即包含border\padding\content三層），所以內容寬度是該寬度減去邊框和填充部分**
### 3.標準盒模型變為怪異盒模型
`box-sizing`
#### 屬性
1. content-box:width\height -> content
2. border-box: width\height -> content + padding + border
## 3. 浮動樣式
* 當元素被浮動時，會脫離文檔流，根據 float 的值向左或向右移動，直到它的外邊界碰到父元素的內邊界或另一個浮動元素的外邊界為止，是 CSS 布局中實現**左右**布局的一種形式
* **文檔流**：文檔流是元素在 web 頁面上的一種呈現方式，按照出現的先后順序進行排列
### 1.清除高度塌陷
1. clear 屬性(只針對塊級盒子)
`clear:both`
`display:block 把內聯盒子轉換為塊級盒子`
2. BFC
3. 空標簽
```
<div class="box1">
<div class="box2"></div>
<div style="clear:both"></div>
</div>
```
4. .clearfix::after{}
```
.clearfix::after{
content: "";
clear: both;
display: block;
}
```
```
<div class="box1 clearfix">
<div class="box2"></div>
</div>
```
### 2.浮動特性
1. 只會影響后面的元素
2. 文本不會被浮動元素覆蓋—**文字不會被浮動元素蓋住**
3. 具備內聯盒子特性：寬度由內容決定
4. 支持塊級盒子特性：支持所有樣式
5. 浮動元素放不下，會自動換行
## 4. 定位樣式
* CSS position 屬性用于指定一個元素在文檔中的定位方式，其中 top,right,bottom 和 left 屬性則決定了該元素的最終位置
### 1. 相對定位及特性 **relative**
* 相對定位的元素是在文檔中的正常位置偏移給定的值
* 不影響到其他元素布局
* 相對于**自身**的偏移
```
position:relative;
left:?10px;
```
### 2. 絕對定位及特性 **absolute**
**類比于浮動，絕對定位的元素和其他元素不在一個層級**
* 絕對定位的元素****脫離了文檔流****，絕對定位元素不占據空間
* 具備內聯盒子的特性，**寬度由內容決定**
* 具備塊級盒子特性，**支持所有樣式**
* 絕對定位元素相對于最近的**非 static 祖先元素**定位。當這樣的祖先元素不存在時，則相對于**可視區**定位
### 3. 固定定位及特性 **fixed**
* 固定定位于絕對定位相似，但是總是會以**可視區**進行偏移，**不受祖先元素影響**
### 4. 粘性定位及特性 ****
* 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值之前為相對定位，之后為固定定位
