位置属性

1. display

两种基本类型
- 块元素 block
  - 独占一行，内部可以容纳其他块元素和行内元素
  - 比如 div/h1/p/hr
- 行内元素 inline
  - 多个拼接成一行，内部只能容纳其他行内元素
  - 比如 span/strong/a/em
取值
- block
  - 可以定义长宽和四个方向 margin
- inline
  - 无法定义长宽和上下 margin
  - 但可以定义左右 margin
- inline-block(行内块元素)
  - 行内基础上，成块，变得可以定义长宽
  - 默认此值的有两个
    - img
    - input
  - 场景
    - 为 span 和 a 定义长宽时，就要手动改此取值
  - 注意
    - 多个行内块元素并列，会有间距
    - 去间距办法
```
#方框父元素 {
  font-size: 0;
}
```
      - 注意子元素中若有文字需要大小，则需自己重新定义 font-size
- none
  - 隐藏一个元素，配合 js 使用
  - 特性
    - 1、被隐藏元素不占据原来位置
      - 而visibility:hidden依然占据原来位置
    - 2、被隐藏元素不会被 SEO 检索到
      - 需要 SEO 的内容不能用此属性
- table-cell
  - 让元素以“表格单元格”形式呈现，具备 td 元素特点
  - 已经很少使用
- flex
  - 新型的弹性布局，非常好用，详情见: css 布局

2. position

固定定位
- 固定在窗口位置
- 窗口滚动也不会移动
```
position: fixed;
```
相对定位
- 相对其正常位置定位
```
position:relative
top:10px;
```
绝对定位
- 相对于最近的已定位父元素(即 relative 元素)
- 如果没有已定位父元素，则相对于<body>
- 注意: 会把元素转为 block
```
position: absolute;
```
- 还需配合 top/left 或 bottom/right 取值进行定位调整
默认定位
- 相当于没有定位
```
position: static;
```
粘性定位
- 基于用户的滚动位置来定位
- 使用时需指定特定阈值，如 top:0
```
position: sticky;
```

3. float

先了解文档流
- 指元素在页面中出现的先后顺序
- 分类
  - 正常文档流
    - 一个页面从上到下，分为一行一行
    - 块元素独占一行
    - 相邻行内元素从左到右排列，直到该行被填满
  - 脱离文档流
    - 某元素从文档中抽离出来
    - 两种办法
      - float 浮动
      - position 定位
取值
- left
- right
- none
浮动的特点
- 1、设置后，自身会变成 block 类型，有块元素效果
  - 可定义 width/height
  - 可定义 padding/margin
- 2、设置后，后面的元素会紧跟着填上空缺的位置
浮动的影响
- 1、对父元素的影响
  - 若父元素未定义高度，则会因子元素浮动而坍塌
  - 若父元素高度太小，则子元素会因浮动而溢出
- 2、对兄弟元素的影响
  - 兄弟也浮动时
    - 同一方向的，会紧挨着排列
    - 相反方向的，会分别占两边
  - 兄弟不浮动时
    - 兄弟会被浮动的覆盖住
- 3、对子元素的影响
  - 父元素只要浮动，就会自适应地包含浮动的子元素
浮动的副作用
- 1.父元素高度坍塌
  - 出现原因
    - 父元素没写高度
    - 而子元素采用 float 浮上去，不能撑开父元素
    - 导致其高度坍塌为 0
  - 解决办法：清除浮动
- 2.页面布局错乱
  - 警示：一般出现错乱，都要首先排查设置浮动处
清除浮动的三种办法
- 1.对浮动元素后面的元素添加属性 clear:both
  - 新手办法，不建议
- 2.对浮动元素的父元素添加属性 overflow:hidden
  - 使得 BFC 触发
  - 也不建议，会隐藏超出父元素的部分
- 3.【推荐】使用::after 伪元素结合 clear:both 清除浮动
  - 只要记住下面公共代码
  - 对浮动元素的父元素添加 clearfix 类即可
```
.clearfix {
  *zoom: 1;
}
.clearfix::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
```
  - 第一行 zoom 是解决 IE6/IE7 的浮动问题

Keyboard shortcuts

位置属性

1. display

2. position

3. float