CSS教程:DIV元素与SPAN元素的区别

首先讲两个概念,一个是行内元素,一个是块级元素。行业元素是指该元素标记的内容不不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作 用;而块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

两者最明显的区别是:DIV(division)是一个块级元素,可以包含段 落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。 块元素相当于内嵌元素在前后各加一个
换行。其实,块元素和行内元素也不是一成 不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元 素定义了display:block就成了块元素了。

具体步骤:

代码示例:

1
2
3
4
5
<style> div,span{border:1px solid #000;margin:2px;} </style>
<div>div1</div><div>div2</div><span>span1</span><span>span2</span>
<br /> <div style="display:inline">div3</div> <div style="display:inline">
div4</div> <span style="display:block">span3</span> <span style="
display:block">span4</span>

提示:可以先修改部分代码后再运行

技巧:有些朋友会说DIV是层标签,其实HTML里 是没有层这个说法的,只不过是为了易于理解,Dreamweaver里才这样写的,每个对象都可以 成为“层”,只需要给对象定义position属 性(值为absolute或relavite)。 例如,要让图片成为“层”,可以这样写代 码:

1
 <img src=http://www.webjx.com/css/"demo.gif" style="posibion:absolute;left:20px;top:20px"/>

特别提示

本例代码运行效果如图所示,为了更能说明问题,这里给块元素和内嵌元素都加了1像 素宽的黑色实线边框,从图中可以看到,DIV默认为块元素,定义display属 性值为inline后以内嵌元素显示,而SPAN默 认为内嵌元素,定义display属性值为block后 则以块元素显示。

SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代 码中的其它元素,这样你就可以为它们指定样式了。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索display
, 样式
, 代码
, 元素
, span层
, span
一个
,以便于您获取更多的相关知识。

时间: 2025-01-01 18:09:10

CSS教程:DIV元素与SPAN元素的区别的相关文章

CSS教程:DIV底部放置文字

   css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loo

CSS网页制作教程:display属性行内元素和块级元素

文章简介:内联(行内)元素.块级元素区别. A:行内就是在一行内的元素,只能放在行内:块级元素,就是一个四方块,可以放在页面上任何地方. B:说白了,行内元素就好像一个单词:块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现.C:一般的块级元素诸如段落<p>.标题<h1><h2>....列表,<ul><ol><li> .表格<table>.表单<form>.DIV<div>和BODY<

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示_javascript技巧

下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title></title> <sty

样式表CSS中div、span和center元素

css|样式表 <div>和<span>用来为内容指定样式或绑定脚本.虽然大多数HTML元素可以通过style属性来设置样式信息,但是许多HTML元素有自己默认的样式,该样式可能和style定义的样式混合甚至冲突,是我们不希望看到的.如:<strong style = "color: red">I am strong!</strong>.和其他html元素不同,<div>和<span>没有默认的显示样式.所以可以通

CSS中div、span和center元素_CSS/HTML

<div>和<span>用来为内容指定样式或绑定脚本.虽然大多数HTML元素可以通过style属性来设置样式信息,但是许多HTML元素有自己默认的样式,该样式可能和style定义的样式混合甚至冲突,是我们不希望看到的.如:<strong style = "color: red">I am strong!</strong>.和其他html元素不同,<div>和<span>没有默认的显示样式.所以可以通过它们来指定样式

CSS教程—元素的定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example: 以下是引用片段:>#div-1 {  position:static; }2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example: 以下是引用片

CSS教程——元素定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example:#div-1 { position:static;}2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example:#div-1 { position:r

CSS教程:元素详解

块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css

CSS教程:block element与inline element元素详解

块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css