box-sizing

转载于 2017-12-25 09:50:39 发布

· 259 阅读

文章标签：

#css box-sizing

css 专栏收录该内容

45 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 160px;
			height: 80px;
			padding: 20px;
			border: 8px solid red;
			background: yellow;
		}
		.content-box{
			box-sizing: content-box;
		}
		.border-box{
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="content-box">Content box</div><br/>
	<div class="border-box">Border box</div>

	<script>
		/*
		 content-box:
		 This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
		 默认值。宽度和高度属性仅包括内容，不包含内边距，边框和外边距。

		 border-box:
		 The width and height properties include the content, the padding and border, but not the margin.
		 宽度和高度属性包含内容，内边距和边框，但不包含外边距。
		 */ 
	</script>
</body>
</html>