内联元素<span>文字</span>的和diV之间的不同对比
本帖最后由 网页学习者 于 2014-10-3 13:21 编辑内联元素<span>文字</span>的和diV之间的不同对比，用span是用来设置在div当中的文字的颜色，那么此时在水平方向上padding和margin是有效的，而在垂直方向是无效的。因为它是包裹了这个文字。不具备什么效果。
为了方便大家的学习，我特意做了个图，让大家看下
代码设置如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>21.内联样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
#yuanshang{
color:red;
}
</style>
</head>
<body>
<div>
离离<span id="yuanshang">原上</span>草，</br>
一岁一枯荣，</br>
烟火烧不尽，</br>
春分吹又生。</br>
</div>
</body>
</html>
同时要注意，虽然span是个内联样式，但是他是在display的情况下可以转换为快状的，display:block;(那么这样之后，对span设置width和height，这个就会发生作用的。)同样的道理，对div设置 display：inline；（这样呢，就把div的块状转化为内联样式）；同时要注意，如果出现了：display:none;那么这个就表示，没有了这个快状！具体的代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>22课程 内联样式和div的转换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
span{
background:blue;
width:200px;
height:200px;
display:block;
}
div{
width:200px;
height:200px;
background:orange;
display:inline;
}
</style>
</head>
<body>
<span>王琪是个不错的姑娘！</span>
<div>吴海景是个好媳妇！</div>
</body>
</html><style>
span{
background:blue;
width:200px;
height:200px;
display:block;
}
div{
width:200px;
height:200px;
background:orange;
display:inline;
}
</style>上面是display的数值设置，大家自己好好研究下，可以结合浏览器看下具体的效果。
页:
[1]