博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
元素外边距溢出(塌陷)
阅读量:6236 次
发布时间:2019-06-22

本文共 649 字,大约阅读时间需要 2 分钟。

想要达到这样的效果:

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

 

[html] 
 
 
  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] 
 
 
  1. .big{  
  2.     height:300px;  
  3.     width:500px;  
  4.     background:#EEEEEE;  
  5.     border:1px solid black;  
  6. }  

效果:

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

 

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

效果:

转载于:https://www.cnblogs.com/huancheng/p/8514989.html

你可能感兴趣的文章
二叉树
查看>>
linux 文件搜索命令
查看>>
黄聪:登陆页优化
查看>>
黄聪:Python+NLTK自然语言处理学习(一):环境搭建
查看>>
leetcode110
查看>>
剑指Offer 10 斐波那契数列
查看>>
Ruby之基本数据类型(三)
查看>>
集合框架
查看>>
技术总结
查看>>
mysql基本操作
查看>>
redis设置最大内存上限对置换策略的解读
查看>>
IOS代码布局(一) UIView
查看>>
北大光华管理学院公开课北京站
查看>>
android 随手记 图片缓存
查看>>
HTTP请求协议中请求报文(Request Headers)跟响应报文(Response Headers)的简单理解...
查看>>
es7 class装饰器
查看>>
(转)dubbo远程调用细节
查看>>
zabbix——环境安装
查看>>
查阅API文档
查看>>
软件下载地址
查看>>