`
ghyghoo8
  • 浏览: 193456 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

div与span

    博客分类:
  • js
阅读更多
最明显的区别是:DIV是块元素,SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。
具体步骤:
代码示例:

<style>
div,span{border:1px solid #000;margin:2}
</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)。
--------------------------------------------------------------------
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。

<span>SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中, <span>标识符允许你将一个段落分成不同的部分。   还有一个标识符具有类似的功能, <div>DIV也被用来在HTML文件中建立逻辑部分。但与 <div>SPAN不同, <div>工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。
------------------
div换行,span不换行
------------------
DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN
在 HTML 视图中工作时,可以在 <DIV> 内编辑文本,将某些字包含在 <SPAN> 元素内,以强调那些字。与 <DIV> 不同, <SPAN> 和它周围的文本一起移动。
--------------------------------------------------
----------------------------------------------------
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:

以下是引用片段:
  style="visibility: none;"
  document.getElementById("typediv1").style.visibility="hidden";//隐藏
  document.getElementById("typediv1").style.visibility="visible";//显示


  通过设置display属性可以使div隐藏后释放占用的页面空间,如下

以下是引用片段:
  style="display: none;"
  document.getElementById("typediv1").style.display="none";//隐藏
  document.getElementById("typediv1").style.display="";//显示

html Div隐藏问题
用html 现在初始化的时候让Div隐藏,然后点击按钮,使它显示,代码如下

<script type="text/javascript">
function show(id){
var traget=document.getElementById(id);
traget.style.display="";
}
</script>


<input type='button' value='显示' onClick="search('div1');">
<div id="div1" style="display:none;">隐藏</div>


初始化div是隐藏的

traget.style.display="block";
="search('div1');"改成="show('div1');"
分享到:
评论

相关推荐

    div和span的区别

    这意味着`&lt;span&gt;`不会像`&lt;div&gt;`那样换行显示,而是与其他内联元素(例如文字)在同一行显示。 #### 二、块级元素与内联元素的特性 **块级元素**的特点包括: - 默认情况下,每一个块级元素都会从新的一行开始,...

    前端开发与实践- DIV与SPAN.pptx

    `span` 不像 `div` 那样占据整行,而是与其他行内元素如文本、链接等并列显示。 在实际应用中,`div` 经常用于创建复杂的布局结构,通过嵌套和层叠实现更精细的控制。例如,案例中的 `edu_8_2_1.html` 和 `edu_8_2_...

    div与span的区别和使用示例

    具体步骤: 1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解: 测试<span&gt;紧跟前面的"测试"显示</span&gt;<div&gt;这里会另起一行...因为DIV与SPAN元素的特殊

    div与span之间有什么区别

    在HTML中,`&lt;div&gt;`和`&lt;span&gt;`是最常用的两种元素,它们在网页布局和样式控制中扮演着重要角色。然而,它们有着本质的区别,...总的来说,理解和掌握`&lt;div&gt;`与`&lt;span&gt;`的区别及其应用场景,是进行高效网页开发的基础。

    HTML中div与span的区别(共同点与不同点)

    5. **语义化**:虽然 `div` 和 `span` 都是非语义化的元素,但 `div` 在网页结构中更常被赋予一定的语义,如`&lt;header&gt;`、`&lt;section&gt;`、`&lt;article&gt;`等语义元素的替代品,而 `span` 更多用在文本细节的处理上。...

    div中加入span右对齐后出现换行显示两种解决思路

    后来我无意中发现有个东西叫&lt;span&gt;,比如实现模块的效果就可以:&lt;div class=portlet align=left&gt;文章&lt;span&gt;编辑&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;;当然我们还需要一个CSS文件去控制span的样式: 复制代码代码如下: .portlet span { ...

    CSS里元素初始化文件html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

    对css里的元素如:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, ...

    div+css实训

    div+css实训系列指导书所有需要的请下载《网页设计与制作(DIV+CSS)》实训指导书《网页设计与制作(DIV+CSS)》实训指导书

    js+div+span实现树型结构

    综上所述,使用js、div和span实现的树型结构具有较高的灵活性,适合小规模项目或学习用途。然而,在大型项目中,可能需要更专业、功能更完善的库,如jQuery UI、AngularJS的ngTree、Vue的vuetree等,它们提供了更...

    常见DIV+CSS问题集合与解决.docx

    #### 五、DIV与SPAN的区别 - **DIV**:块级元素,可以设置宽度和高度,通常用于布局。 - **SPAN**:行内元素,不支持设置宽度和高度,主要用于文本内容的修饰。 #### 六、CSS兼容性问题 - **CSS Hack**:针对不同...

    html标签例如img,div,span等基本标签的使用

    例如,我们可以使用 img 标签插入图像,用 div 标签分组元素,用 span 标签高亮文本。 例如: ```html &lt;div&gt; 这是一个图片"&gt; &lt;span&gt;这是高亮文本&lt;/span&gt; &lt;/div&gt; ``` 五、HTML5 的发展 HTML5 是 HTML 的最新...

    DIV_CSS测试题

    2. **div与span的区别**:`div`是块级元素,独占一行,`span`是内联元素,与其他内联元素并排显示。 3. **边距与内填充**:`margin`用于调整元素的外边距,`padding`用于调整元素的内填充。 4. **颜色值缩写**:颜色...

    前端练习01-前端-HTML(div+span)

    同时,这也是学习CSS和页面响应式设计的基础,因为`&lt;div&gt;`和`&lt;span&gt;`常常与CSS选择器和媒体查询结合使用,以适应不同设备和屏幕尺寸。在实际项目中,熟练运用这两个标签能够极大地提升网页设计的灵活性和可维护性。

    12-div和span标签.html

    12-div和span标签.html

    Web前端开发基础:CSS制作电子相册.ppt

    3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 &lt;div&gt;标记与&lt;/span&gt;标记 ...

Global site tag (gtag.js) - Google Analytics