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

2024-10-21 06:45:26

一，relative、absolute 的区别

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

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

二，水平居中

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

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

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

inline 元素：设置line-height: height
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>>

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

最新文章

热门文章