css使两个盒⼦并列_CSS的两种盒模型
概念
padding 内填CSS 盒模型本质上是⼀个盒⼦，盒⼦包裹着HTML 元素，盒⼦由四个属性组成，从内到外分别是：content 内容
content 内容、padding 内填外边距 margin
充、border 边框
border 边框、外边距 margin
盒模型的分类
W3C 盒⼦模型(标准盒模型)
IE 盒⼦模型(怪异盒模型)
两种盒模型的区别
宽度和⾼度的计算⽅式不同
标准盒模型：
width = content-width
height = content-height
borderbox怪异盒模型:
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
如何在CSS 设置这两个模型
标准盒模型：
box-sizing: content-box
怪异盒模型：
box-sizing: border-box
外边距合并
所谓外边距合并，指的是margin 合并，MDN是这样定义的
外边距合并。
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其⼤⼩是组合到其中的最⼤外边距，这种⾏为称为 外边距合并要注意的是，外边距合并只针对块级元素，⽽且是顶部或底部的外边距
外边距合并有下⾯⼏种情况
相邻兄弟元素
//HTML
<div class="up">我在上⾯</div>
<div class="down">我在下⾯</div>
//CSS
.up {
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 100px;
}
.down {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px;
}
⽗⼦元素
如果在块级⽗元素中，不存在上边框、上内补、inline content、清楚浮动这四个属性，(对于不存在上边框和上内补，也可以理解为上边框和上内补宽度为0)，那么这个块级元素和其第⼀个⼦元素的存在外边距合并，也就是上边距”挨到⼀起“，那么此时⽗元素展现出来的外边距，将会是⼦元素的margin-top 和⽗元素的margin-top 的较⼤值。
//HTML
<div class="parent">
<div class="child">我是⼉⼦</div>
</div>
//CSS
.parent {
width: 100px;
height: 200px;
background: red;
margin-top: 50px;
}
.child {
width: 50px;
height: 50px;
margin-top: 100px;
border: 1px solid blue;
}
那么这种外边距合并的情况怎么理解呢？请看下⼀个概念
BFC
⼀个 块格式化上下⽂（block formatting context）
块格式化上下⽂（block formatting context）是Web页⾯的可视化CSS渲染的⼀部分。它是块盒⼦的布局发⽣，浮动互相交互的区域。
具有 BFC 特性的元素可以看作是隔离了的独⽴容器，容器⾥⾯的元素不会在布局上影响到外⾯的元素，并且 BFC 具有普通容器所没有的⼀些特性。
通俗⼀点来讲，可以把 BFC 理解为⼀个封闭的⼤箱⼦，箱⼦内部的元素⽆论如何翻江倒海，都不会影响到外部。
触发 BFC：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
注意根元素就创建了个BFC
那么BFC ⼜有以下特点：
内部块级盒⼦垂直⽅向排列
盒⼦垂直距离由margin 决定，同⼀个BFC 盒⼦的外边距会重叠
BFC 就是⼀个隔离的容器，内部⼦元素不会影响到外部元素
BFC 的区域不会与float box叠加
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC 的⽤途：
清楚浮动
解决外边距合并
布局
看到这⾥相信⼤家都知道怎么解决外边距重合了，答案是: 将两个外边距重合的元素放在不同的BFC 容器中
看看上⾯的例⼦怎么解决外边距重合
相邻兄弟元素
//HTML
<div class="up">我在上⾯</div>
<div class="down">我在下⾯</div>
//CSS
.up {
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 100px;
}
.down {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px;
display: inline-block; // 触发BFC
}
// up和down两个元素处于不同的BFC ，外边距不重合
⽗⼦元素
/
/HTML
<div class="parent">
<div class="child">我是⼉⼦</div>
</div>
//CSS
.parent {
width: 100px;
height: 200px;
background: red;
margin-top: 50px;
overflow: hidden; // 触发⽗元素FBFC，取消上边距合并
}
.child {
width: 50px;
height: 50px;
margin-top: 100px;
border: 1px solid blue;
}
IFC
既然块级元素会触发BFC，那么内联元素会触发的则是IFC
仅包含内联级别元素时才会⽣成IFC 只有在⼀个块元素中仅包含
IFC原理：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。