box-sizing：border-boxing；第一次使用

陪你上房揭瓦

于 2016-11-07 14:14:11 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS

本文链接：https://blog.youkuaiyun.com/github_36496793/article/details/53065870

8 篇文章

订阅专栏

本文通过对比设置了box-sizing属性前后的div元素，展示了该属性的作用。解释了如何通过使用box-sizing:border-box来确保边框不会影响元素的实际大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="box"></div>

.box {				
	margin-top: 200px;
	margin-left: 200px;
	background-color: black;
	width: 200px;
	height: 200px;
	border: 10px solid red;			
}

效果是这样的

给css加上

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

结果是这样的

结果可以看出，使用了box-siziing:border-box之后，div把border的宽度也计算进了width和height