非零基础自学前端最后一遍一 HTML+CSS 15 CSS元素定位 15.3 布局-元素定位-相对定位的使用

痛定思痛。 2024-03-22 16:01 51阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  15 CSS元素定位
         *   *  15.3 布局-元素定位-相对定位的使用
             *   *  15.3.1 相对定位 - relative
                 *  15.3.2 相对定位练习

![在这里插入图片描述][d8d46d1f2f374d6d8b7e22008fd65b6d.png_pic_center]

#### 一 HTML+CSS ####

#### 15 CSS元素定位 ####

##### 15.3 布局-元素定位-相对定位的使用 #####

###### 15.3.1 相对定位 - relative ######

*  元素按照normal flow布局
 *  可以通过left、right、top、bottom进行定位
    
     *  定位参照对象是元素自己原来的位置
 *  left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
    
    ![在这里插入图片描述][99e46fa8443642e7a1d42c72ce2776a8.png_pic_center]
 *  相对定位的应用场景
    
     *  在不影响其他元素位置的前提下，对当前元素位置进行微调

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .text {
         
          /* margin-left: 30px; */
    
          /* relative: 相对定位 */
          position: relative;
          left: -30px;
          top: -50px;
          /* bottom: 50px;
          right: 30px; */
        }
      </style>
    </head>
    
    <body>
    
      <span>我是span元素</span>
      <strong class="text">我是strong元素</strong>
      <img src="../images/kobe01.jpg" alt="">
      <div>我是div元素</div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][0de4dc83fc7d4b90baf9c0e4da8f985d.png_pic_center]

没毛病，left 为负值，往左边走，top为负值，往上面走。

###### 15.3.2 相对定位练习 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div {
         
          font-size: 20px;
        }
    
        span {
         
          font-size: 12px;
          position: relative;
          bottom: 8px;
        }
      </style>
    </head>
    
    <body>
    
      <div>
        3<span>2</span> + 2<span>3</span> = 17
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][34f958dd768f4c66ab60a49ac8393b6d.png_pic_center]

[d8d46d1f2f374d6d8b7e22008fd65b6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/79d854b83ba94a638f1ee920a1fb987e.png
[99e46fa8443642e7a1d42c72ce2776a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0cfced94de154d68bc646f00d455260a.png
[0de4dc83fc7d4b90baf9c0e4da8f985d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/975a6a95951040ecabef6e5c4f900e42.png
[34f958dd768f4c66ab60a49ac8393b6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cdc19dcadbb9429c859126ee6d0fbd83.png