CSS3的box-sizing属性学习

最新推荐文章于 2023-12-11 14:45:41 发布

flyation

最新推荐文章于 2023-12-11 14:45:41 发布

阅读量127

点赞数

分类专栏： box-sizing 盒子模型文章标签： css

本文链接：https://blog.csdn.net/weixin_40677049/article/details/113094372

版权

box-sizing 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

盒子模型

1 篇文章 0 订阅

订阅专栏

本文介绍了盒模型的两种类型：content-box和border-box。在content-box模式下，元素宽度由内容宽度、内边距和边框共同决定；而在border-box模式下，元素宽度仅包含内容区域，内边距和边框被包含在设置的width之内。通过示例代码展示了这两种模式在实际应用中的效果，并解释了它们在CSS布局中的差异。

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

简介

content-box：指定盒模型为 W3C 标准模型
border-box：指定盒模型为 IE模型（怪异模式）

示例代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		div {
			width: 100px;
			height: 100px;
			padding: 10px;
			border: 15px dashed orange;
			background: pink;
		}

		#b1 {
			/* 非IE浏览器下，不设置box-sizing的话，默认值也是content-box */
			box-sizing: content-box;
		}

		#b2 {
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div id="b1"></div>
	<hr>
	<div id="b2"></div>
</body>
</html>

说明

两个div：b1和b2，都设置css属性width、height为100px，padding为10px，border为15px。
区别在于b1的box-sizing为content-box，b2的box-sizing为border-box。
在这里插入图片描述
通过Chrome F12调试工具查看元素发现：

content-box：元素总宽度为width + 2 * padding + 2 * border
即：该模式下设置css中的width属性仅为元素内容的宽度。（非IE浏览器下，不设置box-sizing的话，默认值也是content-box）
border-box：元素总宽度为width
即：该模式下设置css中的width属性为元素内容总宽度，而元素内容的的宽度由width - 2 * padding - 2 * border计算得到