css盒子模型

作者：fanyun 发布：2023-02-10 22:04 栏目：网页制作点击：278次抢沙发

仔细看凡云阁下面的图，理解CSS盒子模型的结构。

再仔细看下面的代码：

<style type="text/css">
		#father {
			display: inline-block;
			border: 1px solid blue;
			}
		#son {
			display: inline-block;
			padding: 20px 50px;
			border: 5px solid red;
			margin: 30px 80px;
		}
		.brother {
			height: 20px;
			background-color: aqua;
			
		}
	
		</style>
	</head>
	<body>
	<div id="father">
	<div class="brother"></div>
	<div id="son">这是内容</div>
	<div class="brother"></div>
	</div>

效果如下：