非零基础自学前端最后一遍一 HTML+CSS 15 CSS元素定位 15.1 布局-元素定位-标准流的理解

雨点打透心脏的1/2处 2024-03-22 16:01 52阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  15 CSS元素定位
         *   *  15.1 布局-元素定位-标准流的理解
             *   *  15.1.1 标准流（Normal Flow）
                 *  15.1.2 margin-padding位置调整

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

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

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

##### 15.1 布局-元素定位-标准流的理解 #####

###### 15.1.1 标准流（Normal Flow） ######

*  默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
    
     *  从左到右、从上到下按顺序摆放好
     *  默认情况下，互相之间不存在层叠现象

![在这里插入图片描述][cf3caf4a2be24ee6885b255d7f96f999.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>
        .box {
         
          display: inline-block;
          width: 200px;
          height: 200px;
          background-color: aqua;
        }
      </style>
    </head>
    
    <body>
    
      <div>div元素</div>
      <span>span元素</span>
      <img src="../images/gouwujie01.jpg" alt="">
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

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

###### 15.1.2 margin-padding位置调整 ######

*  在标准流中，可以使用margin、padding对元素进行定位
    
     *  其中margin还可以设置负数
 *  比较明显的缺点是
    
     *  设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
     *  不便于实现元素层叠的效果
 *  如果我们希望一个元素可以跳出标准流,单独的对某个元素进行定位呢?
    
     *  我们可以通过position属性来进行设置;

[4bcedab23cfa4fde95ca0bffa46ad655.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6a19f01fcfba4151a1ddab87f6fa11ff.png
[cf3caf4a2be24ee6885b255d7f96f999.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/599054eaf65c482ba49c00a85046e3b1.png
[b8f8ec3909404037ad0153fbfce6407c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a3383c8c4f584aa3a6ed9e7b41b866f5.png