CSS学习笔记(一)-11.盒子模型-嵌套盒子外边距的塌陷

嵌套盒子，希望内部盒子与外部盒子之间有一个间隔距离。

 

1.内部盒子使用margin-top，变换的却是2个盒子一起变动。原因后续补充。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 12:48:08
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 12:53:56
 7  * @Description: 
 8  * @FilePath: \css\嵌套块元素存执外边距的塌陷.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>嵌套块元素存执外边距的塌陷</title>
18     <style>
19         .father {
20             width: 400px;
21             height: 400px;
22             background-color: pink;
23         }
24         
25         .son {
26             width: 200px;
27             height: 200px;
28             background-color: blue;
29             margin-top: 50px;
30         }
31     </style>
32 </head>
33 
34 <body>
35     <div class='father'>
36         <div class='son'></div>
37     </div>
38 </body>
39 
40 </html>
View Code

演示图如下：

2.如果父级盒子也设置呢？效果相同。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 12:48:08
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 12:58:25
 7  * @Description: 
 8  * @FilePath: \css\嵌套块元素存执外边距的塌陷.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>嵌套块元素存执外边距的塌陷</title>
18     <style>
19         .father {
20             width: 400px;
21             height: 400px;
22             background-color: pink;
23             margin-top: 60px;
24         }
25         
26         .son {
27             width: 200px;
28             height: 200px;
29             background-color: blue;
30             margin-top: 50px;
31         }
32     </style>
33 </head>
34 
35 <body>
36     <div class='father'>
37         <div class='son'></div>
38     </div>
39 </body>
40 
41 </html>
View Code

要解决这个问题的方法有一下三种：

1.为父元素定义一个上边框

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 12:48:08
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 13:01:40
 7  * @Description: 
 8  * @FilePath: \css\嵌套块元素存执外边距的塌陷.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>嵌套块元素存执外边距的塌陷</title>
18     <style>
19         .father {
20             width: 400px;
21             height: 400px;
22             background-color: pink;
23             margin-top: 30px;
24             border-top: 1px solid transparent;
25         }
26         
27         .son {
28             width: 200px;
29             height: 200px;
30             background-color: blue;
31             margin-top: 50px;
32         }
33     </style>
34 </head>
35 
36 <body>
37     <div class='father'>
38         <div class='son'></div>
39     </div>
40 </body>
41 
42 </html>
View Code

 

 

 2.为父元素定义上内边距

padding: 1px;

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 12:48:08
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 13:05:01
 7  * @Description: 
 8  * @FilePath: \css\嵌套块元素存执外边距的塌陷.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>嵌套块元素存执外边距的塌陷</title>
18     <style>
19         .father {
20             width: 400px;
21             height: 400px;
22             background-color: pink;
23             margin-top: 30px;
24             /* border-top: 1px solid transparent;
25              */
26             padding: 1px;
27         }
28         
29         .son {
30             width: 200px;
31             height: 200px;
32             background-color: blue;
33             margin-top: 50px;
34         }
35     </style>
36 </head>
37 
38 <body>
39     <div class='father'>
40         <div class='son'></div>
41     </div>
42 </body>
43 
44 </html>
View Code

 

 

 3.为父元素添加overflow:hidden.

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 12:48:08
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 13:06:17
 7  * @Description: 
 8  * @FilePath: \css\嵌套块元素存执外边距的塌陷.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>嵌套块元素存执外边距的塌陷</title>
18     <style>
19         .father {
20             width: 400px;
21             height: 400px;
22             background-color: pink;
23             margin-top: 30px;
24             /* border-top: 1px solid transparent;
25              */
26             /* padding: 1px;
27              */
28             overflow: hidden;
29         }
30         
31         .son {
32             width: 200px;
33             height: 200px;
34             background-color: blue;
35             margin-top: 50px;
36         }
37     </style>
38 </head>
39 
40 <body>
41     <div class='father'>
42         <div class='son'></div>
43     </div>
44 </body>
45 
46 </html>
View Code

 

 

 

其他方法：浮动，固定，绝对定位的盒子不会有塌陷问题。

posted @ 2021-07-13 13:08  kaer_invoker  阅读(191)  评论(0)    收藏  举报