元素外边距溢出（塌陷）

想要达到这样的效果：

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

 

[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. }  

效果：

posted @ 2018-03-06 16:17  幻城love  阅读(718)  评论(0)  编辑  收藏  举报