本篇主要介绍div + span 以及盒模型的使用。
span：内联元素----包裹其内容。 div是块级元素----占用整行。
盒模型：相当于容器。
<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0px;
padding:0px;
}
/*
div{
background-color:green;
color:#fff;
}
span{
background-color:green;
color:#fff;
}
div{
width:500px;
height:500px;
padding:0px;
margin:0px;
border:solid 10px;
}*/
.div{
width:600px;
height:600px;
margin:0 auto;
background-color:green;
}
.diva{
float:left;
width:240px;
height:240px;
background-color:red;
}
.divb{
float:left;
width:240px;
height:240px;
background-color:yellow;
}
.div div{
margin:10px;
padding:10px;
border:solid 10px;
}
</style>
</head>
<body>
<!--div>今天天气真好DIV</div>
<div>今天天气真好DIV</div>
<span>今天天气真好SPAN</span>
<span>今天天气真好SPAN</span-->
<div class="div">
<div class="diva"></div>
<div class="divb"></div>
</div>
</body>
</html>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)