一、CSS盒模型

1、概念

CSS 盒子模型本质上是一个盒子。封装了周围的 HTML 元素。它包括：外边距(margin)、边框(border)、内边距(padding)、实际内容(element)四个属性。

CSS盒模型有两种：标准模型 + IE模型

2、区别

标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin IE盒子模型：盒子总宽度/高度 = width/height + margin

3、如何设置这两种标准

/*语法：
 */box-sizing: content-box; 
/*浏览器默认设置
 */box-sizing: border-box;
/*IE模型设置
*//*
实例*/.child 
{
  width: 100%;
  height: 100px;
  background: #336667;
  margin-top: 10px;
  box-sizing: content-box;
}

二、外边距合并

只有 margin 上下的边距会合并，左右的边距不会合并

实例1：

父元素里面嵌套了一个子元素，已知子元素的高度是 100px，子元素与父元素的上边距是 10px，计算父元素的实际高度。

CSS:

.parents
 {
   width: 100px;
   background: #FF9934;
   overflow: hidden
/*有这句话parents高度是110px*/
}.
child
 {
  width: 100%;
  height: 100px;
  background: #336667;
  margin-top: 10px;
}

HTML:

<div class='parents'>
  <div class='child'><div>div>

以上代码：父元素不加 overflow: hidden，则父元素的实际高度为 100px； 如加上 overflow: hidden 父元素高度为  110px，给父元素创建了  BFC，块级格式化上下文。

实例2

相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距(margin) 相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

CSS

*{margin:0;padding:0;}
            #div1
{
                border: 3px solid yellow;
                height: 200px;
                margin-top: 20px; 
}
            #div2{
                height: 100px;
                background: blue;
                margin-top: 20px;
            }
            #div3
{
                height: 50px;
                width: 50%;
                background: green;
                margin-top: 50px;
}

HTML

<div id="div1">
     <div id="div2">
           <div id="div3">
           div>
     div>div>

因为 div2 与div3的外边距是相邻的(是父子关系的相邻)，当div2的  margin-top 为 20, div3 的 margin-top 也为 50,此时 div2与 div3 的外边距会合并，就是折叠。 而 div1 与 div2 的外边距不是相邻的(div1有border)，它们便不会折叠。

实例3

参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

        <div style="height:90px;
margin-bottom:99px;
width:90px;
 background-color: red;
">Xdiv>
        <div style="height:90px;
margin-top:100px;
width:90px;
 background-color: blue;
">Ydiv>

参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。

        <div style="height:90px;
margin-bottom:-10px;
width:90px;
 background-color: red;
">Xdiv>
        <div style="height:90px;
margin-top:-30px;
width:70px;
 background-color: blue;
">Ydiv>

参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

三、BFC(块级格式化上下文)

BFC 是一个独立的布局环境。可以理解为一个区域，在这个区域内的元素无论如何布局排版，都不影响区域外的元素。

父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

1、BFC 原理：

1)、内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；

2)、Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；

3)、每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，(对于从左到右的格式化，否则相反)。即使存在浮动也是如此；

4)、BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；

5)、BFC 的区域不会与 float Box 重叠(清浮动);

6)、计算 BFC 的高度时，浮动元素也参与计算。

2、触发 BFC 条件(即脱离文档流)

0)、根元素，即 HTML 元素(最大的一个 BFC )

1)、浮动( float 的值不为 none)

2)、绝对定位元素( position 的值为 absolute 或 fixed)

3)、行内块( display 为 inline-block )

4)、表格单元( display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )

5)、弹性盒( display为  flex 或  inline-flex )

6)、默认值。内容不会被修剪，会呈现在元素框之外(overflow 不为  visible)

3、 BFC使用场景

1)、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)

2)、避免元素被浮动元素覆盖

3)、可以让父元素的高度包含子浮动元素，清除内部浮动(原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内)

4)、去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠

四、IFC(行内格式化上下文)

1、IFC基本概念

2、IFC 原理(渲染规则|布局规则)：

(1)内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；

(2)这些 Box 之间的水平方向的 margin，border 和padding 都有效；

(3)Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线(baseline)对齐(默认，文本与图片对齐)，例：line-heigth 与 vertical-align。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。