likes
comments
collection
share

css 盒模型

作者站长头像
站长
· 阅读数 50

CSS 盒模型

在 CSS 中,我们可以通过:

  • box-sizing: conent-box; 将盒子设置为标准模型(盒子默认为标准模型)
  • box-sizing: border-box; 将盒子设置为 IE 模型(也叫做怪异盒子)

话不多说直接上图css 盒模型

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

如果

box-sizing: conent-box;

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

如果

box-sizing: border-box;

如下图

css 盒模型

width 的200px 就是 content + padding + border

border-box 更加好用。

转载自:https://segmentfault.com/a/1190000041194173
评论
请登录