css之box-sizing属性

冰暮流星2025-10-27 8:44

box-sizing属性是用来自动调整盒子宽高的，使之与外界相适应。

盒子大小是由宽高，内边距，边框组成的，比如一个100*100px像素的盒子，如果添加1px边框，实际宽高是102*102px,box-sizing就是调整宽高使实际宽高加上内边距外加边框维持在100像素。

box-sizing有两个属性值

第一个是content-box,这个是默认值，意思是不调整

第二个是border-box,这个属性值会自动调整宽高

html 复制代码

	<div class="container">
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</div>

新建一个div盒子，里面有三个小div盒子，css值如下

html 复制代码

	<style>
		.container {
			width:300px;
			height: 200px;
			border: 1px solid #ccc;
		}

		.container div {
			background-color: red;
			width: 100px;
			height: 200px;
			float:left;	
		}
     </style>

效果图如下

如果添加1像素的边框，外加10像素内边距，效果图如下

可以看出小div盒子超出大div的范围，因为加上边框后，三个小div实际宽度超过300px，如果使用box-sizing属性

代码如下

html 复制代码

	<style>
		.container {
			width:300px;
			height: 200px;
			border: 1px solid #ccc;
		}

		.container div {
			background-color: red;
			width: 100px;
			height: 200px;
			float:left;

			border: 1px blue solid;
			padding: 10px;

			box-sizing: border-box;
		}
	</style>

自动调整宽高