1.盒模型的两种分类
标准模型:盒模型的宽高只是内容(content)的宽高
IE模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
我们可以用CSS3 的属性 box-sizing来选择使用哪种模型:
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
**
2.边距重叠问题**
如果两个盒子,上面的一个margin-bottom为20px,下面的一个margin-top为40px,那么他们会合并在一起,距离只有40px
3.边距重叠解决方案(BFC)*
BFC,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”,其中 Formatting Context 是一个决定如何渲染文档的容器
a.BFC的原理
内部的box会在垂直方向,一个接一个的放置
每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
计算bfc高度的时候,浮动元素也会参与计算
b.怎么取创建bfc
float属性不为none(脱离文档流)
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素
c.应用场景
自适应两栏布局(左浮动,右边元素开启bfc)
清除内部浮动 (父元素开启bfc)
防止垂直margin重叠
eg:利用bfc解决边框重叠问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top{
background: #0ff;
height:50px;
margin-bottom:20px;
}
.bottom{
height:50px;
margin-top:40px;
background: #ddd;
}
</style>
</head>
<body>
<section class="top">
margin-bottom:20px;
</section>
<div style="overflow:hidden">
<section class="bottom">
margin-top:40px;
</section>
</div>
</body>
</html>