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 属性的值
4.js盒模型
BFC部分
什么是BFC？
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；
如何触发BFC？
在box属性值为这些的情况下，都会让所属的box产生BFC。
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法：
overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
BFC的原理？(面试可不说，但要理解)
- BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
- BFC的区域不会与float重叠。
- 计算BFC的高度时，浮动元素也被计算在内。
BFC的应用
可以用来自适应布局
1. 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度 不相等。
2.给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响
BFC常见面试题？
1.什么是边距重叠？
边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
2.什么情况下会发生边距重叠？
1.父子关系的边距重叠
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
解决方法：给父元素添加 overflow：hidden这样父元素就变为 BFC，不会随子元素产生外边距
2. 同级兄弟关系的重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个