20220722 HTML定位布局和显示隐藏元素

87 阅读2分钟

定位——position(该样式需写在要定位的元素里,才能生效)

相对定位:relative

  • 不脱离文档流
  • 不设置偏移量时元素没有变化
  • 原点是元素本身所在的位置(本人理解为左上角的那个点)
  • 元素的层级会被提高(高层级会遮盖住低层级的)
  • 元素偏移后原来他在的位置,还是会被占用

绝对定位:absolute

  • 会脱离文档流
  • 宽高会丢失
  • 多个同级元素设置绝对定位时会重叠在一起
  • 没有设置偏移量时自身的位置没有变化
  • 原点是开启了绝对定位的第一个祖先元素,都没有就找根元素,实在找不到就把top和left设为0(原点本人理解为祖先元素左上角的那个点)
  • 父元素会出现高度塌陷问题(使用BFC不能解决,唯一解决方法就是重新给父元素增加高宽)

偏移量(必须开启定位后才可以设置便宜):

top:元素距离原点上方的距离,前面加一个负号则为相反方向

**right:元素距离原点右方的距离,前面加一个负号则为相反方向
**

**bottom:元素距离原点下方的距离,前面加一个负号则为相反方向
**

**left:元素距离原点左方的距离,前面加一个负号则为相反方向
**

单位:px,%(基于父元素,设置了具体值的设置%才有效果,块父元素宽度默认100%)

布局

块元素并排排列:

  • 使用浮动(但是要解决父元素高度塌陷问题)
  • 把元素变成行内块(但是会出现间隙问题)

显示和隐藏的元素

  1. 先隐藏掉元素(使用隐藏元素样式)

  2. 在显示出元素(给他的兄弟【建议】或父给予一个伪类选择器,鼠标移入效果,移入时隐藏显示)

虎哥小知识

脱离文档流的除了浮动,还有绝对定位

我告诉你啊,杀马特。到掘金了,指定没有你好果汁吃啊,你记住了啊!