CSS学习系列(一) --- 盒模型

0.思考题

<div class="box">
</div>

.box{
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 1px solid #84a5e8;
    margin: 10px;
  }

创建了一个长方形，那么这个长方形的宽度是多少？

1.盒模型是什么？

css由一个个的盒子组成，大体分为块状盒子和内联盒子,其中块状盒子(block)拥有盒模型的全部属性，内联盒(inline-block)拥有部分属性。

block属性：

• 拥有宽度width，高度height （inline 没有）
• 会继承父容器的宽度，扩展并占据父容器在该方向上的所有可用空间 （inline不会继承，因为压根没有width）
• 会在margin，border，padding把其他元素推开 （inline 虽然会作用于border,但是不会把其他元素推开）
• 会换行 （inline 不会）

由这些属性就构建出了我们看到的页面，目前的浏览器总共有两种盒模型，标准盒模型和IE盒模型。

2.盒模型里的属性

还是上面的元素在chrome的devtools的截图

• content box 在标准盒模型里内容width和heiht定义的就是这里
• padding box内边距
• border box包裹着内边距和内容
• margin box外边距

2.1 标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box，所以一开始那个思考题的答案就是offsetWidth = 300 + 102 + 12 = 322

2.2 IE盒模型

在IE盒模型中，设置width和heigth就是设置的盒子的宽度和高度，想要使用IE盒模型只需要设置下box-sing

.box2 {
    box-sizing: border-box;
}