• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > div与span之间有什么区别

div与span之间有什么区别

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含div,span等相关知识,佚名 希望在学习及工作中可以帮助到您

问:DIV与SPAN之间有什么区别?

答:解决思路:

DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。

具体步骤:

1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如:
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。

因为DIV与SPAN元素的特殊性,所以一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,还有两者间的相互转化。

DIV指定渲染 HTML 的容器。
SPAN指定内嵌文本容器。
总的来说,一个div是占一个块的,它的默认display属性是block,表示一个块。如:
<div>aaa</div>bbb显示出来,是两行。
而span,它的display默认属性是inline,可以连在一起的。如: <span>aaa</span>bbb,显示出来是一行。
div一般用于排版,而span一般用于局部文字的样式。

您可能想查找下面的文章:

  • div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
  • 向div元素添加圆角边框的实现方法
  • 关于div中img,span垂直居中的问题
  • html css 控制div或者table等固定在指定位置的实现方法
  • 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
  • 顶部固定div可设置半透明效果
  • div嵌套html不用iframe
  • div容器自增长后其内的背景色或图片随之增长
  • div与span之间有什么区别
  • div可以输入内容不用input作为输入框屏蔽自动的input样式

相关文章

  • 2017-08-05浅谈html中input只读属性readonly和disable的区别
  • 2017-08-05网页设计之5种简单的XHTML网页表单
  • 2017-08-05html多媒体应用之网页中插入flash动画、插入音乐
  • 2017-08-05HTML的checkbox和radio样式美化的简单实例
  • 2017-08-05html在消息按钮上增加数量角标的实现代码
  • 2017-08-05iframe框架在IE浏览器下将白色背景设为透明色
  • 2017-08-05HTML教程:收集的常用的HTML标签(4)
  • 2017-08-05HTML中select下拉框内容显示不全部分被覆盖的解决方法
  • 2017-08-05html文件的中文乱码问题与在浏览器中的显示问题
  • 2017-08-05使用flash插件来调用pc的摄像头如何将它嵌入到TML页面中

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html滚动条 textarea属性设置
    • 清除网页文字水印的两种简单方法
    • html 内联元素和html 块级元素概述及区别
    • html文本框点击后自带蓝色边框解决办法
    • HTML 文本转义小窍门
    • 举例讲解HTML中META标签的一些使用技巧
    • HTML元素设置焦点的方法
    • XHTML常用标签介绍
    • html+css布局的三种方式(自然布局/流动布局/定位布局)
    • gbk utf8如何选择 正确理解和使用GBK及UTF-8网页编码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有