深入理解margin塌陷和margin合并的解决方案


Posted in HTML / CSS onJune 26, 2021

前言

小问题总是被人视而不见,等遇到的时候又突然想不起来,所以我们需要经常总结,这可以帮助我们更好的记忆东西。今天我们来总结两个不起眼的小问题:margin塌陷和margin合并

margin塌陷

什么是margin塌陷

我们先来看个例子,然后引出什么是margin塌陷

需求:在父子元素中,通过marigin让父元素相对左边及顶部各距离100px,也让子元素相对于父元素左边和顶部各50px。

代码如下:

div.father{
    width: 200px;
    height: 200px;
    background-color: rgb(219, 68, 101);
    margin-left: 100px;
    margin-top: 100px;
}
div.father div.son{
    width: 100px;
    height: 100px;
    background-color: rgb(56, 248, 207);
    margin-left: 50px;
    margin-top: 50px;
}

代码看上去没有什么问题,看下效果

深入理解margin塌陷和margin合并的解决方案

惊奇的发现,结果出乎我们意料!水平方向的距离确实没问题,但是垂直方向上,明明子元素设置了margin-top距离顶部50px,按道理它会距离父元素顶部50px才对。

这种现象被称之为margin塌陷。但很多人可能都不太理解,为什么叫它塌陷?其实你可以这样理解,如上述例子,原本子元素要距离父元素顶部50px,现在没有了,也就是父元素的顶棚对子元素来说没有作用,相当于没有,相当于塌陷下来了。所以叫margin塌陷。

一句话总结:父子嵌套的元素垂直方向的margin取最大值。

但是有的时候我们不希望有这样的问题,那我们如何解决margin塌陷的问题呢?

答案是,我们可以通过触发BFC来解决!那是什么是BFC呢?

BFC

什么是BFC和作用

Block Formatting Context,中文叫块级格式上下文。

CSS将HTML的每一个元素都当成一个盒子,而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者叫渲染规则,它能根据这个规则将写的HTML元素绘制出来,但是我们可以通过一些特定的手段触发BFC,让其所符合的语法规则和原来的语法规则有点不一样。

也就是触发BFC之后,特定的盒子会遵循另一套语法规则。

BFC听起来挺神奇,能改变一个盒子的语法规则,那到底改变了多少呢,其实也没改变多少。可能千分之一都不到。也就是它只改变了一点点。但是就是这一点点它把解决了margin塌陷和margin合并的问题

如何触发BFC

小结触发BFC方法:

  • float属性为left/right
  • overflow为hidden/scroll/auto
  • position为absolute/fixed
  • display为inline-block/table-cell/table-caption

有些人会想,有这几多方式触发BFC,那用哪种方式好一些? 看具体情况,个人认为一个原则:针对需求,看哪个触发方式没有影响就用那个

下面来试试看

解决margin塌陷的问题

如下通过overflow: hidden触发bfc

div.father{
    width: 200px;
    height: 200px;
    background-color: rgb(219, 68, 101);
    margin-left: 100px;
    margin-top: 100px;
    overflow: hidden;/* 触发bfc */  
}
div.father div.son{
    width: 100px;
    height: 100px;
    background-color: rgb(56, 248, 207);
    margin-left: 50px;
    margin-top: 50px;
}

结果如下

深入理解margin塌陷和margin合并的解决方案

理想的结果

问题已经解决!

margin合并

什么是margin合并

还是来看个例子,把两个兄弟块元素,一个设置下外边距100px,一个设置上外边距100px,让两个元素相距200px。

.one{
    background-color: pink;
    height: 20px;
    margin-bottom: 100px;
}
.two{
    background-color: purple;
    height: 20px;
    margin-top: 100px;
}

结果如下

 深入理解margin塌陷和margin合并的解决方案

我们发现这两个元素之间,他们的margin-bottom和margin-top合并了,并且显示的是较大值。这种现象被称为margin合并。解决的方式也是通过触发bfc来解决

解决margin合并

.one {
    background-color: pink;
    height: 20px;
    margin-bottom: 100px;
}
.wrap{
    /* 触发bfc */
    overflow: hidden;
}
.wrap .two {
    background-color: purple;
    height: 20px;
    margin-top: 100px;
}

结果如下:

 深入理解margin塌陷和margin合并的解决方案

解决问题!但是一般不这么解决,为什么?

因为margin合并和margin塌陷不一样,margin塌陷只添加了CSS,margin合并除了添加CSS,还修改了HTML结构。我们知道一般html结构是不能乱改动的,所以我们通过数学计算来解决这各margin合并的问题。比如上面的例子,我们只要设置前面元素的margin-bottom为200px或者后面元素的margin-top为200px即可

到此这篇关于深入理解margin塌陷和margin合并的解决方案的文章就介绍到这了,更多相关margin塌陷和margin合并内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
CSS几步实现赛博朋克2077风格视觉效果
You might like
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP函数常用用法小结
2010/02/08 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php类常量用法实例分析
2015/07/09 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
javascript json2 使用方法
2010/03/16 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue组件中的数据传递方法
2018/05/14 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python求解平方根的方法
2015/03/11 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
物流仓储计划书
2014/01/10 职场文书
教师个人自我评价范文
2014/04/13 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技