css盒模型

css盒模型理解

• 有两种，IE盒子模型、W3C盒子模型；
• 盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把border和padding`计算了进去;
• 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
• IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
• 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
• 怪异(IE)盒模型：元素宽度 = width + margin
• 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

创建两个盒子

<h1>盒子模型</h1>
<div class="box1">
    盒子1
</div>
<div class="box2">
    盒子2
</div> 

.box1{
    width: 100px;
    height: 100px;
    background-color: red;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

设置边框、内边距、外边距

.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 20px;
    border: 10px solid black;
    padding: 20px;
    box-sizing: content-box;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 20px;
    border: 10px solid black;
    padding: 20px;
    box-sizing: border-box;
}

标准盒子模型

标准(W3C)盒模型：元素宽度 = width + padding + border + margin

怪异盒子模型

怪异(IE)盒模型：元素宽度 = width + margin

box-sizing 常用的属性

1. content-box：默认值，使用标准的W3C盒模型，元素的宽度和高度仅包括内容区域（content），不包括填充、边框和外边距。
2. border-box：使用怪异的IE盒模型，元素的宽度和高度包括内容区域（content）、填充（padding）和边框（border），但不包括外边距（margin）。即元素的宽度和高度指定的是内容区域加上填充和边框的总宽度和高度。
3. inherit：继承父元素的box-sizing属性值。