#### 定位 position
* fixed 固定定位
+ 参考物:浏览器的窗口
+ 移动:left/top/right/bottom
+ 特点
- 不会跟随滚动条的滚动而滚动
- 脱离文档流
- 宽度自适应的时候,宽度不显示,可以通过设置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-最小宽度不能超过该值
* 高度自适应
+ 高度由内容撑开; 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属性值;
}