欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-01 08:19:10
...
<!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>