CSS3之盒模型

1. 什么是盒模型？

css中的每个元素都是一个盒模型， 包括html body元素， 浏览器解析css的时候也会把每个元素看成一个盒子来解析。 盒模型具备的属性（存在的特点）有： content （用户设置的width和height）、padding（内边距，用户设置的padding值） 、margin（外边距，用户设置的margin值）、border（边框 用户设置的border值） 、background（背景）等。

2.盒模型的分类？

 

（1）IE6混杂盒模型：IE6混杂盒模型是由IE浏览器提出的一个盒模型，主要是为了解决布局的问题，在没有css3之前触发的条件是需要IE6浏览器 以及页面的代码是怪异模式（怪异模式是指在解析代码的时候浏览器不按照w3c标准解析，而按照浏览器自己的解析方式进行解析，由于不同浏览器解析方式不同因此我们称之为怪异模式），触发怪异模式只需要在写html页面的时候第一行不写<Doctype html> 或者写错单词均可触发。 IE6混杂盒模型的特点是： 完整的盒子 = content（用户设置的宽高） + margin 也可说 盒子的content部分（用户设置的宽高部分） = 实际内容区的宽高 + padding（用户设置的内边距） + border（用户设置的边框部分）

触发怪异模式并不能让页面对页面中的盒子用IE6混杂盒模型来解析 怎么能用IE6混杂模式盒模型来解析呢 ？ 怪异模式 + IE6浏览器

 

（2） W3C标准盒模型： w3c组织提出的统一的标准盒模型： 特点是： 完整的盒子 = content（用户设置的宽高） + padding （用户设置的内边距）+ border（用户设置的边框） + margin（用户设置的外边距）

 

由于IE6混杂盒模型可以解决一些布局上的问题，因此w3c组织在css3中将其加入，

即css3中的可以选择盒模型的类型: box-sizing: border-box（使用IE6混杂盒模型）/content-box（使用标准盒模型）;

盒模型实现布局

 

 

 

 

 

效果：

不加box-sizing的效果

 

 

给元素加box-sizing的效果