css内容元素元素空间的练习

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		.box1
		{
			width: 50px;
			height: 50px;
			padding: 25px;
			background-color: red;
		}
		/*这个为元素的宽高都为150px。内容的宽高为100px*/
		.box2
		{
			width: 96px;
			height: 96px;
			border: 2px solid red;
		}
		/*这个是元素的宽高为196px。内容的宽高为192px。*/
		.box3
		{
			width: 100px;
			height: 100px;
			background-color: yellow;
			/*这个是内容的宽高为200px*/
		}
		.box4
		{
			width: 100px;
			height: 100px;
			margin: 50px;
			background-color: red;
			/*这个是元素的宽高为300px,内容的宽高为200px*/
		}
		.box5
		{
			width: 150px;
			height: 150px;
			border: 25px solid red;
			/*这个元素的宽高为350px,内容的宽高为300px。*/
		}
		.box6
		{
			width: 150px;
			height: 150px;
			padding: 20px;
			border: 20px solid blue;
			background: red;
			/*这个为内容的宽高为300px,元素的宽高为380px.*/
		}
		.box7
		{
			 width: 300px;
            height: 300px;
            background-color: purple;
		}
		.box8
		{
			 width: 100px;
            height: 100px;
            padding: 25px;
            border: 25px solid #000;
            margin: 50px;
            /*内容的宽高为200px,元素的宽高为300px,元素空间的宽高为400px。*/
		}
		.box9
		{
 			width: 150px;
            height: 150px;
            padding: 25px;
            background-color: red;
            /*内容的宽高为300px
            元素的宽高为350px。*/
		}
		.box10{
            width: 160px;
            height: 160px;
            border: 20px solid #000;
            background-color: deepskyblue;
            /*内容的宽高为320px
            元素的宽高为360px*/
        }
        /*问题
		要求增加padding属性为25之后仍然保持元素宽高为200?
		/*现有如下盒子模型, 要求增加border属性为20之后仍然保持元素宽高为200?
		怎么做?
		第一个:width和height都减去50px就行了。
		第二个:width和height都减去40就行了;
        */
	</style>
</head>
<body>
<div class="box1">box1</div><br>	
<div class="box2">box2</div><br>
<div class="box3">box3</div><br>
<div class="box4">box4</div><br>
<div class="box5">box5</div><br>
<div class="box6">box6</div><br>
<div class="box7">box7</div><br>
<div class="box8">box8</div><br>
<div class="box9">box9</div><br>
<div class="box10">box10</div>

</body>
</html>
css内容 元素 元素空间的练习

css内容元素元素空间的练习
