box-sizing到底是啥？两个主要属性又是啥意思
你们的资料里的解释让人更看不懂了
它两个主要的属性值又是啥意思？资料里的更没看懂
这个属性有什么用？
麻烦好好解释。
正在回答
您好，因为文档中详细解释了属性的含义，所以会问您是具体哪里没有理解，好针对性帮助您理解，造成您的误会，抱歉。
根据文档中的代码解释如下：
文档中代码的展示效果应该是：
当文档代码中关于box-sizing属性全部注释，可以发现页面中的展示效果为：
第一个div使用的是content-box属性（属性含义：在宽度和高度之外绘制元素的内边距和边框），当注释掉box-sizing属性和不注释时效果是相同。因为是在div原本的宽高200*70之外添加的padding:10px和border:15px。中间部分div的大小并没有发生变化。（可以使用F12键查看控制台中关于div的大小）
第二个div使用的是border-box属性（属性含义：通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度）。当注释掉border-box属性和不注释时效果是不同的，因为是在div原本的宽高基础上减去设置的border，padding完成的。
没有border-box时div的大小：
添加border-box时div的大小：
可以发现添加border-box时div的大小加上padding等设置的距离等于最初设置的div宽200高70的大小。（margin-top是为了距离上一个div有一部分距离设置的，请注意此属性是对边框和内边距的操作）
另会根据您的反馈详细补充教辅中的内容。祝学习愉快！
box-sizing 属性定义了，这个css 内 对于width、height该如何解析； 1.值为content-box,以为宽高只是 内容的宽高，不包含内边距padding 与边框border; 2.值为border-box时，height 与width的值包含padding+border ；
以下是复制的搜索内容： CSS 3（截止到2016年12月6日该属性还是草案）中新加了box-sizing属性，用来重新规定设置元素的width和height时，到底包含哪些区域。 box-sizing的可取值有两个：content-box（默认值）和border-box。 content-box 默认值。该值表示设置元素的width和height时，这两个尺寸实际指的是内容区的尺寸。即： width = 内容区的宽度 height = 内容区的高度 border-box 该值表示设置元素的width和height时，这两个尺寸实际指的是border + padding + 内容区 这三项的总尺寸。即： width = border-left + padding-left + 内容区宽度 +padding-right + border-right height = border-top + padding-top + 内容区高度 +padding-bottom + border-bottom
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星