本节内容主要是为了复习之前学习的css内容以及在学习css各种布局中存在的一些知识盲区和遗漏点,主要起到巩固作用。充分了解盒子模型

1.CSS盒子模型

所有的HTML元素都可以看作为盒子，在css中，”box model”这一术语就是用来描述该布局的;

CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，他包括：边距（margin）,边框(border),填充(padding),和实际内容(content).每一个盒子有自己的大小和位置外，也会影响到其他盒子的大小和位置。

(a)盒子边框

border属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式),border-width(边框宽度),border-color(边框颜色)。

语法：border:border-width || border-style || border-color ;
如border:1px solid black;

(b)内边距

CSS padding属性定义元素的内边距.padding-top:上内边距;padding-bottom:下内边距；padding-left:左内边距;padding-right:右内边距;

语法：padding:1px 1px 1px 1px;(分别指上，右，下，左)
padding:1px 1px;(分别指上下，左右)

(c)外边距

CSS margin属性定义元素的外边距.设置外边距会在元素之间创建‘空白’,它定义了元素和其他元素之间的间隔距离，在这段间距之间通常不能够放入其他内容。margin-top:上外边距;margin-bottom:下外边距；margin-left:左外边距;margin-right:右外边距;

语法：margin:1px 1px 1px 1px;(分别指上，右，下，左)
margin:1px 1px;(分别指上下，左右)

2.CSS盒子模型类型（重点）

css盒子模型分为W3c标准盒模型和IE标准盒模型;

(a)W3c标准盒模型

什么是W3c标准盒模型,即该元素的css属性为box-sizing:content-box的模型;该W3c盒子模型为默认盒子模型；它的特点为：元素的width = content的宽度。元素会发生膨胀;为了方便理解，代码和图例如下：

如上我们给div盒子设置了内外边距；但是实际代码执行之后，我们可以在浏览器上发现div的宽度依旧是300px；但是盒子自身发生了膨胀！

(b)IE标准盒模型

什么是IE标准盒模型,即该元素的css属性为box-sizing:border-box的模型；它的特点为：元素的width = content的宽度+padding+border。元素不会发生膨胀;为了方便理解，代码和图例如下：