Div span 标签详解
（divsion）简单而言是一个取款容器标记，也就是说之间是一个容器，可以容纳段落，标题，表格，图片，章节，摘要和备注等各种HTML元素。因此，可以把与中的内容视为一个独立的对象，用于CSS的控制。声明时只要对进行相应的控制，其中的各标签元素都会因此而改变。标记和标记一样，作为容器标记而被广泛用于HTML语言中。与区别区别在于，是一个块级(block-level)元素，它包
<div>（divsion）简单而言是一个取款容器标记，也就是说<div></div>之间是一个容器，可以容纳段落，标题，表格，图片，章节，摘要和备注等各种HTML元素。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只要对<div>进行相应的控制，其中的各标签元素都会因此而改变。
<Span>标记和<div>标记一样，作为容器标记而被广泛用于HTML语言中。
<div>与<span>区别
区别在于，<div>是一个块级(block-level)元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline element)，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。
需要注意的是，<span>标记可以包含于<div>标记之中，成为他的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>div标记不同行</p>
<div><img src="0550372.gif" border="0"/></div>
<div><img src="0550372.gif" border="0"/></div>
<div><img src="0550372.gif" border="0"/></div>
<p>span标记在同一行</p>
<span><img src="0550372.gif" border="0" /></span>
<span><img src="0550372.gif" border="0" /></span>
<span><img src="0550372.gif" border="0" /></span>
</body>
</html>
显示浏览器上的效果
盒子模型
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。
一个盒子模型由content（内容），border（边框），padding（间隙）和margin（间隔）这4个部分组成。如图
| margin-top
|
一个盒子的实际宽度(或高度)是由conetnt+padding+border+margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边个子的border，padding和margin。
1Border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。注意：在两种浏览器中的执行结果，可以看出IE并没有对border的背景上色，而firefox的作用域为content+padding+border。
2，padding用于控制content与border之间的距离
当某些时候需要同时设置4个方向的padding值时，可以将4个语句合并到一起，用padding语句统一书写。Padding:上 右 下 左;
3，margin指的是元素与元素之间的距离。
从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是图画本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。
特别说明：当两个行内元素紧邻的时候，他们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。但倘若不是行内元素，而是产生换行效果的块级元素，情况就会变得有一些不同。两个块级元素之间的距离不再是margin-bottom与margin-top的和，而是两者中的较大者。
除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，他的margin值对CSS排版也有重要的作用，这就是父子关系。其中子块的margin将以父块的content为参考
另外需要指出，IE与Firefox在margin的细节处理上又有区别。设定的父div的高度值小于子块的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而Firefox就不会，它会保证元素的height高度的完全吻合，而这时子元素将超过父元素的范围，如图所示
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
<style type="text/css">
div.father{
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px;
}
div.son{
background-color:#a2d2ff;
margin-top:10px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
</html>
以上提及的是margin值都为正数的时候。其实margin的值为负数的应用也很多。这里不再举例了
元素的定位
围绕CSS定位的集中原理方法，进行介绍，包括position，float和z-index。这里的定位不是<table>进行排版，而是用CSS的方法对页面的块元素的定位
1， float定位
注：在CSS中可以通过设置快元素的clear属性，清除对float的影响。
2， position定位
postion属性一共有4个值，分别为static，absolute，relative和fixed。
（1） static为默认值，它表示块保持在原本应该在的位置上，即改值没有任何移动的效果。
（2） 当子块的postion值设为absolute时，子块已经不再从属于父块。
注：top，right，bottom和left这4个css属性，他们都是配合position属性使用的，不但可以设置为绝对像素，也可以设置为表分数，表示块的各个边界离页面边框（postion=absolute）的距离，或者各个边界离原来位置（postion=relative）的距离。只有当postion属性设置为absolute或者relative时才能生效。如果设置为static，则子块不会有任何变化。
在IE浏览器中，如果right和bottom值冲突，就会只有left和top两个位置发挥作用，但是在火狐浏览器中，为了满足4个边界的要求，子块的大小会被改变。
（3）块的postion设置为relative时，与将其设置为absolute时完全不同。这时子块是相对于其父块来进行定位的，同样配合top，right，bottom和left这4个属性来使用的。
（4）当块的postion参数设置为fixed，本质上与将其设置为absolute一样，只不过不随着浏览器的滚动条向上或者向下移动。IE7与IE6一样，依然不支持postion属性的fixed值。
3，z-index空间位置
Z-index属性作用域调整定位时重叠块的上下位置，想象页面为x-y轴，垂直于月面的方向为z轴，z-index值大的页面位于其值小的上方。
当块被设置了 postion 属性时，该值便可设置各块之间的重叠高低关系。默认的 z-index 值为 0 ，当两个快的 z-index 值一样时，保持原有的高低覆盖关系。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)