关闭

div vs span

标签: divxhtml任务bordercssclass
622人阅读 评论(0) 收藏 举报
分类:

对于CSS布局而言,除了对id  class选择符的使用中会存在一定的问题外,就是span.

spandiv从语义上无法理解其真正用途,而在使用上spandiv几乎所有相同的属性.

如下代码所示

<div id="d1">div1</div>

<div id="d2">div2</div>

<br />

<span id="s1">span1</span>

<span id="s2">span2</span>

 

CSS代码:

       #d1,#d2,#s1,#s2{

              border:1px solid #000FFF;

              padding:10px;      

       }

显示效果如下

从上面效果可以看到,两个div之间出现了换行,而span是并行。

对于XHTML的每一个对象而言,都拥有自己默认的显示模式,div对象的默认显示模式display:block; spandisplay:inline;

在实际使用中 div对象的任务是呈现一个块状内容,如一大段文本,一个导航区域,一个页脚区域等显示块状的内容进行结构编码并进行样式设计。

而作为内联对象的span,用途是对行内元素进行结构编码 以方便 样式设计。span默认状态下就不会破坏行中元素的显示顺序,例如在一大段文本中,需要改变其中一段文本的颜色,可以使用span并进行样式设计,这将不会改边这一整段文本的显示方式。

divspan对象有着自己各自的用途与使用方法,虽然可以通过display属性的更改对它们的显示方式进行变化。但并不以为着二者的互换能够对页面带来好处,要根据实际场合使用对象来页面设计任务。

 
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:128985次
    • 积分:2144
    • 等级:
    • 排名:第17643名
    • 原创:84篇
    • 转载:5篇
    • 译文:0篇
    • 评论:26条
    文章分类