就是我在回顾css基础的时候发现不理解box-sizing: border-box的作用，这篇主要是记录我学习的一些总结吧，可能也会有不准确的地方，若有纠正欢迎@我。
box-sizing的属性值
通过练习，这里发现box-sizing实际上可用只有两个：(默认的）content-box和border-box
这里最基础的案例展示一下这两者第一个区别之处。
<body>
<div id="div1"></div>
<br>
<div id="div2"></div>
</body>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: aqua;
border: 5px solid #0004;
}
#div2 {
box-sizing:border-box;
width: 100px;
height: 100px;
background-color: aqua;
border: 5px solid #0004;
}
</style>运行图：
这里我第一次比较直观的感受到两者的区别，我在看了一些解释之后，个人的理解就是，默认的content-box实际上就如英文所示，内容盒子，就是这个div盒子内容区域，比如代码里都设置的宽高为100px,默认的盒子属性就会给这个div内容部分设置100px的宽高，而后在给div盒子加一个边框的时候，边框border本身也有px值，那么这个border的就相当于包在这个100px的外面。
而border-box这个属性下，我给div2盒子设置100的宽高，然后再加一个border边框，边框的大小加上div2盒子的大小总共加起来宽高为100px,不会超过这个范围，也就是不管border怎么加，div内部的内容不会发生很明显位置改变。
（等在摸索摸索继续完善）
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
