HTML-div与span

div与span的区别

在html中经常见到div和span,我一般都是随意用,个人习惯,大多用div,直到今天才弄清楚了div与span的区别

本质区别:

div:块级元素
span:行内元素

体现在代码中:

div在代码中会另起一行
而span不会,除非本行占满,才会换行```

上代码咯:

<div style = "width:200px; border:solid;">
<div>abcde</div>
<div>abcde</div>
<span>abcde</span>
<span>abcde<span>
</div>

<div style = "width:50px; border:solid;">
<div>abcde</div>
<div>abcde</div>
<span>abcde</span>
<span>abcde<span>
</div>

运行效果:

div与span运行效果

到底该用哪个呢?

  • div:指定渲染HTML的容器
  • span:指定内嵌文本容器
    通俗地讲就是如果里面还有其他标签的时候就用div,如果里面只有文本就应该用span

关联:

两者的区别也不是一成不变的,可以通过设置css的display值相互转换样式,此处不做过多说明

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,328评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,670评论 0 30
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 974评论 0 1
  • 不一样的你正在走来。 快来听,它和你一样有些不一样呢。 No.17 ✿ 在那一个时间点, 遇见寻了很久的那个回眸,...
    众里那个人阅读 885评论 0 1