box-sizing:border-box 及兼容

最新推荐文章于 2025-06-04 16:35:52 发布

原创最新推荐文章于 2025-06-04 16:35:52 发布 · 969 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

收录于

css学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文探讨了box-sizing属性在CSS中的应用，重点讲解了content-box与border-box模式的区别，帮助开发者理解如何控制元素的总尺寸。通过实例解析，揭示了在不同浏览器下的行为一致性。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	/* firefox*/
	-webkit-box-sizing: border-box;
	/* chrome safari*/
	-ms-box-sizing: border-box;
	/* IE8一下 */
	-o-box-sizing: border-box;
	/* presto opera*/
}
.content-box {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	/* firefox*/
	-webkit-box-sizing:content-box;
	/* chrome safari*/
	-ms-box-sizing:content-box;
	/* IE8一下 */
	-o-box-sizing: content-box;
	/* presto opera*/
}

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看