margin兼容之margin-top的传递问题(面试题)
问题:margin的兼容margin-top的传递
描述:大盒子里面嵌套小盒子,给小盒子添加margin-top值,不但没有实现和大盒子之间的间距,反而传递到大盒子上,导致整体下移
解决兼容性问题:
- overflow:hidden解决margin-top的传递问题(此处不是溢出隐藏)
- padding-top:1px 这种方法会影响最后实际的高度，需要再高度height的基础上减掉,才不会影响最后实际的高度
- border-top:1px 这种方法会影响最后实际的高度,需要再高度height的基础上减掉,才不会影响最后实际的高度
- 给子元素的margin-top值改为给父元素加padding-top这样就避免了使用margin-top值导致的传递问题(转移了我们的目标对象)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 /* .wrap{
12 width: 300px;
13 height: 300px;
14 background-color:#f90;
15 } */
16 .inner{
17 margin-top: 20px;
18 width: 200px;
19 height: 200px;
20 background-color: aqua;
21 }
22 /* ===========================无情分割线======================= */
23 /*解决方法1*/
24 /* .wrap{
25 width: 300px;
26 height: 300px;
27 background-color:#f90;
28 overflow: hidden;
29 } */
30 /*解决方法2*/
31 /* .wrap{
32 width: 300px;
33 height: 299px;
34 background-color:#f90;
35 padding-top: 1px;
36 } */
37 /* 解决方法3 */
38 .wrap{
39 width: 300px;
40 height: 299px;
41 background-color:#f90;
42 border: 0;
43 border-top-width: 1px;
44 border-style: solid;
45 border-color: transparent;
46 }
47 /* 解决方法4 */
48 /* .wrap{
49 width: 300px;
50 height: 300px;
51 background-color:#f90;
52 padding-top: 20px;
53 }
54 .inner{
55 /* margin-top: 20px; */
56 width: 200px;
57 height: 200px;
58 background-color: aqua;
59 } */
60 </style>
61 </head>
62 <body>
63 <div class="wrap">
64 <div class="inner"></div>
65 </div>
66 </body>
67 </html>
赞 (0)