盒模型

• 关于盒模型

盒模型是在CSS中常用的一种布局基础，制定了一个元素可以在页面中如何显示，让使用CSS变得更加容易。盒子模型由四个部分组成：内容(content)、内边距(padding)、边框(border)、外边距(margin) 。盒子模型一共有W3C标准的“标准盒模型”和IE标准的“怪异盒模型”两种。

• 两种盒模型的区别

利用盒模型通过定义一系列的相关属性可以在整个HTML文档中更容易的布置结构。盒模型的元素默认时总是独占一行，前后的元素只能顺序排列。IE盒模型和W3C盒模型的计算方式不同，IE的宽度和高度为content + padding + border；而W3C的高度和宽度为content。

举个例子：

<style>
  .content {background: #eee; height: auto;border: 1px solid blue;}
  .div {width: 100px;height: 100px;margin: 30px;padding: 10px;border: 5px solid blue;}
  .div-01 {background: orange;}
  .div-02 {background: yellow;box-sizing: border-box;}
</style>
<div class="content">
  <div class="div div-01">div01</div>
  <div class="div div-02">div02</div>
</div>

以上是一个div的宽度和高度为100px，内边距为10px，边框为5px，外边距为30px。图4为不同模型下显示的结果，W3C盒模型下显示的div所占的总宽度和总高度（包括外边距、边框、内边距、内容）为100 + 10 + 5 + 30 = 145px，IE盒模型下显示的div所占的总宽度和总高度（包括外边距、边框、内边距、内容）为100 + 30 = 130px。很明显的区别，如果元素的宽度（width）一定的情况下，W3C盒模型的宽度（width）不包括内边距和边框，IE盒模包括。

• 定位方式

盒子模型再文档中的定位默认布局方式为自上而下的动态布局，如果类似于导航条就要使标签产生浮动，脱离当前文档流的位置，使得不占用空间。另一种是定位分绝对定位和相对定位。相对定位保持原来的空间，定位偏移时候以自身原有位置作为参照物来定义位置。相对定位是让内容脱离并不占据文档流中的空间，以整个文档来定位。

逆战班