演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.loufang1{
width: 150px;
height: 100px;
background-color: blue;
/* float: left; */
/* margin-bottom: 30px; */
margin-right: 30px;
margin-left: 50px;
}
.loufang2{
width: 150px;
height: 100px;
background-color: red;
/* float: left; */
/* margin-top: 30px; */
margin-left: 30px;
}
</style>
</head>
<body>
<!--
外边距踩坑:
1,元素上下排列,上下外边距重叠,并且取最大值;
2,元素左右排列,左右外边距相加;
3,行级元素只有左右外边距,没有上下外边距;
4,块级元素和行内块级元素外边距四个方向都有效。
-->
<div style="background-color: red;height: 50px;"></div>
<!-- <div class="loufang1"></div> -->
<!-- <div class="loufang2"></div> -->
<span class="loufang1">我要自学</span><b class="loufang2">我要自学</b>
<img src="bj.jpg" >
<div style="background-color: black;height: 50px;clear: left;"></div>
</body>
</html>