div与span

div{
  font-size:18px;                 /*字号大小*/
  font-weight:bold;               /*字体粗细*/
  font-family:Arial;              /*字体*/
  color:#ff0000;                  /*颜色*/
  background-color:#ffff00;       /*背景颜色*/
  text-align:center;              /*对齐方式*/
  width:300px;                    /*块宽度*/
  height:100px;                   /*块高度*/
}  

<div>

这是一个div标记
<div> 

把上面的div全换成span,显示结果完全一样.那么div与span的区别是什么呢?

看下面的例子

<div><img src="123.jpg" border="0"></div>
<div><img src="123.jpg" border="0"></div>
<div><img src="123.jpg" border="0"></div>

把这个例子里的div换成span,再看看效果,可以看到:
div块分别在不同的行,而span块在同一行.这就是他们的区别.[span是行内样式]

盒子模型

实例１：

div{
  border-width:6px;
  border-color:#000000;
  margin:20px;padding:5px;   /*块与周围20px，内容与边框是５px*/
  background-color:#ffffcc;
}

<div style="border-style:dashed">This is……</div>
<div style="border-style:dotted">This is……</div>
<div style="border-style:double">This is……</div>

实例２：

<p style="border-bottom:8px dotted blue;padding-bottom:30px;margin-bottom:30px;">We can read of thing that.</p>
<p>Next paragrape</p>

padding-bottom:30px;下边框和内容之间是30px

margin-bottom:30px; 这段与下段之间的空隙是60px

 元素定位

float定位

实例３

<div class="father>
  <div class="son1">12345</div>
  <div class="son2">67890</div>
</div>

.father{
  background-color:#fffea6;
  border:1px olod #111111;
  padding:25px;
}

son1{
  padding:10px;
  margin:5px;
  background-color:#70baff;
  border:1px dashed #111111;
  float:left;                       /*左浮动*/
}

son2{
  padding:5px;
  margin:0px;
  background-color:#ffd270;
  border:1px dashed #111111;
}

son1块左浮动后，son2块自动跟在其后。

position定位 --绝对定位

<div id="father">
  <div id="block">absolute</div>
</div>

#father{
  background-color:#a0c8ff;
  border:1px dashed #000000;
  width:100px;
  height:100px;
}
#block{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  positon:absolute;             /*absolute绝对定位*/
  left:20px;　　　　　　　　　　/*离左边界20px*/
  top:40px;                     /*离页面上边界40px*/
}

  子块和父块脱离了关系。

实例：z-index   块之间的叠放方式

<div id="block1">AAAAAAAA</div>
<div id="block2">BBBBBBBB</div>
<div id="block3">CCCCCCCC</div>

#block1{
  background-color:#fff0ac;
  border:1px dashed #000000;
  padding:10px;
  positon:absolute;            
  left:20px;　　　　　　　　　　
  top:30px;
  z-index:1;                    /*高低值1*/
}
#block2{
  background-color:#ffc24c;
  border:1px dashed #000000;
  padding:10px;
  positon:absolute;            
  left:40px;　　　　　　　　　　
  top:50px;
  z-index:0;                    /*高低值0*/
}
#block3{
  background-color:#c7ff9d;
  border:1px dashed #000000;
  padding:10px;
  positon:absolute;            
  left:60px;　　　　　　　　　
  top:70px;
  z-index:-1;                    /*高低值-1*/
}

把#block1和#block1的 z-index值换一下，可以看到不同的效果。

给图片签名

<div class="father>
  <div id="block1"><img src="123.jpg" border="0"></div>
  <div id="block2">yuer</div>
</div>

#block1{
  padding:10px;
  border:1px solid #00000;
  float:left;
}
#block2{
  color:white;
  padding:10px;
  position:absolute;
  left:255px;
  top:205px;
}

通过绝对定位把文字移动的图片上