css中的box-sizing_css中box-sizing属于哪个目录下-CSDN博客

本文链接：https://blog.csdn.net/xvzhengyang/article/details/84592473

box-sizing:该属性有三个值,一个是content-box(default);一个是border-box,一个是padding-box

content-box:border和padding不计算入width(也就是width为100,border和padding分别为1和2,那么盒子总宽度是width+padding+border)

border-box:border和padding是计算到width里面,也就是说设置width为100,在设置border和padding分别为1和2,实际内容区域宽度是100-1-2

padding-box:border不计入width,但是padding是计算在width内

ps:不同浏览器效果不同....

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主要是用来学习box-sizing的例子</title>
		<style type="text/css">
			/* box-sizing:该属性有三个值,一个是content-box(default);一个是border-box,一个是padding-box */
			/* content-box:border和padding不计算入width(也就是width为100,border和padding分别为1和2,那么盒子总宽度是width+padding+border) */
			/* border-box:border和padding是计算到width里面,也就是说设置width为100,在设置border和padding分别为1和2,实际内容区域宽度是100-1-2 */
			/* padding-box:border不计入width,但是padding是计算在width内 */
			.content-box {
				box-sizing: content-box;
				-moz-box-sizing: content-box;
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 5px solid #E6A43F;
				background: blue;
			}

			.padding-box {
				box-sizing: padding-box;
				margin-top: 10px;
				-moz-box-sizing: padding-box;
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 5px solid #E6A43F;
				background: red;
			}

			.border-box {
				box-sizing: border-box;
				margin-top: 10px;
				-moz-box-sizing: border-box;
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 5px solid #E6A43F;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="content-box">
			
		</div>
		<div class="padding-box">
			
		</div>
		<div class="border-box">
			
		</div>
	</body>
</html>

下面是在chrome浏览器中的效果