当前位置: 首页 > news >正文

元素外边距溢出(塌陷)

想要达到这样的效果:

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

 

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

效果:

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

相关文章:

  • TCP/IP学习(29)——kernel如何选择socket接收数据
  • Core Data 的简单使用
  • 配置防盗链,访问控制
  • 过完年想要元气满满?赶紧看看这些VR AR大事件回个血
  • RocketMq部署(四)
  • oracle时间操作结合to_char和to_date使用
  • VS2017 Debug断点后显示UTF8字符串
  • 拥抱.NET Core系列:MemoryCache 缓存选项
  • 树莓派打造无线扫描仪.
  • 用“世界上最好的编程语言”制作的敲诈者木马揭秘
  • Docker容器部署时区问题的坑
  • 【转】Tesla Model S的设计失误
  • JavaScript 奇技淫巧
  • 测试经验1_2016-2017
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • 自己简单写的 事件订阅机制
  • $translatePartialLoader加载失败及解决方式
  • [nginx文档翻译系列] 控制nginx
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • Django 博客开发教程 8 - 博客文章详情页
  • docker容器内的网络抓包
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • miaov-React 最佳入门
  • SAP云平台里Global Account和Sub Account的关系
  • Spring声明式事务管理之一:五大属性分析
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 高性能JavaScript阅读简记(三)
  • 基于组件的设计工作流与界面抽象
  • 计算机常识 - 收藏集 - 掘金
  • 你不可错过的前端面试题(一)
  • 前端存储 - localStorage
  • 以太坊客户端Geth命令参数详解
  • Java总结 - String - 这篇请使劲喷我
  • Python 之网络式编程
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • (007)XHTML文档之标题——h1~h6
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (附源码)ssm学生管理系统 毕业设计 141543
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (免费领源码)python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐
  • (三)docker:Dockerfile构建容器运行jar包
  • (十八)三元表达式和列表解析
  • (转)Oracle 9i 数据库设计指引全集(1)
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • .NET CORE 2.0发布后没有 VIEWS视图页面文件
  • .net Signalr 使用笔记
  • .NET 反射 Reflect
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .Net 中Partitioner static与dynamic的性能对比
  • .NET企业级应用架构设计系列之应用服务器
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • .vimrc php,修改home目录下的.vimrc文件,vim配置php高亮显示
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题