盒模型 BFC

一  盒模型

1.什么是盒模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成

2.盒模型分为两种

        标准盒模型    怪异盒模型     

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）
3    盒模型的转换

怪异盒模型转标准盒模型:  box-sizing:content-box; 将采用标准模式的盒子模型标准
标准盒模型转怪异盒模型box-sizing:border-box; 将采用怪异模式的盒子模型标准
      box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

二  BFC

 1.什么是BFC

                BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

      如何触发BFC？

•  overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

BFC的原理？(面试可不说，但要理解)

• BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
• BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
• BFC的区域不会与float重叠。
• 计算BFC的高度时，浮动元素也被计算在内

BFC的应用

        a.可以用来自适应布局

                利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响

        b.可以清除浮动

                父元素加overflow:hidden/auto,变BFC

   2.什么是边距折叠

        a.  两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

        b.有两种边距重叠的情况

• 父子关系的边距重叠:       
• 同级兄弟关系的重叠：