Div span 标签详解

<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">

<body>

<p>div标记不同行</p>

<p>span标记在同一行</p>

</body>

</html>

显示浏览器上的效果

盒子模型

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。

一个盒子模型由content（内容），border（边框），padding（间隙）和margin（间隔）这4个部分组成。如图

margin-top

Border-top

Padding-top

content

一个盒子的实际宽度(或高度)是由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">

<head>

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>

</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 值一样时，保持原有的高低覆盖关系。

Div span 标签详解相关推荐

Div与Span标签详解
Div与Span标签详解一.DIV 1.简介 2.作用 3.案例二.span 1.简介 2.语法 3.案例一.DIV 1.简介在html中布局使用最多标签为div, 我们通常将网页重构说成di ...
html span标签详解
1, SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN. <span>SPAN标记有一个重要而实用的特性,即 ...
web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...
HTML marquee标签详解
HTML marquee标签详解在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
HTML基本标签详解与运行截图
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JSF标签详解（全）
转自:https://wenku.baidu.com/view/82b84b255901020207409c87.html :https://blog.csdn.net/qq_36411874/art ...
SEO技巧：Meta标签详解
网页设计:Meta标签详解您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...

Div span 标签详解

Div span 标签详解相关推荐

最新文章

热门文章