关于css:css-盒模型

CSS 盒模型

在 CSS 中，咱们能够通过：

• box-sizing: conent-box; 将盒子设置为规范模型（盒子默认为规范模型）
• box-sizing: border-box; 将盒子设置为 IE 模型（也叫做怪异盒子）

话不多说间接上图

.container{
  width:200px;
  border:1px solid red;
  padding:10px;
  margin:20px;
}

如果

box-sizing: conent-box;

那么写的 width:200px 是 content，就是图中的蓝色区域。

如果

box-sizing: border-box;

如下图

width 的 200px 就是 content + padding + border

border-box 更加好用。