margin外边距合并的问题
来源:互联网 发布:java时间转化为毫秒 编辑:程序博客网 时间:2024/05/18 02:51
原文地址: https://my.oschina.net/huskydog/blog/749629
在我初学css的时候,关于css盒模型的外边距合并问题,迷惑了我很久。在写demo的时候,我只是尽量避免两个div外边距合并,怕出现各种各样匪夷所思的bug。
工作不久,经过几个项目的洗礼,这个以前让我迷惑的问题,终于有了深刻的理解。
我对其总结如下:
一、当一个div在另一个div里,两个div都有margin的属性,想让这两个div不出现外边距合并的问题,必须给外层div添加border属性或者overflow:hidden属性;如果允许其出现外边距合并,内层div始终保持原位置,而外层div的margin属性会取两者的最大值。
例: 1.不允许出现外边距合并,给外层div添加overflow:hidden或border属性:外层盒子margin-top为100px,内层盒子为50px。
2.允许出现外边距合并:内层div始终保持原位置不变,外层div的margin去两者中最大值:
二、当两个div不存在嵌套关系时,不管是否有border或者overflow属性时,两者始终会存在外边距合并问题。
例:1.第一个div有margin-bottom:100px,第二个为margin-top:50px, 两者间距最终取100px
2.第一个div 由margin-bottom:100px, 第二个为margin-top:150px,两者间距最终取150px
总结:在实际项目中,如果对外边距合并理解不透彻而又不想因为css盒模型的外边距合并问题困扰,可以在不影响布局的问题下,可以添加overflow:hidden属性或者跟透明的border;如无法避免外边距合并问题,谨记两者margin取最大值就好了。
- margin外边距合并的问题
- margin 外边距合并问题
- margin外边距合并问题
- margin外边距合并
- 外边距margin的合并原理
- margin外边距合并问题以及解决方式
- Margin的垂直外边距问题
- margin详解垂直外边距合并
- 外边距合并问题
- 垂直外边距合并--CSS的Margin属性:详解margin属性
- 垂直外边距合并--CSS的Margin属性:详解margin属性
- 垂直外边距合并--CSS的Margin属性:详解margin属性
- 垂直外边距合并--CSS的Margin属性:详解margin属性
- CSS外边距合并的问题
- 关于CSS 外边距合并的问题
- CSS外边距合并的问题
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题
- css中margin外边距合并问题讲解及实例演示
- 字节序 -- 大端和小端
- react 简单的发布项目
- EntiryFramework中事务操作(二)TransactionScope
- Elasticsearch 安装与启动
- js中将字符串转换成json对象的三种方式
- margin外边距合并的问题
- HYSBZ 2251 外星联络
- sizeThatFits and sizeToFit
- scikit-learn SVM
- 解决VS2013项目过期后调试时弹出提示对话框问题
- android 用post方式上传图片到服务器
- 将string转换成char* (转)
- 2016我的博客和工作总结
- Elasticsearch 文件目录解释