前端自学day07-css布局（定位装饰）笔记整理

课程：（b站）黑马程序员【前端HTML5+CSS3+移动web全套教程】

day07

---

• 能够说出定位的常见应用场景
• 能够说出不同定位方式的特点
• 能够使用子绝父相完成元素水平垂直案例
• 能够写出三种常见的光标类型（cursor）
• 能够使用圆角边框属性完成正圆和胶囊按钮效果
• 能够说出display和visibility让元素本身隐藏的区别

一、定位

目标：能够说出四种定位的应用场景，使用子绝父相完成元素水平垂直案例

1. 定位的基本介绍，使用
2. 静态定位
3. 动态定位
4. 相对单位
5. 绝对定位
6. 子绝父相
7. 固定定位
8. 元素的层级关系

1.1网页常见布局方式

1. 标准流

   1. 块级元素独占一行-垂直布局
   2. 行内元素/行内块元素一行显示多个-水平布局

2. 浮动

   可以让原来垂直布局的块级元素变成水平布局

3. 定位

   1. 可以让元素自由的摆放在网页的任意位置
   2. 一般用于盒子之间的层叠情况

1.2定位的常见应用场景

1. 可以解决盒子之间的层叠问题
   • 定位之后的元素层级最高，可以层叠在其他盒子上
2. 可以让盒子始终固定在屏幕中的某个位置

2.2使用定位的步骤

1.设置定位方式：属性名：position

定位方式	属性值	相对于谁移动	是否占位置
静态定位	static	不能通过方位属性移动	占位置
相对定位	relative	相对于自己原来的位置移动	占位置
绝对定位	absolute	相对于最近的、有定位的祖先元素移动	不占（脱标）