box-sizing的问题
老师，这里的box-sizing:border-box是什么意思？和content-box有什么区别？为什么要在reset.css里写这句代码？
源自：流体布局
2-1 页面结构布局-1
14
收起
正在回答
1回答
同学你好，box-sizing属性在第一阶段中讲解过，可以回顾下：
https://class.imooc.com/lesson/2112#mid=50082
默认盒模型是content-box，元素占据宽度为(不包含margin)：设置的width+padding+border。设置盒模型为border-box后，元素占据宽度为(不包含margin)：设置的width(padding和border会占据width的位置) 。
reset.css中写这行代码是为了保证元素占据大小不变，不影响其他布局。
祝学习愉快！
-
同学你好，设置border-box后，盒子的margin还是会有的，border-box不会影响外边距margin，border-box的作用是告诉浏览器我们设置的边框（border）和内边距（padding）的值是包含在width内的，简单来说就是：如果将一个元素的width和height分别设置为100px，那么这100px会包含它的border和padding，内容区的实际宽度会是width-（左border+右border + 左padding+右padding）的计算值，内容区的实际高度回事height-（上border+下border+上padding+下padding）的计算值。示例如下：
希望可以帮到你，祝学习愉快！
2023-03-24 10:36:39
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星