### 4. 浮动流体布局
PC端页面会有一个内容部分的固定宽度（例如：1200px、1190px、1004px、960px等等）。
(版心)
最小宽度 1400将最重内容放在中心位置(1200)，左右留白
3890 (1200)
#### (1) 分析pc端页面布局特点
pc端布局都存在一个用于适应最小屏幕显示的居中元素。一般会把内容的结构都放在这个居中的元素中，左右两侧留白。
因此在pc端布局中，可以在用于划分某个部分的元素内部加入一个用于居中的元素。如：
```html
```
#### (2) 封装自己的reset.css
如果开发网页项目需要reset.css
(1)直接下载完整reset.css文件
```css
/* 星号的效率过低，非练习时可以自定义某些元素去掉margin: 0;padding: 0; */
* {margin: 0;padding: 0;}
a {text-decoration: none;}
ul {list-style: none; }
/* 清除浮动 */
.clearFloat:after {
content: "";
display: block;
height: 0;
clear: both;
}
.clearFloat {*zoom: 1;}
/* 如：针对学子商城居中1000宽度 */
.center {
width: 1000px;margin: 0 auto;
}
```
## 十八、定位(!!!!!!!!)
#利器:如果网页中元素位置特殊(不靠左右上右;移动范围很大)需要定位
#微调:margin
#整体靠左靠右:float
#位置特殊,调整位置很大
| (1)多张图片轮播图切换，位置切换 |
| (2)右侧购物车;人工客服务 |
| (3)小图片 放大镜 |
| 建议： (1)定位功能极强,不要过渡使用(改起来吃力) 如果网页后期发生改动 |
### 1.position属性
- `position`属性是定位属性，用于指定一个元素在文档中的定位方式。
- top，right，bottom 和 left 属性值则决定了该元素的距离四边的位置，可以为负值。
- 开发中多用绝对长度单位px进行调整，如果在移动端中，可以使用rem、vw等单位进行调整。
- 常用取值：
- `relative` 相对定位
- `absolute` 绝对定位
- `fixed` 固定定位
### 2.相对定位
- 相对定位position: relative (要移动)不脱离文档流(相对于自己原来位置调整)
- 可使用top，right，bottom 和 left (移动到哪)做偏移。
- 元素相对的位置是自己本来的位置，移动不改变页面布局。
- 相对定位属性不会影响周围的布局，但会出现新的层叠顺序。
- 当四个方向值发生重合时，以top和left为优先。
```html
html>
```
### 3.绝对定位
- absolute绝对定位，元素将脱离文档流（搬家），其他元素不为该元素预留空间。
- 它的移动参照为祖先元素的偏移，来确定元素位置。元素会逐层向上寻找自己的参照元素，当找到的最近一层祖先元素具有position属性时(注意)，该元素就会以这个祖先元素的原点为参照点。
?祖先 浏览器窗口
?你开启定位
<div>
- 可使用top，right，bottom 和 left 做偏移。
- 当四个方向值发生重合时，以“上top”和“左left”为优先。
- 绝对定位的元素可以设置外边距，且不会与其他边距合并。
```css
.baba {
background-color: gray;
position: relative;
}
.baba>div {width: 100px;height: 100px;}
.erzi1 {
background-color: blue;
position: absolute;
top: 10px;
left: 10px;
}
.erzi2 {
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.erzi3 {
background-color: green;
position: absolute;
top: 20px;
bottom: 30px;
}
.erzi4 {
background-color: orange;
position: absolute;
top: 20px;
margin: 20px;
}
```
#### (1)子元素在父元素内居中
使用元素定位，让已知高度的子元素在父元素中上下左右居中
```html
```
### 【练习】
> 按照标注图制作 ，注意背景的平铺方式
> 鼠标移入，两个导航项出现下拉菜单
> 可以不用严格按照该图做，可以适当改变
> 加入reset.css
```html
html>
热门游戏
角色扮演
动作冒险
体育竞速
```
### 4.固定定位
fixed固定定位是元素，决定它的“包含块”是html，唯一可以限定固定定为元素的就是html跟元素
- `position: fixed;`它到父级始终是html
- 直接在窗口的某个位置固定
- 可使用top，right，bottom 和 left 做偏移。
#### (1)居中的弹窗
固定定为，元素在父元素中居中
```css
* {margin: 0;padding: 0;}
.alertBox {
width: 300px;
height: 200px;
color: red;
background-color: #aaa;
position: fixed;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -150px;
}
```
#### (2)返回顶部元素
```html