CSS基础——盒子模型

我们知道，一个元素是由四部分组成的：margin、border、padding、content，分别为外边距、边框、内边距、内容区的意思，其中content由我们写的东西和width、height属性构成的，不由属性构成的。

（图片来自网络）

其中margin外边距指的是这个元素距离紧邻它的其他元素或者浏览器边框的距离。他是一个符合属性由margin-top、margin-right、margin-bottom、margin-left组成。我们可以用这四个属性分别设置上下左右其中一处的边框，也可以使用margin符合属性直接设置。由于是复合属性，所以他的值有4种写法：

1.4个值。如果写的是四个值，如margin: 10px 20px 30px 50px;这样的话，其分别按照上右下左的顺序来设置四个外边距的大小。

2.3个值。如果写的是三个值，如margin: 10px 20px 30px;这样的话，其分别按照上、左右、下的顺序来设置四个外边距的大小，中间的那个属性值设置的是左右的外边距。

3.2个值。如果写的是两个值，如margin: 10px 20px;这样的话，其分别按照上下、左右的顺序来设置四个外边距的大小。

4.1个值。这个没什么好说的…四个方向都是这个值。

接下来，我们就说一说盒模型。

 首先，盒模型的计算问题：我们现在一个盒子有10px的margin、5px的border、10px的padding和100px的content，那么这个盒子的宽高分别是多少呢？

答案是：

width = 5 + 10+ 100 + 10+ 5 = 130px;

height = 5 + 10 + 100 + 10 + 5 = 130px;

• 宽度的计算是：5px的border+40px的padding-left+100px的content+20px的padding-right+5px的border=170px；

• 高度的计算是： 5px的border+10px的padding-top+100px的content+30px的padding-bottom+5px的border=150px；

而实际上盒模型分为两种：

    w3c标准盒模型：

    ie盒模型：

举个例子：一个盒子的 margin 为 10px，border 为5px，padding 为 10px，content 的宽为 100px

ie盒子模型

盒子所占空间：width=10ｘ2+100=120      　　          height=10ｘ2+100=120

盒子实际大小：width=100        　　　　　　　  height=100

标准w3c盒子模型

盒子所占空间：width=10ｘ2+5ｘ2+10ｘ2+100=150  　  height=10ｘ2+5ｘ2+10ｘ2 +100=150

盒子实际大小：width=100+2ｘ2+10ｘ2 =124  　　　    height=100+2ｘ2+10ｘ2=124

box-sizing的使用

---

如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性 

  box-sizing: content-box 是W3C盒子模型 
  box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box