css 盒子模型

盒子模型

浏览器引擎会根据 css 的盒子模型标准,将 css 中的颜色,大小,位置等属性定义在盒子中来渲染显示。

四个边界

  • 内容边界 content edge
  • 内边距边界 padding edge
  • 边框边界 border edge
  • 外边框边界 margin edge

四个区域

  • 内容区域 content area (白色)
  • 内边距区域 padding area (蓝色)
  • 边框区域 border area (浅粉色)
  • 外边距区域 margin area (绿色)

浏览器对内容区域的计算

IE 和 Chrome 对内容区域的长宽计算方式是不同的

Chrome

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.demo2 .box-content {
margin: 20px;
padding: 20px;
border: 5px solid #ffcc99;
background-color: #6699ff;
color: #333;
}
</style>
<div class="demo2">
<div class="box-content"><div style="background-color: #fff">长宽取值</div></div>
</div>

当前元素内容区域的宽 = 内边距区域 + 边框区域 + 内容区域 = 20*2 + 5*2 + 64 = 114

IE

说是 IE8 以下的内容宽度计算 = 边框区域 + 内容区域 (但我没有试过)

box-sizing 属性

有时候会有这样的情况:修改内部元素的 padding、border 会影响父元素的长宽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.demo3 .item {
display: inline-block;
margin-right: 10px;
width: 100px;
height: 100px;
background-color: #6699ff;
}
</style>
<div class="demo3">
<div class="item">
<div class="text-item">1</div>
</div>
<div class="item">
<div class="text-item">2</div>
</div>
<div class="item">
<div class="text-item">3</div>
</div>
<div class="item">
<div class="text-item">4</div>
</div>
</div>

父元素的宽 = item 的宽 + margin = (100+10)*4 + 2 = 442

当如果对 item 添加如下样式,就会影响到父元素

1
2
3
4
5
.demo3 .item {
/* ... */
padding-right: 10px;
border: 5px solid red;
}

多增加了:padding + border = (10+5*2)*4 = 80

如果要修正这一问题,就需要了解 box-sizing 中的两个属性的不同:

  • content-box
    默认值。实际宽度 = content + padding + border

  • border-box
    实际宽度 = content , content 内含 padding + border

1
2
3
4
5
6
.demo3 .item {
/* ... */
padding-right: 10px;
border: 5px solid red;
box-sizing: border-box; /* 子元素中 */
}

参考

我只是知识点的“加工者”, 更多内容请查阅原文链接 :thought_balloon: , 同时感谢原作者的付出:

【长按关注】看看↓↓↓?
Eminoda wechat
【前端雨爸】分享前端技术实践,持续输出前端技术文章
欢迎留言,评论交流,一起讨论前端问题
📢 因为是开源博客,为避免 Gitalk授权 带来的 安全风险,也可访问