[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的深度理解 也正值个人在公司内部进行部分章节的内容分享,于是顺带着直接把我即将分享的内容先给大家过过目 ...
随机推荐
- WIN7系统JavaEE(java+tomcat7+Eclipse)环境配置
https://jingyan.baidu.com/article/3a2f7c2e62d25e26afd611fa.html WIN7系统JavaEE(java+tomcat7+Eclipse)环境 ...
- malloc(50) 内存泄露 内存溢出 memory leak会最终会导致out of memory
https://en.wikipedia.org/wiki/Memory_leak In computer science, a memory leak is a type of resource l ...
- LongAdder 源码分析
LongAdder LongAdder 能解决什么问题?什么时候使用 LongAdder? 1)LongAdder 内部包含一个基础值[base]和一个单元[Cell]数组. 没有竞争的情况下,要累加 ...
- Celery多任务结构
视图结构 pro_cel ├── celery_task# celery相关文件夹 │ ├── celery.py # celery连接和配置相关文件,必须叫这个名字 │ └── tasks1.py ...
- Week4 - 500.Keyboard Row & 557.Reverse Words in a String III
500.Keyboard Row & 557.Reverse Words in a String III 500.Keyboard Row Given a List of words, ret ...
- ubuntu环境下重启mysql服务报错“No directory, logging in with HOME=-”
前提:使用系统的环境 3.13.0-24-generic mysql的版本:5.6.33 错误描述: 首先用mysqld_safe启动报错如下: root@zabbix-forFunction:~# ...
- hive重要命令
hadoop dfsadmin -safemode leave hadoop退出安全模式让提示符显示当前库: set hive.cli.print.current.db=true;显示查询结果时显示字 ...
- Python工具库（感谢backlion整理）
漏洞及渗透练习平台: WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.co ...
- 一些基础的ES6 语法
<script> window.onload = function () { //---------------------------let----------------------- ...
- html—倒计时demo
<!doctype html> <html> <head> <meta charset="utf-8"> </head> ...