css的盒模型

1. css盒子模型（box model）

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2. W3C标准

大多数浏览器采用W3C标准模型

3. IE标准盒子模型

IE中则采用Microsoft自己的标准

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器

当不对doctype进行定义时，会触发怪异模式

• 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
• 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

box-sizing ： content-box || border-box || inherit;

• 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
• 当设置为box-sizing:border-box时，将采用怪异模式解析计算；

当不对doctype进行定义时: 即文件头部 没有申明这个，就会导致 怪异模式（如果ie8以下的版本，文档模式就会变为ie5 quirks模式 ）

无论页面是否包含 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。

1.png

2.png

3.png

设置padding和border，不会影响盒子。

当doctype进行定义时: 即文件头部 申明这个，标准模式

4.png

5.png

css3的box-sizing属性

兼容性写法：

这个就是和怪异模式相同的：

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-ms-box-sizing: border-box;

应用场景：

1，当一个容器宽度定义为100%之后，如果再增加pading或者border，则会溢出父容器，是向外扩张的。

2，几个不同的li，横向排列的时候，在固定宽度的时候，如果再增加pading或者border，则会导致换行。