div与span的用法以及两者的区别与联系

div

  • div是块元素: 块级元素在浏览器显示时,通常会以新行来开始(和结束);
  • 可用于组合其他 HTML 元素的容器;
  • 可用于文档布局,取代了使用表格定义布局的老式方法;
  • 与 CSS 一同使用时,<div> 元素可用于对大的内容块设置样式属性;

span

  • span是行内元素(也译作内嵌元素);
  • 可用作文本的容器;
  • 与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性;

两者的区别与联系:

  • 区别: 一个div是占一个块的,它的默认display属性是block,表示一个块;而span,它的display默认属性是inline,可以连在一起的。
    举个栗子:
    <div>aaa</div>bbb //显示出来,是两行;
    <span>aaa</span>bbb //显示出来是一行。

  • 联系:(块元素和行内元素)可以通过定义CSS的display属性值可以互相转化;
    举个栗子:
    测试<div style="display:inline">紧跟前面的"测试"显示</div>
    <span style="display:block">这里会另起一行显示</span>

分别在什么情况下使用?

  • div一般用于排版,而span一般用于局部文字的样式

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,939评论 1 84
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 12,722评论 32 436
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,105评论 0 5
  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 1,145评论 0 3
  • 恢复视力 平常泡一杯菊花茶来喝,能使眼睛疲劳的症状消退,如果每天喝三到四杯的菊花茶,对恢复视力也有帮助,经常玩微信...
    利先生文集阅读 35评论 0 0