box-sizing_box-sizingcsdn-CSDN博客

本文链接：https://blog.csdn.net/xiaoyuliuliu/article/details/119541431

本文介绍了CSS中box-sizing属性的两种模式：content-box和border-box，并通过实例展示了它们的区别。content-box使得宽度和高度只包含内容区域，而border-box则包含内容、内边距和边框。理解这一属性对于精确布局至关重要。

摘要由CSDN通过智能技术生成

今天写一个样式时更深入的了解了box-sizing的几个属性的含义：
这个样式就是一个6px的红圆点，外面有个3px的浅颜色的border。

.box{
	width:6px;
	height:6px;
	background-color:red;
	border:3px solid lightgray;
	border-radius:50%;
}

写完这个css后，发现页面上就只剩下一个半径为3px的浅颜色圆了，就是上面说的3px的浅颜色border。后来加了box-sizing：content-box；就得到了我想要的样式，6px的红点外面有一圈3px的border，查了一下，原来我的box是box-sizing：border-box的标准。
box-sizing：content-box/border-box他俩的区别在于：
content-box：指的是你写的宽高就是内容的宽高，他可以另外加padding,border的值。你再写border时盒子会变大。
border-box：指的是整个盒子的宽高，它包含了内容+左右padding+左右border。你写border时盒子整体大小不变，他会把内容变小。
所以我上面的样式应该这样写：

.box{
	width:12px;
	height:12px;
	background-color:red;
	border:3px solid lightgray;
	border-radius:50%;
	box-sizing:border-box;
}

.box{
	width:6px;
	height:6px;
	background-color:red;
	border:3px solid lightgray;
	border-radius:50%;
	box-sizing:content-box;
}