09-固定定位与粘性定位/css
#### 定位 position
* fixed 固定定位
+ 参考物：浏览器的窗口
+ 移动：left/top/right/bottom
+ 特点
- 不会跟随滚动条的滚动而滚动
- 脱离文档流
- 宽度自适应的时候，宽度不显示，可以通过设置width:100%;
+ **应用场景**
- 固定导航
- 固定侧边栏
- 广告
* 粘性定位 sticky
+ 参考物：浏览器的窗口
+ 移动: top
+ 特点：没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
* **定位属性**的层级关系 z-index
+ 默认最后书写的，显示在最上面
+ auto(默认值)/number:数字 **没有单位**
+ 值越大，显示的在最前面，可以设置负数
#### 锚点
* 应用：在同一个页面实现不同板块的跳转
```html
1.必须使用a标签2.必须是id,3.#一定要加
<a href="#id名">游戏</a>
<div id="box"></div>
```
#### 宽高自适应
* 宽度自适应
+ 块元素
- 不设置宽度，和父元素一样宽
- 设置百分比
+ 内联元素
- 宽度由内容撑开
+ 最大宽度：max-width;最大不能超过该值 min-width:最小宽度不能超过该值
* 高度自适应
+ 高度由内容撑开; height:auto;
+ 最大高度：max-height 最小高度 min-height
+ 设置百分比参考父元素的高度 如果要参考body高度的话，需要设置
html,body{height:100%}
* **高度塌陷**
+ 条件
- 父元素不设置高度，想要通过子元素撑开
- 子元素设置了浮动
+ 解决方法
- 给父元素(高度坍塌的元素)设置overflow:hidden; 触发BFC(块级格式上下文)
1. 弊端: 会把父元素之外的元素隐藏掉
- 在浮动元素的下方添加一个空的div标签,添加css属性
clear: left/right/both 清除浮动元素带给自己的影响,**只对块级元素生效**
2. 弊端：代码冗余
- 万能清除法
```css
高度塌陷的元素::after {
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
}
.clearfix::after{
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
}
```
* 伪元素选择器
添加的内容属于内联元素
+ 选择器::after{ 添加到父元素的最后
content:""; 必须要有
}
+ 选择器::before{ 添加到父元素的最前面
content:"";
}
+ 选择器::first-letter{ 选择第一个字符
css属性:css属性值;
}
+ 选择器::first-line{ 选择到第一行
css属性:css属性值;
}
