box-sizing布局学习笔记

首先学习box-sizing布局之前，来了解一下css盒子模型（Box Model）

---

盒子模型（Box Model）

---

一般来说，css盒子模型有两种模式：

• W3C的标准模型 相当于 box-sizing：content-box

---

我们对元素设置的宽度和高度就是内容（content）的宽度和高度，也就是内盒子的宽度；外盒子的宽度包括：content+padding+border的

---

• IE的传统模型 相当于box-sizing：border-box

---

这个模型下，我们设置的宽度和高度是包括：content+padding+border的，此时这个宽度和高度，相当于我们在W3C模型下面的宽度和高度。其内容的宽度比我们设置的宽度要小的。

---

box-sizing：content-box

---

默认值，标准的盒模型，width和height只包括内容（content）的宽度和高度，不包括border，padding，margin，这些都是盒子的外部。

---

ps：当我们设置好了宽度和高度的时候，其外盒子的宽度和高度基本上就定了，当我们想在内容（content）外面设置padding和margin或者border时，非常容易破坏我们的布局，此时我们就需要