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

div VS. span

阅读更多

      在CSS的布局概念中,SPAN是一个内联元素(inline),而DIV是一个块级元素(block)。在一个内联元素
的前后出现的内容,能够和他们显示在同一行里。而每一个块级元素,都是从一个新行开始显示,而且其后的元素也必须另起一行进行显示。当你明确自己要描述的是一行内容时,就应该使用<span>标签,比如blog的标题,作者,日期等。而对于blog的正文,则肯定是一篇文章,这是你就应该使用<div>标签。

    另外div 常用于Layer操作:

<div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div> 

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div> 

  

 

分享到:
评论

相关推荐

    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 { ...

    div和span的区别

    ### div和span的区别详解 #### 一、基本概念 **div** 和 **span** 是HTML中最常见的两种元素,它们在网页布局与样式控制方面扮演着重要角色。 - **div**:是一个块级元素,通常用来作为容器,它可以包含段落、...

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

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

    12-div和span标签.html

    12-div和span标签.html

    js+html+css实现鼠标移动div实例.docx

    4. HTML中的`SPAN`和`DIV`的区别,`SPAN`用于行内元素,而`DIV`用于块级元素。 5. 使用jQuery向`div`添加HTML文本内容的简便方法。 6. jQuery加载HTML页面到指定`div`的实现。 7. 避免在HTML中滥用`div`,以保持代码...

    16_div元素和span元素的使用.html

    16_div元素和span元素的使用

    js+div+span实现树型结构

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

    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, ...

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

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

    网页设计中的Span和Div的区别

    在网页设计中,HTML元素是构建页面结构的基本单位,其中`&lt;span&gt;`和`&lt;div&gt;`是最常用的两种元素,但它们在用途和表现形式上有着显著的区别。 首先,`&lt;span&gt;`是一个内联元素(inline element)。它的主要作用是用于...

    JavaScript 制作div圆角

    corner.innerHTML = '&lt;div&gt;&lt;span class="' + corners[i] + '"&gt;&lt;/span&gt;&lt;/div&gt;'; divElement.appendChild(corner); } } } } // 使用示例 var myDiv = document.getElementById('myDiv'); createRoundedDiv(myDiv...

    DIV的创建.doc

    "&lt;span&gt;" + title + "&lt;/span&gt;" + "&lt;div class=\"popClose\" onClick=\"GenPop.ClosePop('" + winName + "');\" title=\"关闭\"&gt;&lt;/div&gt;" + "&lt;/div&gt;" + "&lt;div class=\"Content\"&gt;" + " " marginwidth=0 marginheight=0...

    expandable-input:一个Bootstrap插件,用于将&lt;{span | div | ...} contenteditable>用作自动扩展输入

    {span | div | ...} contenteditable&gt;作为可扩展输入的jQuery插件。下载/安装您可以在此处下载最新的JS和CSS代码: 或通过安装npm install --save expandable-input可能需要使用JS代码var jQuery = require ( '...

    div与span的区别和使用示例

    1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解: 测试<span&gt;紧跟前面的"测试"显示</span&gt;<div&gt;这里会另起一行显示</div&gt; 2.块元素和行内元素也...

    CSS selector:div.title p代表的是什么意思(通俗易懂)

    今天我们要讨论的是包含关系选择器的组合使用,具体来说,就是 "div.title p" 这样的选择器。 "div.title p" 是一个复合选择器,它由三个部分组成,这三个部分按照空格分隔,表示特定的父子关系。这三个部分分别是...

    python 3利用BeautifulSoup抓取div标签的方法示例

    blog_level = div.find('span', {'id': 'comp_901_grade'}).find('img')['real_src'] print(f"博客等级: {blog_level}") # 提取博客积分 blog_points = div.find('span', {'id': 'comp_901_score'}).text ...

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

    在“05_特殊符号+div+span.html”这个文件中,我们可能看到的示例可能包括: 1. 使用`&lt;div&gt;`创建不同的区域,比如头部、主体和页脚,每个`&lt;div&gt;`都有相应的CSS类来定义样式。 2. 在`&lt;div&gt;`内嵌套`&lt;span&gt;`,用于展示...

    div与span之间有什么区别

    在实际开发中,合理利用`&lt;div&gt;`和`&lt;span&gt;`的特性以及CSS,可以实现丰富的网页布局和设计。`&lt;div&gt;`常用于创建页面结构,如布局网格或定位元素,而`&lt;span&gt;`则用于在文本级别进行样式微调。两者结合使用,配合CSS的其他...

    javascrtpt 实现窗口拖拽、移动功能、显示坐标

    document.getElementById("span1")[removed] = "x:" + div.style.top + " " + "y:" + div.style.left; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document....

Global site tag (gtag.js) - Google Analytics