## 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. 粘性定位及特性 ****
* 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值之前为相对定位，之后为固定定位
