你的位置:首页 > 网页设计

[网页设计]div和span的区别


<div>是一个块级元素,我们可以把它比喻成盒子,它没什么实际语义能用到很多地方,独占一行不能和其它元素在一行,它还能把<div>和<span>”装在盒子里”,主要用来组合段落和布局。

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>div</title>  <style>    div.b{width:500px}    div.b span{color:blue}    div.b div{float: right}  </style></head><body><div >  <p>我是一个<span>被span包含的段落</span></p>  <div>    <p>我是在div里的div</p>  </div></div></body></html>
*h1是块级元素的



 

 

<span>是行内元素,我们可以把它比喻成袋子,它也没有实际语义也能用到很多地方,如果没有样式它在视觉上和<p>一样,能和其它元素在一行,它的内容有多大宽度就有多宽,不能再里面添加<div>,它能把段落中的某一段”装起来”定义样式,能呈现很好的视觉效果。

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>span</title>  <style>    div.a span{color:red}  </style></head><body><div >  <ol>    <li><span>2015.11.20</span>财务</li>    <li>2015.11.20<span>人事</span></li>    <li>2015.11.20销售</li>  </ol>  <ul>    <li>我</li>    <li><span>是</span></li>    <li>谁</li>  </ul></div></body></html>
*ol、li、ul是块级元素