元素外边距溢出(塌陷)

2018/03/06 16:17
阅读数 10

想要达到这样的效果:

如果是实现这样的源代码:

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>demo</title>  
  6.         <style type="text/css">  
  7.             .big{  
  8.                 height:300px;  
  9.                 width:500px;  
  10.                 background:#EEEEEE;  
  11.             }  
  12.             .small{  
  13.                 height:100px;  
  14.                 width:100px;  
  15.                 background:red;  
  16.                 margin-top:50px;  
  17.             }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div class="big">  
  22.             <div class="small">  
  23.                   
  24.             </div>  
  25.         </div>  
  26.     </body>  
  27. </html>  

会出现这样的效果:


加了margin设置导致了溢出问题。解决方式有两个:

①.给div加边框border;

 

[html]  view plain  copy
 
  1. .big{  
  2.     height:300px;  
  3.     width:500px;  
  4.     background:#EEEEEE;  
  5.     border:1px solid black;  
  6. }  

效果:

②.使用overflow:hidden;隐藏溢出

 

[html]  view plain  copy
 
  1. .big{  
  2.     height:300px;  
  3.     width:500px;  
  4.     background:#EEEEEE;  
  5.     overflow:hidden;  
  6. }  

效果:

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部