【CSS面试题】CSS定位/居中对齐方式

最新推荐文章于 2023-03-31 11:33:44 发布

Milk595

最新推荐文章于 2023-03-31 11:33:44 发布

阅读量384

点赞数

分类专栏：前端面试 CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107414834

版权

前端面试同时被 2 个专栏收录

55 篇文章 8 订阅

订阅专栏

CSS

26 篇文章 0 订阅

订阅专栏

1. absolute和relative分别依据什么定位？

Relative：依据自身定位，对外界元素不会有影响
Absolute: 依据最近的一层的定位元素定位

定位元素：

Absolute、relative、fixed、body

核心代码演示：

<style>
    body{
        margin:20px;
    }
    .relative{
        position: relative;
        width: 400px;
        height: 200px;
        border: 1px solid #ccc;
    }
    .absolute{
        position: absolute;
        width: 200px;
        height: 100px;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
    
     <p>absolute 和 relative 定位问题</p>
     <div class="relative">
         <div class="absolute">
             this is absolute
         </div>
     </div>

</body>

在这里插入图片描述
① 针对relative定位

  .relative{
        position: relative;
        width: 400px;
        height: 200px;
        border: 1px solid #ccc;
        
        top: 50px;
        left: 20px;

    }

在这里插入图片描述
依据自身元素定位，不会对外部元素有影响！

② 针对absolute定位：依据最近一层的定位元素定位

.absolute{
        position: absolute;
        width: 200px;
        height: 100px;
        border: 1px solid blue;

        top: 50px;
        left: 20px;
    }

在这里插入图片描述
去掉第一层的relative

在这里插入图片描述
第一层回归原始状态，第二层absolute依据最近一层定位：body

2. 居中对齐有哪些实现方式?

- 水平居中

inline元素:text-align:center;
block元素：margin:auto
absolute元素：left:50% + margin-left负值 (必须知道子元素的宽度才可行)

核心代码：
初始化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .container{
        border:1px solid #ccc;
        margin: 10px;
        padding: 10px;
    }
    .item{
        background-color: #ccc;
    }

    .container-1{

    }

    .container-2 .item{
        width: 500px;
    }

    .container-3{
        position: relative;
        height: 100px;
    }
    .container-3 .item{
        width: 300px;
        height: 100px;
        position: absolute;
    }
    </style>
</head>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>

    <div class="container container-2">
        <div class="item">
            this is block item
        </div>
    </div>

    <div class="container container-3">
        <div class="item">
             this is absolute item
        </div>
    </div>

</body>
</html>

在这里插入图片描述
行内元素水平居中对齐：

 .container-1{
        text-align: center;
    }

在这里插入图片描述
块级元素水平居中对齐：

 .container-2 .item{
        width: 500px;
        margin: auto;
    }

在这里插入图片描述
针对absolute情况：

  .container-3 .item{
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
    }

在这里插入图片描述

    .container-3 .item{
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%; /*移动整个父元素的50%,到达父元素的中轴上*/
        margin-left: -150px;
    }

在这里插入图片描述
2. 垂直居中

inline元素：line-height的值等于height值
absolute元素：top:50% + margin-top负值 (必须知道子元素的高度才可行)
absolute元素：transform（-50%，-50%）
absolute元素：top,left,bottom,right = 0 + margin: auto

核心代码演示：

  <style>
    .container{
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
        height: 200px;
    }
    .item{
        background-color: #ccc;
    }

    .container-1{
        text-align: center;
    }
    .container-2{
        position: relative;
    }
    .container-2 .item{
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
    }

    .container-3{
        position: relative;
    }
    .contianer-3 .item{
        width: 200px;
        height: 80px;
        position: absolute;
    }

    .container-4{
        position: relative;
    }
    .container-4 .item{
        width: 100px;
        height: 50px;
        position: absolute;
    }
    </style>
</head>
<body>
      
     <div class="container container-1">
         <span>一段文字</span>
     </div>

     <div class="container container-2">
          <div class="item">
                this is item
          </div>
     </div>

     <div class="container container-3">
          <div class="item">
                this is item
          </div>
     </div>

     <div class="container container-4">
         <div class="item">
                 this is item
         </div>
     </div>

</body>

效果：

在这里插入图片描述
inline元素：line-height的值等于height值

    .container-1{
        text-align: center;
        line-height: 200px;
        height: 200px;
    }

在这里插入图片描述
absolute元素：top:50% + margin-top负值 (必须知道子元素的高度才可行)

  .container-2 .item{
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -50px;
    }

在这里插入图片描述
absolute元素：transform（-50%，-50%）

  .container-3 .item{
        width: 200px;
        height: 80px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

在这里插入图片描述
终极解决方案：
absolute元素：top,left,bottom,right = 0 + margin: auto

    .container-4 .item{
        width: 100px;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

在这里插入图片描述

Milk595

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS面试题】CSS定位/居中对齐方式

1. absolute和relative分别依据什么定位？Relative：依据自身定位，对外界元素不会有影响Absolute: 依据最近的一层的定位元素定位定位元素：Absolute、relative、fixed、body核心代码演示：<style> body{ margin:20px; } .relative{ position: relative; width: 400px; heigh
复制链接

扫一扫