定位
定位三要素:定位目标、参照物、坐标
position(static:默认值,不进行定位)
1、absolute(绝对定位)
定位目标:给需要定位的元素添加定位
参照物:距离其最近的且带有定位的父元素,如果父元素一直未找到,会找到html
坐标:可以通过top/bottom/left/right四个属性值对元素进行坐标的设置
top:目标元素的上边离参照物的上边的位置
bottom:目标元素的下边离参照物的下边的位置
left:目标元素的左边离参照物的左边的位置
right:目标元素的右边离参照物的右边的位置
可以加负数,如果元素没有定位,那么这四个值是不生效的
特点:完全脱离文档流,不占据空间
2、relative(相对定位)
定位目标:给需要定位的元素添加定位
参照物:元素本身
坐标:可以通过top/bottom/left/right四个属性值对元素进行坐标的设置
top:目标元素的上边离参照物的上边的位置
bottom:目标元素的下边离参照物的下边的位置
left:目标元素的左边离参照物的左边的位置
right:目标元素的右边离参照物的右边的位置
特点:完全脱离文档流,不占据空间
3、fixed(固定定位)
定位目标:给需要定位的元素添加定位
参照物:浏览器
坐标:可以通过top/bottom/left/right四个属性值对元素进行坐标的设置
top:目标元素的上边离参照物的上边的位置
bottom:目标元素的下边离参照物的下边的位置
left:目标元素的左边离参照物的左边的位置
right:目标元素的右边离参照物的右边的位置
可以加负数,如果元素没有定位,那么这四个值是不生效的
特点:完全脱离文档流,不占据空间
4、sticky:粘性定位
当元素没有移出窗口范围的时候,相当于相对定位;当元素移出窗口范围的时候,相当于固定定位
垂直水平居中
1、使用margin
缺点:需要计算,必须知道父元素与子元素的宽高
2、使用定位加margin
缺点:还是需要知道子元素的宽高
3、直接使用定位
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
注意:子元素必须有宽高
锚点
作用:在同一页面内的不同位置进行跳转
语法:
1、给元素定义命名锚记名
语法:<标记 id="命名锚记名"> </标记>
2、命名锚记连接
语法:<a href="#命名锚记名称">链接文本或图片</a>