定位的常见应用场景
-
1、解决盒子与盒子之间的层叠问题
- 子绝父相
-
2、让盒子固定在页面中的某个位置
- 固定定位
相对定位、绝对定位、固定定位的特点
-
相对定位
- 1、需要配合方位属性实现移动
- 2、相对于自己原来的位置进行移动
- 3、占位置
-
绝对定位
-
1、需要配合方位属性实现移动
-
2、分情况
- 1、如果祖先元素中没有定位的元素，此时默认相对于浏览器的可视区域进行移动
- 2、如果祖先元素中有定位的元素，此时相对于最近的有定位的祖先元素进行移动
-
3、不占位置
-
已经脱标了
- 脱标之后的元素宽高默认由内容撑开了
-
-
-
固定定位
-
1、需要配合方位属性实现移动
-
2、相对于浏览器的可视区域进行移动
-
3、不占位置
-
已经脱标了
- 脱标之后的元素宽高默认由内容撑开
-
-
相对定位元素是否还占位置，会相对于谁偏移
- 占位置
- 相对于自己原来的位置
绝对定位元素是否还占位置，会相对于谁偏移
-
不占位置
-
分情况
- 1、如果祖先元素中没有定位的元素，此时默认相对于浏览器的可视区域进行移动
- 2、如果祖先元素中有定位的元素，此时相对于最近的有定位的祖先元素进行移动
固定定位元素是否还占位置，会相对于谁偏移
- 不占位置
- 相对于浏览器的可视区域
子绝父相的含义
-
子绝
- 子元素绝对定位
-
父相
- 父元素相对定位
写出定位让盒子水平垂直都居中的代码
- 1、子绝父相
- 2、left:50%
- 3、top：50%
- 4、transform:translate(-50%,-50%)
设置定位元素的层级
-
属性名
- z-index
-
属性值
- 数字，数字越大，层级越高
-
注意点
- z-index只能设置定位元素的层级！！
常见光标样式
-
属性名
- cursor
-
属性值
-
默认的箭头
- default
-
小手
- pointer
-
工字型
- text
-
十字光标
- move
-
边框圆角的代码
-
属性名
- border-radius
-
属性值
- 数字+px
-
赋值规则
- 先从左上开始赋值，然后顺时针赋值，如果没有赋值的？看对角
写出正圆和胶囊按钮
-
正圆
- 1、盒子要是正方形
- 2、border-radius:50%
-
胶囊按钮
- 1、盒子要是长方形
- 2、border-radius：盒子高度的一半
设置元素的显示和隐藏
-
元素隐藏
- display:none
-
元素显示
- display：block
display:none和visibility:hidden的区别
-
display:none
- 元素隐藏之后不占位置
-
visibility：hidden
- 元素隐藏之后占位置
定位
-
属性名
- position
-
属性值
-
1、静态定位
-
static
-
标准流中的元素默认就是静态定位
-
注意点
- 1、不能配合方位属性实现移动
- 2、之后说的定位，一般指的是：相对、绝对、固定
-
-
2、相对定位
-
relative
-
特点
-
1、需要配合方位属性实现移动
-
2、相对于自己原来的位置进行移动
-
3、还占位置
- 没有脱标
-
-
-
3、绝对定位
-
absolute
-
特点
-
1、需要配合方位属性实现移动
-
2、分情况
-
1、如果祖先元素中没有定位的元素
- 此时相对于浏览器可视区进行移动
-
2、如果祖先元素中有定位的元素
- 此时相对于最近的有定位的祖先元素进行移动
-
-
3、不占位置
-
已经脱标了
- 脱标之后的元素，宽度默认由内容撑开
-
-
-
-
4、固定定位
-
fixed
-
特点
-
1、需要配合方位属性实现移动
-
2、永远相对于浏览器进行移动
-
3、不占位置
-
已经脱标了
- 脱标之后的元素，宽度默认由内容撑开
-
-
-
-
-
应用场景
-
子绝父相
- 子元素绝对定位
- 父元素相对定位
- 场景：让子元素相对于父元素进行定位移动
-
水平居中
-
1、子绝父相
-
2、给子元素设置
- left：50%
- transform：translateX（-50%）
-
-
水平垂直都居中
-
1、子绝父相
-
2、给子元素设置
- left:50%
- top:50%
- transform：translate（-50%，-50%）
-
-
-
元素的层级关系
-
标准流<浮动<定位
-
三种定位之间的层级默认是相同，在html结构中写在下面的，层级更高
-
z-index
-
作用
- 设置定位元素的层级！！！！！！！
-
取值
-
数字
- 数字越大，层级越高
-
-
-
装饰
-
垂直对齐方式
-
属性名
- vertical-align
-
属性值
-
baseline
- 基线对齐
-
top
- 顶部对齐
-
middle
- 中部对齐
-
bottom
- 底部对齐
-
-
注意点
-
给行内元素或者行内块元素设置
- 优先给img标签设置
-
-
-
光标类型
-
属性名
- cursor
-
属性值
-
default
- 默认箭头
-
pointer
- 小手
- 提示：用户可以点击
-
text
- 工字型
- 提示：用于选择文本
-
move
- 十字光标
- 提示：用户可以拖拽
-
-
-
边框圆角
-
border-radius
-
取值
-
一个值
- 左上右上右下左下
-
两个值
- 左上右下
- 右上左下
-
三个值
- 左上
- 右上左下
- 右下
-
四个值
- 左上
- 右上
- 右下
- 左下
-
记忆规则：
- 先从左上开始赋值，然后顺时针赋值，如果没有赋值的？？看对角的！！！
-
-
应用
-
画一个圆
- 1、盒子的正方形
- 2、border-radius：50%；
-
画一个胶囊按钮
- 1、盒子是长方形
- 2、border-radius：高度的一半
-
-
-
overflow
-
作用
- 设置内容的超出部分的显示效果
-
取值
-
visible
- 超出部分可见
-
hidden
- 超出部分隐藏
-
scroll
- 显示滚动条
-
auto
- 自动根据内容的多少显示或者隐藏滚动条
-
-
-
元素本身隐藏属性
-
visibility：hidden
-
当前元素隐藏
-
还占位置
- 穿上了隐身衣
-
-
-
display：none
-
当前元素隐藏
-
不占位置
- 相当于干掉了
-
-
-
-
（拓展补充）元素整体透明度
-
opacity
-
取值
-
0~1
-
0
- 完全透明
-
1
- 完全不透明
-
-
特殊情况
- 当设置opacity:0时，此时元素完全透明，有元素隐藏的效果
-
-
（拓展补充）边框合并
- border-collapse：collapse
- 给table标签设置
-
（拓展补充）用css画三角形
选择器拓展
-
伪类选择器
-
链接伪类选择器
-
选中的是标签的某种状态
-
E:link
- a标签未访问过的状态
-
E:visited
- a标签访问过之后的转态
-
E:hover
- 鼠标悬停a标签的状态
-
E:active
- 鼠标按下的状态
-
注意点
-
1、书写顺序
- lvha
-
2、hover用的最多，并且可以用在其他标签上
-
-
-
焦点伪类选择器
- E:focus
-
-
属性选择器
- E[attr] {}
- E[attr='xxx'] {}
