HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="Text09.css">
</head>
<body>
<div class="m1">WE60e</div>
<div class="container1">
<div class="border1">
<div class="padding1">
<div class="content1">EDG流弊</div>
</div>
</div>
</div>
<div class="container2">
<div class="border2">
<div class="padding2">
<div class="content2">EDG流弊</div>
</div>
</div>
</div>
</body>
</html>CSS代码
.m1{
/*class类的调用通过.选择，id通过#选择*/
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin-left: 100px;
}
/*外边距是边框到盒子模型最外边的距离，也可以设置上下左右四个部分*/
body{
margin: 0px;
}
/*页边距设为0*/
.container1{
margin: 100px;
}
.border1{
border-style: dotted;
background-color: aqua;
}
.padding1{
padding: 100px;
}
.content1{
background-color: red;
}
/*下面一段代码块是为了，理解外边距合并时，两个外边距取值大的一个，而不是相加*/
.container2{
margin: 200px;
}
.border2{
border-style: dotted;
background-color: aqua;
}
.padding2{
padding: 100px;
}
.content2{
background-color: red;
}效果：
