精通CSS盒模型

什么是CSS盒模型

每一个html元素咱们能够认为表示为一个小盒子。一个盒子里面有边框+内边距+内容组成。这就是所谓的盒模型。

基本概念：标准模型+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