css content-box 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>css content-box 实例 - 自学教程(runoops.com)</title>
	<style>
		.clearfix {
			zoom: 1;
		}

.clearfix:after {
			display: block;
			content: '';
			clear: both;
			visibility: hidden;
			height: 0;
		}

h3 {
			text-align: center;
		}

.container {
			width: 800px;
			border: 20px solid black;
			margin: 0 auto;
		}

.box {
			float: left;
			width: 50%;
			height: 50px;
		}

.left {
			background-color: pink;
		}

.right {
			background-color: purple;
		}

.content-box {
			border: 5px solid green;
			padding: 10px;
			/*box-sizing: content-box;*/
		}

.border-box {
			border: 5px solid green;
			padding: 10px;
			box-sizing: border-box;
		}
	</style>
</head>

<body>

<div class="clearfix">
		<h3>想要实现的效果</h3>
		<div class="container">
			<div class="box left"></div>
			<div class="box right"></div>
		</div>
	</div>
	<hr />
	<div class="clearfix">
		<h3>默认标准盒模型，添加边框、填充后的效果</h3>
		<div class="container">
			<div class="box left content-box"></div>
			<div class="box right content-box"></div>
		</div>
		
	</div>
	<hr />
	<div class="clearfix">
		<h3>设置border-box后，添加边框、填充后的效果</h3>
		<div class="container">
			<div class="box left border-box"></div>
			<div class="box right border-box"></div>
		</div>
	</div>

</body>

</html>