定位
- 属性名
position - 属性值
- 1、静态定位
static
标准流中的元素默认就是静态定位
注意点
1、不能配合方位属性实现移动
2、之后说的定位，一般指的是：相对、绝对、固定
- 2、相对定位
relative
特点
1、需要配合方位属性实现移动
2、相对于自己原来的位置进行移动
3、还占位置
没有脱标
- 3、绝对定位
absolute
特点
1、需要配合方位属性实现移动
2、分情况
1、如果祖先元素中没有定位的元素
此时相对于浏览器可视区进行移动
2、如果祖先元素中有定位的元素
此时相对于最近的有定位的祖先元素进行移动
3、不占位置
已经脱标了
脱标之后的元素，宽度默认由内容撑开
- 4、固定定位
fixed
特点
1、需要配合方位属性实现移动
2、永远相对于浏览器进行移动
3、不占位置
已经脱标了
脱标之后的元素，宽度默认由内容撑开
- 应用场景
- 子绝父相
子元素绝对定位
父元素相对定位
场景：让子元素相对于父元素进行定位移动
- 水平居中
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'] {}
