黑马程序员技术交流社区

标题: css中的div与span的用法 [打印本页]

作者: 何俞平 时间: 2013-11-4 21:44
标题: css中的div与span的用法
本帖最后由何俞平于 2013-11-6 18:59 编辑

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

作者: 念念念念_、 时间: 2013-11-4 22:39
Div（块级元素）从上到下排列 Span（行内元素）从左到右排列

作者: hourglass 时间: 2013-11-5 01:21
楼上已经说出来了
当然，也可以通过CSS将div排列到一行(float属性)，也可以将span设置为块级元素(display:block)。
div主要用来布局，span经常用来将一行文字中，某些需要以其他样式来显示的文字，用span标签括起来，然后再单独设置其样式。

作者: 凤凰涅槃 时间: 2013-11-5 09:08
补充一下楼上的。

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

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

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

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

作者: 凤凰涅槃 时间: 2013-11-5 09:10
为什么我用高级模式排版好回复后格式全乱了？？？

作者: dashanren 时间: 2013-11-6 12:55
CSS中SPAN和DIV的区别
   SPAN和DIV的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

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

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

作者: 何俞平 时间: 2013-11-6 19:00
谢谢,我知道了！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2