[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的深度理解 也正值个人在公司内部进行部分章节的内容分享,于是顺带着直接把我即将分享的内容先给大家过过目 ...
随机推荐
- angular项目开发
第 1 步:安装 Angular CLI 你可以使用 Angular CLI 来创建项目.生成应用和库代码,以及执行各种持续开发任务,比如测试.打包和部署. 全局安装 Angular CLI. 要使用 ...
- HDU6715 算术（莫比乌斯反演）
HDU6715 算术 莫比乌斯反演的变形. 对 \(\mu(lcm(i,j))\) 变换,易得 \(\mu(lcm(i,j)) = \mu(i)\cdot\mu(j)\cdot \mu(gcd(i,j ...
- P1538迎春舞会之数字舞蹈
传送 输入输出样例:(洛咕的太丑了就不放了) (1前面有三个空格) 这真是一群闲(qian)圈(zou)的人.大号+小号提交了不下10遍终于a了 好了我们来研究一下这些数字"美观" ...
- VUE Right-hand side of ‘instanceof’ is not an object 解决方案
这里要注意一下, props之前没注意写成了 props: { wrd: '', sname:'zs' }, 这样是不能被解析成object的,所以一定要写的更具体一点 ...
- 查看在linux中下载的图片
1.安装 yum install lrzsz -y 2.找到文件所在的位置选中之后 3.点击那个蓝色的框框里面有一个 用ZMODEM下载 4.选择要保存的位置就可以查看了
- 邻近双线性插值图像缩放的Python实现
最近在查找有关图像缩放之类的算法,因工作中需要用到诸如此类的图像处理算法就在网上了解了一下相关算法,以及其原理,并用Python实现,且亲自验证过,在次与大家分享. 声明:本文代码示例针对的是plan ...
- django中自定义404错误页面
自定义404页面,如下5个步骤:1)使用自定义的404页面,必须在setting文件修改DEBUG = False(即关闭debug调试模式)2)必须在setting文件修改ALLOWED_HOSTS ...
- mysql的小练习
建立如下表: 建表语句: class表创建语句 create table class(cid int not null auto_increment primary key, caption varc ...
- 非web工程，打jar放shell执行
作为6年经验的程序员,一直在搞web服务应用开发,今天领导被吐槽了,只会web方面的东东,最基本的打包啥啥都不会.. 一般开发工程都是web项目,突然要求开发非web,不用tomcat装(浪费端口号) ...
- 关于崩溃报告的日志以及dump文件
在用户使用软件的过程当中突然产生软件崩溃的问题,必须采取相关的措施去拦截崩溃产生的原因,这有助于程序员解决此类崩溃的再次发生.特别是有些难以复现的崩溃,不稳定的崩溃,更有必要去调查崩溃产生的原因.一般 ...