课程:(b站)黑马程序员【前端HTML5+CSS3+移动web全套教程】
day07
- 能够说出定位的常见应用场景
- 能够说出不同定位方式的特点
- 能够使用子绝父相完成元素水平垂直案例
- 能够写出三种常见的光标类型(cursor)
- 能够使用圆角边框属性完成正圆和胶囊按钮效果
- 能够说出display和visibility让元素本身隐藏的区别
一、定位
目标:能够说出四种定位的应用场景,使用子绝父相完成元素水平垂直案例
- 定位的基本介绍,使用
- 静态定位
- 动态定位
- 相对单位
- 绝对定位
- 子绝父相
- 固定定位
- 元素的层级关系
1.1网页常见布局方式
-
标准流
- 块级元素独占一行-垂直布局
- 行内元素/行内块元素一行显示多个-水平布局
-
浮动
可以让原来垂直布局的块级元素变成水平布局
-
定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
1.2定位的常见应用场景
- 可以解决盒子之间的层叠问题
- 定位之后的元素层级最高,可以层叠在其他盒子上
- 可以让盒子始终固定在屏幕中的某个位置
2.2使用定位的步骤
1.设置定位方式:属性名:position
定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
---|---|---|---|
静态定位 | static | 不能通过方位属性移动 | 占位置 |
相对定位 | relative | 相对于自己原来的位置移动 | 占位置 |
绝对定位 | absolute | 相对于最近的、有定位的祖先元素移动 | 不占&# |