非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.9 盒子模型-块级元素的水平居中margin-auto

╰半夏微凉° 2024-03-26 21:04 6阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.9 盒子模型-块级元素的水平居中margin-auto

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

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

#### 10 CSS盒子模型 ####

##### 10.9 盒子模型-块级元素的水平居中margin-auto #####

<!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>
        body {
          
          margin: 0;
          padding: 0;
    
          /* inline-level box */
          /* 行内级: 行内非替换元素span/a 行内替换元素 img input inline-block */
          /* text-align: center; */
        }
    
        .container {
          
          width: 800px;
          height: 150px;
          background-color: #0f0;
        }
    
        .box {
          
          width: 100px;
          height: 100px;
          background-color: #f00;
    
          margin: 0 auto;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="box"></div>
      </div>
    
    </body>
    
    </html>

渲染效果

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

[c06ee8293fa84ca78b62db0d67e4136e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6c26f98b85c0489fb0d0532efb6c1f52.png
[5482cfa66e934eb9ae7dd1a8aae9fb5f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e2f07c7dd8544ccfa35c6c36b91e7668.png