无牵无挂，不带任何样式，因此经常使用div完成整体样式的构建，span完成细微样式的构建。

div为块级元素，span为行内元素。

使用div完成显示区域的居中、左右浮动等，完成整体的样式布局，然后在div内增加要显示的具体内容；

使用span完成关键信息或者指定信息的样式设定，比如文字前面的图标显示、使用图标代替链接文字等。

div span的更多相关文章

  1. div/span等获取焦点问题(tabindex属性的简单理解)

    1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...

  2. HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)

    摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html> <!--标准的html规则,类 ...

  3. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  4. CSS 让div,span等块级、非快级元素排列在同一行

    让div,span等块级.非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> < ...

  5. 10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  6. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  7. 通过DIV+span方式模拟进度条的实现方法

    上上周用FusionCharts做报表时,有个图是进度条的形式,其实在FusionCharts 3.0之后已经支持了(Linear Gauge),可惜现有系统用的还是1.2.3版本的,重新引入新版本有 ...

  8. jquery给div,Span, a ，button, radio 赋值取值

    jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...

  9. [HeadFirst-HTMLCSS入门][第十章div,span]

    新元素 <div>逻辑容器 能进行分组,等于用一个大的盒子进行包装 <span> 内联字符的逻辑分组 text-align 改变所有内联元素位置. 属性 center 居中 行 ...

随机推荐

  1. BZOJ 4723: [POI2017]Flappy Bird

    Description 从一个点到一条直线,每次纵坐标只能增加或减少1,有些位置有障碍,求最少增加步数. Sol 贪心. 或许是贪心吧...反正在可到达的范围内,纵坐标尽量小... 做的时候维护一下两 ...

  2. C#夯实基础系列之字符串

    string作为我们在编程当中用的最多的数据类型,同时又由于它的特殊性,怎么强调它的重要性都不为过,理解string的一些类型和存储机制,有助于我们写出正确且高效的代码. 一.string类型 1.s ...

  3. php libevent 扩展使用示例

    <?php define()); define()); class epoll{ private static $socket; public static $connections; priv ...

  4. 如何更高效地定制你的bootstrap

    bootstrap已经作为前端开发必不可少的框架之一,应用bootstrap使得我们对布局.样式的设定变得非常简单.但bootstrap提供的默认样式往往不能满足我们的需求,从而定制化bootstra ...

  5. 虚拟机ping不通主机，但是主机可以ping通虚拟机

    http://chris2013.blog.51cto.com/6931081/1209278

  6. zend studio 做前端推荐安装的插件

    zend studio 做前端推荐安装的插件 1.Aptana插件代码提示 Zend Studio的aptana插件,解决了Zend Studio对前台代码支持不足的问题,而且在某些方面还比诸如dw优 ...

  7. nginx配置文件或目录404和403

    对于Nginx web目录下的文件,如果不想用户访问那么可以配置返回404或者403状态,默认情况下对于目录来说,如果目录下没有默认文档,那么默认返回是403,也就是不允许查看目录列表,但是如果知道静 ...

  8. Python~迭代

            dict #默认情况下,dict迭代的是key 迭代value #迭代key,value     for value in  d.itervalues(): for k,v in d. ...

  9. [Sass]命令编译

    [Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...

  10. Servlet 单例多线程

    Servlet如何处理多个请求访问? Servlet容器默认是采用单实例多线程的方式处理多个请求的: 1.当web服务器启动的时候(或客户端发送请求到服务器时),Servlet就被加载并实例化(只存在 ...