css怪异盒模型样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怪异盒模型样式相关的知识，希望对你有一定的参考价值。
参考技术A 盒模型有两种：① 标准模式
② 怪异模式（quirks 模式）
---------------------------------------------分割线----------------------------------------------
在文件头使用<!DOCTYPE HTML>都会触发标准模式，如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。也可以在css上加入box-sizing:content-box;
box-sizing:content-box---------标准盒模型
例：
.box
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
盒子总宽度/高度=width/height+padding+border+margin
也就是说，如果你设定width为200px，那么文本（内容）所占的宽度就是200px。无论设置border,还是padding都会影响那个盒子的宽度，这样的话会影响其他的位置，一般用于大框架里的小东西。
---------------------------------------------分割线----------------------------------------------
box-sizing:border-box--------怪异盒模型
例：
.box
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
box-sizing:border-box;
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
可以说是，你设置width为200px时，那么盒子的宽度就是200px，无论设置border,还是padding都不会影响那个盒子的宽度。
在网页里设置那些大的框架会很好用。
标准盒模型和怪异盒模型
CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。
大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
当不对doctype进行定义时，会触发怪异模式。
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
以上是关于css怪异盒模型样式的主要内容，如果未能解决你的问题，请参考以下文章