box-sizing的学习和认识

先上自己写的DEMO代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>box-sizing的学习</title>
	</head>
	<style>
		.one {
			width: 50px;
			height: 50px;
			background-color: blue;
		}
		
		.two {
			width: 50px;
			height: 50px;
			background-color: red;
			padding: 10px;
		}
		
		.three {
			width: 50px;
			height: 50px;
			background-color: yellow;
			padding: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	</style>

	<body>
		<!--
        	作者：43352901@qq.com
        	时间：2016-03-22
        	描述：针对DIV 的 box-sizing的学习
        	结论：设置box-sizing时，使用的padding，不会增加DIV的整体宽高
        -->

		<div class="one">1
		</div>
		<div class="two">2
		</div>
		<div class="three">3
		</div>
	</body>

</html>

　　

结论：

设置box-sizing时，使用的padding，不会增加DIV的整体宽高


 

posted @ 2016-03-22 13:54  iDark  阅读(152)  评论(0)    收藏  举报