- css盒子模型（box model）
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- W3C标准
大多数浏览器采用W3C标准模型
- 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进行定义时: 即文件头部 没有申明<!DOCTYPE html>这个，就会导致 怪异模式（如果ie8以下的版本，文档模式就会变为ie5 quirks模式 ）
<meta http-equiv="X-UA-Compatible" content="IE=7" />
无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta charset="utf-8">
1.png
2.png
3.png
设置padding和border，不会影响盒子。
当doctype进行定义时: 即文件头部 申明<!DOCTYPE html>这个，标准模式
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，则会导致换行。
网友评论