非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.7 盒子模型-margin上下传递问题

╰+哭是因爲堅強的太久メ 2024-03-26 21:04 19阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.7 盒子模型-margin上下传递问题
             *   *  10.7.1 上下margin的传递

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

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

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

##### 10.7 盒子模型-margin上下传递问题 #####

###### 10.7.1 上下margin的传递 ######

*  margin-top传递
    
     *  如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
        
            <!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 {
                      
                  width: 300px;
                  height: 300px;
                  background-color: #f00;
            
                  /* border: 1px solid rgba(0,0,0,0); */
                  /* overflow: auto; */
                }
            
                .container {
                      
                  width: 100px;
                  height: 100px;
                  background-color: #0f0;
            
                  /* 左右是不会传递 */
                  /* margin-left: 30px; */
            
                  margin-top: 100px;
                }
              </style>
            </head>
            
            <body>
            
              <div class="box">
                <div class="container"></div>
              </div>
            
            </body>
            
            </html>
        
        ![在这里插入图片描述][df4da3a6655b464eb29afab1e277cf6a.png_pic_center]
 *  margin-bottom传递
    
     *  如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
        
            <!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 {
                      
                  width: 300px;
                  /* height: auto; */
                  background-color: #f00;
                }
            
                .container {
                      
                  width: 100px;
                  height: 100px;
                  background-color: #0f0;
            
                  margin-bottom: 100px;
                }
              </style>
            </head>
            <body>
              
              <div class="box">
                <div class="container"></div>
              </div>
            
              <div>哈哈哈哈哈啊</div>
            
            </body>
            </html>
        
        ![在这里插入图片描述][bfff7792c07444699f99947adeb16120.png_pic_center]
 *  如何防止出现传递问题？
    
     *  给父元素设置padding-top\\padding-bottom
        
        ![在这里插入图片描述][2c072523df2b4112b2b37f3988bdc151.png_pic_center]
     *  给父元素设置border
        
        ![在这里插入图片描述][76d1b76fa9a2460badfd01ba08b9b30a.png_pic_center]
     *  触发BFC: 设置overflow为auto
        
        ![在这里插入图片描述][76df6dce1c2c473a98526af500efc072.png_pic_center]
 *  建议
    
     *  margin一般是用来设置兄弟元素之间的间距
     *  padding一般是用来设置父子元素之间的间距

[a15d653e76364e8bb037dddbd3279eef.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9aa3de69e3cd499f94cad94511370139.png
[df4da3a6655b464eb29afab1e277cf6a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ac54b95c4ad240d395751a8edf8d674b.png
[bfff7792c07444699f99947adeb16120.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/16207440afbc41db85890e17f3352abd.png
[2c072523df2b4112b2b37f3988bdc151.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c23b23f10bbb41908f69576ed02b3ad2.png
[76d1b76fa9a2460badfd01ba08b9b30a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b637225aff48439495bf74f3b4d28ac7.png
[76df6dce1c2c473a98526af500efc072.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/24c5770447c54b0a9fe842257afc57ea.png