本文介绍了CSS3中box-sizing属性的两种值：content-box和border-box，及其对盒子大小计算的影响。content-box遵循传统盒模型，宽度包括width、padding和border；而border-box下，width包含padding和border。通过实例展示了两者在实际开发中的应用，border-box更常用于简化布局计算。
一、分类
CSS3 中可以通过 box-sizing属性 来指定盒子模型大小的计算方法，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）。
二、content-box默认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
最低0.47元/天 解锁文章
扫一扫
2837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
