css怎么把多个块合并,CSS外边距合并&块格式上下文
前言
之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。
问题
测试代码如下：
test* {
margin: 0;
padding: 0;
}
body {
max-width: 750px;
margin: 0 auto;
}
.div1 {
background: yellow;
height: 200px;
}
.div2 {
background: blue;
height: 200px;
}
.div2Child {
background: red;
height: 100px;
}
我是父div
子div设置了margin-top之后，父div也跟着一起margin-top了。
原因如下：
Margin Collapsing 外边距合并
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，或外边距合并。
外边距合并的3中基本原因：
1、相邻的元素
毗邻的两个兄弟元素之间的外边距会合并
2、块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在border, padding, inline part, block formatting context created, or clearance 来隔离第一个子元素的上边距，就会发送外边距合并现象。
如果块级父元素，不存在border, padding, inline content, height, min-height, max-height来隔离下边距，则会和最后一个子元素合并。
3、空块元素
如果存在一个空的块级元素，不存在 border、padding、inline content、height、min-height来隔离上下外边距，那么它的上下外边距将会合并。
当都为正数时，取两者中较大者。
当都为负数时，取绝对值较大者。
当一正一负时，取相加之和。
外边距设为0时，这些规则也仍旧生效。
BFC(Block Formatting Context 块格式化上下文)与元素外边距合并 :
当两个元素属于不同的BFC时，这两个元素的外边距不会合并。
但在同一个BFC内，两个相邻元素的外边距仍会合并。
Block Formatting Context 块格式化上下文
一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒模型出现的区域，也是浮动元素与其他元素进行交互的区域。
一个块格式化上下文由以下之一创建：
根元素或一些包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
display隐式创建的匿名表格列，包括table, table-row, table-row-group, table-header-group, table-footer-group (这些都是html的默认样式), or inline-table
具有overflow 且值不是 visible 的块元素，
display: flow-root
flex 项目
grid 项目
多列容器(column-count 和 column-width 不是 auto, 包括 column-count: 1的元素)
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
解决方案
知道了问题原因所在，以及了解了相关原理，就很好办了。
1、给div2设置border
为了不改变div2的大小，还需将设置 box-sizing为border-box将padding和border包含在定义的width和height之内
.div2 {
background: blue;
height: 200px;
border-top: 1px solid transparent;
box-sizing: border-box;
}
2、去掉div2Child的margin，改为设置div2的padding
.div2 {
background: blue;
height: 200px;
padding-top:50px;
box-sizing: border-box;
}
3、div2设置为内联元素
.div2 {
background: blue;
height: 200px;
display: inline-block;
width: 100%;
}
4、清除浮动
所有浮动元素包含在div2内，增加样式clearfix
.clearfix::before, .clearfix::after{
overflow: hidden;
display: table;
visibility: hidden;
content: '';
clear: both;
}
或者创建一个新的BFC，使其在不同的上下文中，不合并外边距。
5、给div2设置Position
.div2 {
background: blue;
height: 200px;
position: absolute;
width: 100%;
max-width: 750px;
}
6、给div2设置float，注意后面的元素需要clear浮动
.div2 {
background: blue;
height: 200px;
float: left;
width: 100%;
}
7、给div2设置display
.div2 {
background: blue;
height: 200px;
display: inline-block;
/*display: table;*/
width: 100%;
}
8、给div2设置flex
.div2 {
background: blue;
height: 200px;
display: flex;
flex-direction: column;
}
9、给div2设置overflow
.div2 {
background: blue;
height: 200px;
overflow: hidden;
}
万变不离其宗
参考
CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
CSS外边距合并(塌陷/margin越界)
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...
CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
CSS外边距合并问题
今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. ...
CSS 外边距合并。
CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
随机推荐
pyenv的安装和使用
1. 先安装crul和git sudo apt-get install curl git-core 2. 安装pyenv curl https://raw.github.com/yyuu/pyenv- ...
How Many Tables
How Many Tables Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Tot ...
sql 时间格式化
sql server2000中使用convert来取得datetime数据类型样式(全) 日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-0 ...
SQLSERVER数据库死锁与优化杂谈
死锁杂谈 当数据库死锁时,SqlServer会释放一个优先级较低的锁,让另一个事务运行:所以,即时去捕捉数据库死锁,是挺不容易的. 如果,数据库死锁比较长时间,那么死锁是可以被捕捉的. 可以用SqlS ...
JQuery实现旋转轮播图
css部分
设计模式之UML类图六大关系辨析【2】
六大关系:继承(extends).实现(Realization).依赖(use-a).关联(association).聚合(has-a).组合(强聚合)(Composition). 类与类之间的强弱关 ...
hdu4419
对于这类面积覆盖的题,大致就两点要注意的 1.同一把矩形放在笛卡尔坐标系上做 2.pushup函数要注意下细节:及在统计子区间和之前要先判断是否有子区间 用sum数组来保存区间被覆盖的情况,如果遇到多 ...
JQuery Easyui引入easyui-lang-zh_CN.js后出现乱码的问题解决方法
最近使用Easyui做项目,发现引入easyui-lang-zh_CN.js单元后页面会出现乱码,无论设置.还是Response都不能解决问题.用记事本打开easyui-lan ...
2017第八届蓝桥杯C/C++ B组省赛-等差素数列
标题:等差素数列 2,3,5,7,11,13,....是素数序列. 类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列. 上边的数列公差为30,长度为6. 200 ...
python matplotlib 画图
import numpy as np import matplotlib.pyplot as plt from pylab import * numpy 常用来组织源数据: 使用 plot 函数直接绘 ...