[面试仓库]CSS面试题汇总-定位篇

一,relative、absolute 的区别

  我们还是来说常见的地方。首先就是relative,absolute的区别:

  • relative是依据自身来定位的
  • absolute则是依据离其最近一层的定位元素来定位的。最近一层,指的就是包裹着它的最近的一层父元素或以上层级。如果没有定位元素,那么就依据body来定位

二,水平居中

  我们来按照元素的种类来区分:

  • inline 元素:设置text-align: center即可
  • block 元素:设置margin: auto即可
  • absolute 元素:设置left:50%;margin-left: -width的一半

三,垂直居中(在水平居中的基础上)

  1. inline 元素:设置line-height: height
  2. absolute 元素:
    • 如果知道尺寸:设置top: 50%;margin-top: -height的一半(left: 50%;的基础上)
    • 如果不知道尺寸:设置transform:translate(-50%,-50%)或者top,left,right,bottom都设置为0,然后margin: auto

四,其他居中方式

1,flex 布局

/*css*/
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*html*/
<div class="container">
    <div class="row">我是居中</div>
</div>>

  其他定位有关的问题,我会在此做出补充

上一篇:absolute与relative区别一


下一篇:position absolute和relative区别