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

标签：就是   display   设置   flex   布局   class   仓库   lan   ott   

一，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>>

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

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

标签：就是   display   设置   flex   布局   class   仓库   lan   ott   

原文地址：https://www.cnblogs.com/sweetytea/p/14660039.html