什么是CSS盒模型

基本概念：标准模型+IE模型

盒模型细分成标准模型和IE模型两种模式，两者差别就是划定界限不一样。

主要还是浏览器解析盒模型标准各不一样引起的。浏览器默认盒子应该标准模型，而IE则认为边框+内边距+内容才算的是盒模型。

所以为了解决这矛盾，文档需要声明DOCTYPE类型，这样所有的浏览器都会把盒模型解释为b标准盒模型

标准模型和IE模型区别

• content-box（标准盒模型）
  • width = 内容的宽度
  • height = 内容的高度
• border-box（IE模型）
  • width = border + padding + 内容的宽度
  • height = border + padding + 内容的高度

CSS如何设置这两种模型

有一天，有人觉得IE模型和标准模型各各的优点，所以CSS3规范有新出box-size属性来转换两者模式（默认标准模型）

然而你以为这样就结束了吗？并没有。

当你写复杂点页面时候又会遇到一些常见的问题：

• 上下两个相邻盒子的margin会发生重叠
• 浮动盒子和普通盒子重叠
• 盒容器里面的子元素影响到外面的元素。
• 计算浮动盒子高度为零。

为了解决这些问题，我们就要触发BFC，来处理这些问题：

什么是BFC原理

块级格式化上下文

怎么触发 BFC

• float不为none
• position不为static/relative
• display的值为inline-block、table-cell、table-caption、flex
• overflow的值不为visible

上下两个相邻盒子的margin会发生重叠

解决方法：

浮动盒子和普通盒子重叠

浮动的盒子会在文档流的盒子上面，主要是浏览器识别不到浮动盒子，也就计算不到高度，解决方法，给盒子加个属性触发BFC