聊一聊CSS盒模型

这篇文章将会比较系统的讲解CSS盒模型

干货预警……

1.1引语：什么是盒模型

盒模型是CSS中的一种基础设计模式，定义了Web元素是如何看做盒子解析的，每一个元素都是一个盒模型，包括Html和body标签元素.

1.2 盒模型是如何解析的

我们先来看一个例子

两种标准对比图如下图所示：

先来看一下在W3C标准浏览器中各个参数

再看一下IE6以下浏览器的参数

对比可见：IE6以下版本浏览器的宽度包含了元素的padding和border值

IE6以下的浏览器可以说是老古董了，不排除有些收藏爱好者在使用，当然浏览器收藏家可以说是非常罕见了，所以目前大多数浏览器还是使用W3C标准的盒模型。

但是！！form表单的部分元素还在使用传统的盒模型，比如input中的submit,reset等元素……

作为一名合格的程序猿，我们当然是希望一切尽在掌握之中！那么……如何才能做盒模型的主宰呢？

1.3 盒模型的主宰：box-sizing

这个属性主要有三个参数

content-box:W3C 标准模型

border-box:(IE6以下版本和IE6~IE7怪异模式)传统标准

inherit:继承父元素的盒模型模式

1.4 边距重叠问题

额……不太喜欢写长文，那么下一篇见！下一篇，我们一起来认识一下BFC!