Box model ( Box Modle ) can be used to layout elements, including padding, borders, margins, and the actual content of these parts.
Box model is divided into two first is W3c standard box model (standard box model) , the second IE standard box model (weird box model)
Most current browsers support the standard box model W3c also retained the support of weird box model, of course, follow the IE browser is weird box model. Quirks mode is "part of the browser supports the W3C standard, while also retaining the original resolution model" quirks mode mainly in the IE browser kernel.
First, the difference between the performance results of the standard box model box model with a weird place:
1, the standard box model in the width refers to the content area content width; height refers to the content area content height.
The size of the standard cassette box model = Content + border + padding + margin
2, strange box model of the width refers to the content, border, padding the overall width (Content + + border padding); height refers to the content, border, padding the overall height of
Box size = width (content + border + padding) + margin quirks box model
Second, how to choose the box model
If the standard is the definition of a complete document type doctype, no matter what kind of model, the standard will eventually trigger mode,
If the missing doctype agreement will be defined by its own browser, version of IE browser IE9 less (IE6.IE7.IE8) trigger quirks mode, other browsers will default to W3c standard mode.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#box1{
padding:20px;
background-color: greenyellow;
width: 100px;
height: 100px;
border:20px skyblue solid;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
布局
除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式
可以为box-sizing赋三个值：
content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)
border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型
padding-box：将padding算入width范围
-
当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
-
当设置为box-sizing:border-box时，将采用怪异模式解析计算；