css盒模型

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

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

box-sizing盒模型解析方式

引子：通常情况下，被更多人认知的盒模型就是简单盒模型，简单盒模型在早期IE（ IE 5 和 6 ）时期有一种怪异模式下的解析方式，也就是现在的border-box，后来W3C制定的标准以后规定在标准解析模式下使用标准盒模型(content-box)。

例子：设定两个参数相同的不同盒模型！

html与css设定
.box1{
    width: 200px;
    height: 200px;
    margin: 100px;
    padding: 50px;
    border: 10px solid red;
    box-sizing: content-box;
    background-color: pink;
}
.box2{
    width: 200px;
    height: 200px;
    margin: 100px;
    padding: 50px;
    border: 10px solid red;
    box-sizing: border-box;
    background-color: green;
}

1. content-box标准盒模型

● width = 内容的宽度
● height = 内容的高度
2. border-box怪异盒模型

● width = border + padding + 内容的宽度
●height = border + padding + 内容的高度