[CSS]CSS中使用span和div遇到的问题
一. span和div的区别
1.span是行级元素，div是块级元素
2.span占用的宽度是内容的宽度，而div默认是一行。
所以一般在页面中，只有一行或不到一行文字用span，元素占据多行时用div。
二. 问题
下图是希望得到的效果
div在两个span的下方，但是如果这么写，
div和span的位置重叠，因为对span元素设置了float属性，从而导致浮动塌陷，解决办法是将span元素的高度计算进去，但是因为span元素是行级元素，无法设置高度，所以需要其他解决办法。
三. 解决办法
1. 设置div高度
这样就可以了。
2. 设置div属性display
将div设置为display: inline-block，使其既具有block元素的特性，可以设置宽度和高度，同时也具有inline元素的不换行的特性。
但是这是对第二个span元素设置的float: right属性不生效，因为display: inline-block会使元素按行依次排列，所以第二个span元素的float: right不生效，要想达到想要的效果，可以通过设置margin-left来实现。
3. 设置div属性overflow
将div设置为overflow: hidden，使其形成BFC，可以使div高度自动计算，从而和下面的div不会发生重叠。
4. 设置content属性position
将content设置为position: absolute，所以content会去找第一个position属性不为static的父元素，即html<body>，于是就会相对于html<body>向下移动30px。
这种方法虽然也可以解决问题，但是也会带来新的问题，因为position: absolute会导致content元素脱离文档流，如果在content元素下面还有其他元素，那么其他元素位置可能会和content元素重叠。
例如，
所以又发生了同样的问题，这种方法不推荐。
四. 总结
对于span和div都用时，同时span元素设置float属性时，还是对span外加div使其变成块级元素并设置高度，才不会使其后面的元素受到影响。
[CSS]CSS中使用span和div遇到的问题的更多相关文章
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- CSS单元的位置和层次-div标签
我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...
- 说说CSS样式中你不知道的“大于号”
继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要.下面是Css中处理继承的一个方法.在一段CSS代码中见到一个大于 ...
- 网页中Span和Div的区别
它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符. span和div的不同之处在于span是内联的,用在一小块 ...
- CSS样式中” 大于号”
CSS样式中” 大于号” 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGROUND-IMAGE: ...
- CSS世界中那些说起来很冷的知识
CSS世界中那些说起来很冷的知识 最近读了张鑫旭的新书<CSS世界>收获了不少对CSS的深度理解 也正值个人在公司内部进行部分章节的内容分享,于是顺带着直接把我即将分享的内容先给大家过过目 ...
随机推荐
- Spring、Hibernate、Struts官方下载地址
hibernate 官网: http://hibernate.org/ hibernate3 官方下载:http://sourceforge.net/projects/hibernate/files/ ...
- CSS中clip-path属性的使用
clip-path的使用 polygon 值为多个坐标点组成,坐标第一个值是x方向,第二个值是y方向. 左上角为原点,右下角是(100%,100%)的点.</p> body { backg ...
- python 2和3 字符编码
在字符编码问题上,python2 和python3 还是有点不同的.今日写篇博客,彻底理清这个问题.. 字符编码问题的由来: 这要从计算发展历史来看待这个问题了,一开始,歪果仁使用ASCII码,8位( ...
- Delphi XE2 之 FireMonkey 入门(21) - 和 FMX 相关的类(表)
TObject TPersistent TComponent IInterface,IInterfaceComponentReference TBasicAction TControl ...
- shell脚本一一项目5
主题:一键查看占用内存.cpu高的进程 echo "----------------cpu top 10 list----------------"ps -eo pid,pcpu, ...
- delphi中的inpubox，如何能控制它的位置？ 10
https://zhidao.baidu.com/question/153270855.html delphi中的inpubox,如何能控制它的位置? 10 RT ! 前辈!最好你就把那代码都拿出来吧 ...
- cmd 编码修改。 牛阿。 解决问题
http://jingyan.baidu.com/article/e75aca85440f01142edac636.html 命令窗口修改编码,CMD编码修改方法 听语音 | 浏览:9696 | 更新 ...
- Visual Studio新增类模板修改
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class ...
- js导入外部文件
- POJ-2287.Tian Ji -- The Horse Racing (贪心)
Tian Ji -- The Horse Racing Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 17662 Acc ...