HTML页面用什么模型,css3盒模型是什么？

什么是盒模型？

CSS3盒模型就是CSS技术所使用的一种思维模型，指在一个网页文档中，每个元素都被呈现为一个矩形的盒子，描述了元素所占空间的内容。

css中的每个元素都是一个盒模型， 包括html、body元素， 浏览器解析css的时候也会把每个元素看成一个盒子来解析。

盒模型具备的属性(存在的特点)有： content (用户设置的width和height)、padding(内边距，用户设置的padding值) 、margin(外边距，用户设置的margin值)、border(边框 用户设置的border值) 、background(背景)等。

盒模型的分类

(1)IE6混杂盒模型：

IE6混杂盒模型是由IE浏览器提出的一个盒模型，主要是为了解决布局的问题，在没有css3之前触发的条件是需要IE6浏览器 以及页面的代码是怪异模式。(怪异模式是指在解析代码的时候浏览器不按照w3c标准解析，而按照浏览器自己的解析方式进行解析，由于不同浏览器解析方式不同因此我们称之为怪异模式)

触发怪异模式只需要在写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的效果

更多web开发知识，请查阅 HTML中文网 ！！