A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 何俞平 中级黑马   /  2013-11-4 21:44  /  2497 人查看  /  6 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 何俞平 于 2013-11-6 18:59 编辑

css中的div与span的用法,它们与HTML中的标签之间的位置关系?

评分

参与人数 1技术分 +1 收起 理由
陈行 + 1

查看全部评分

6 个回复

倒序浏览
Div(块级元素)从上到下排列   Span(行内元素)从左到右排列

评分

参与人数 1技术分 +1 收起 理由
陈行 + 1

查看全部评分

回复 使用道具 举报
楼上已经说出来了
当然, 也可以通过CSS将div排列到一行(float属性),也可以将span设置为块级元素(display:block)。
div主要用来布局,span经常用来将一行文字中,某些需要以其他样式来显示的文字,用span标签括起来,然后再单独设置其样式。

评分

参与人数 1技术分 +1 收起 理由
陈行 + 1

查看全部评分

回复 使用道具 举报
补充一下楼上的。


你有一堆内容想要把他们当做一个整体用--设置内容格式、整体移动等。就可以放到
一对<div></div>标签中来对他们操作了。


利用<span>,可以在任意位置对特定字符进行样式格式化,即使字符包含在<li>中也一样。这些功能都是仅靠HTML元素本身属性
无法达到的,而行内样式元素<span>可以达到这样的效果。


回答他们在HTML标签中的位置,我想把我之前的学习笔记摘过来跟容易你理解。


->文档流:        文档元素在文档中按照从上到下,从左到右的顺序排列的性质就叫做文档流。
->相对定位:position:relative 是相对自己原来的位置进行的移动。相对定位不会脱离文档流,                        偏移后自己在文档中原来的位置不会被其他元素占用。该定位方式的元素不会脱离文档流。                        ->绝对定位:position:absolute 位置是基于当前元素的父元素定义的。父元素是具有定位信息的第一个容器元素。                        如果当前的元素没有具有定位信息的容器元素,则会基于 body 元素计算定位信息。该定位方式的元素脱离文档流。                        ->默认定位:position:static Html中默认的定位方式是按照文档流顺序排列定位的。该定位方式的元素不会脱离文档流。
->固定定位:position:fixed 是相对浏览器定位的,向下滑动网页的时候,固定定位的元素是没变化的。元素脱离文档流。
所有HTML标签在文档中默认的排列方式是以文档流的方式排列的,<div></div>标签和<span></span>标签也一样按文档流顺序排列,想要对你的标签定位就先让他脱离文档流,设置标签的float属性值或者position属性值。
大概这些吧,希望会对你有帮助。。。


评分

参与人数 1技术分 +1 收起 理由
陈行 + 1

查看全部评分

回复 使用道具 举报
为什么我用高级模式排版好回复后格式全乱了???
回复 使用道具 举报
CSS中SPAN和DIV的区别
      SPAN和DIV的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。

下面以一个实例来说明这两个属性的区别。
 代码:
      SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。
      还有一个标识符具有类似的功能,DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同,工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

 效果:
      SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。
      还有一个标识符具有类似的功能,DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同,工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

评分

参与人数 1技术分 +1 收起 理由
陈行 + 1

查看全部评分

回复 使用道具 举报
谢谢,我知道了!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马