css3的box-sizing

box-sizing: content-box|border-box|inherit;

border-box可以将盒子内的border内减


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 80%;
		height: 300px;
		background: pink;
		margin: 50px auto;
		
	}
	p:first-child{
		width: 50%;
		height: 200px;
		background: blue;
		float: left;
		border: 2px solid red;
		/*指名border这个属性是这个小盒的宽度*/
		box-sizing: border-box;
	}
	p:last-child{
		width: 50%;
		height: 200px;
		background: green;
		float: left;
		border: 2px solid red;
		box-sizing: border-box;
	}
</style>
<body>
	<div>
		<p></p>
		<p></p>
	</div>
</body>
</html>


你可能感兴趣的:(css3)