关于CSS3的box-sizing

最新推荐文章于 2025-12-04 18:01:05 发布

原创最新推荐文章于 2025-12-04 18:01:05 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文详细介绍了 CSS 中 box-sizing 属性的三种值：content-box、border-box 和 inherit 的用法及区别，并通过示例代码展示了不同设置下元素如何显示。

box-sizing

三个属性值

content-box
border-box
inherit

1）content-box

在已经设定的高度和宽度的外面绘制边框

<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>

div{
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}
#d1{
background-color: red;
box-sizing: content-box;
border: 6px solid #000000;
}
#d2{
background-color: blue;
box-sizing: content-box;
border: 0;
}

2）border-box

在已经设定好的宽度和高度的里面绘制边框

<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>

div{
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}
#d1{
background-color: red;
box-sizing: border-box;
border: 6px solid #000000;
}
#d2{
background-color: blue;
box-sizing: border-box;
border: 0;
}

3）inherite
继承父元素的box-sizing的属性值

<body>
	<div id="d1"></div>
	<div id="d2">
		<div id="d3"></div>
	</div>
</body>

#d1{
	width: 100px;
	height: 100px;
	margin-left: 20px;
	margin-top: 30px;
	background-color: red;
	box-sizing: border-box;
	border: 6px solid #000000;
}
#d2{
	box-sizing: border-box;
}
#d3{
	width: 100px;
	height: 100px;
	margin-left: 20px;
	margin-top: 30px;
	border: 6px solid #000000;
	box-sizing: inherit;
	background-color: blue;
}