[CSS]CSS中使用span和div遇到的问题

bladefury 发布于2019-08-29 15:23 / 1169人阅读

摘要：所以一般在页面中，只有一行或不到一行文字用，元素占据多行时用。设置属性将设置为，使其形成，可以使高度自动计算，从而和下面的不会发生重叠。例如，所以又发生了同样的问题，这种方法不推荐。

一. 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，于是就会相对于html向下移动30px。

这种方法虽然也可以解决问题，但是也会带来新的问题，因为position: absolute会导致content元素脱离文档流，如果在content元素下面还有其他元素，那么其他元素位置可能会和content元素重叠。
例如，

所以又发生了同样的问题，这种方法不推荐。

四. 总结

对于span和div都用时，同时span元素设置float属性时，还是对span外加div使其变成块级元素并设置高度，才不会使其后面的元素受到影响。

GPU云服务器云服务器 css中div css和div div和css css中div是什么意思

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113281.html

[CSS]CSS中使用span和div遇到的问题

摘要：所以一般在页面中，只有一行或不到一行文字用，元素占据多行时用。设置属性将设置为，使其形成，可以使高度自动计算，从而和下面的不会发生重叠。例如，所以又发生了同样的问题，这种方法不推荐。一. span和div的区别 1.span是行级元素，div是块级元素2.span占用的宽度是内容的宽度，而div默认是一行。所以一般在页面中，只有一行或不到一行文字用span，元素占据多行时用div。 ...

yy13818512006 2019-08-02 10:25 评论0 收藏0
CSS 搞怪的 text-decoration

摘要：最后，好像也可以利用这种方法，做出莫名其妙的效果真是很莫名其妙的效果今天在改一个项目的时候却遇到了一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这么容易的属性，为什么会莫名其妙呢？就让我们继续看下去~ 项目里遇到的问题在我的项目里头遇到的问题如下，一...

Mertens 2019-08-02 16:16 评论0 收藏0
CSS 搞怪的 text-decoration

摘要：最后，好像也可以利用这种方法，做出莫名其妙的效果真是很莫名其妙的效果今天在改一个项目的时候却遇到了一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这么容易的属性，为什么会莫名其妙呢？就让我们继续看下去~ 项目里遇到的问题在我的项目里头遇到的问题如下，一...

TANKING 2019-08-30 15:48 评论0 收藏0
天天都在使用CSS，那么CSS的原理是什么呢？

摘要：也有的元素被完全无视，比如的元素。对于每个元素，必须在所有中找到符合的并将对应的规则进行合并。这样做是为了减少无效匹配次数，从而匹配快性能更优。识别属性值，创建对象，并将对象存入解释器堆栈。数组中的每一项纪录了这个的，的值，权重层叠规则。作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？一、浏览器渲染开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：show...

lijy91 2019-08-30 15:55 评论0 收藏0
天天都在使用CSS，那么CSS的原理是什么呢？

摘要：也有的元素被完全无视，比如的元素。对于每个元素，必须在所有中找到符合的并将对应的规则进行合并。这样做是为了减少无效匹配次数，从而匹配快性能更优。识别属性值，创建对象，并将对象存入解释器堆栈。数组中的每一项纪录了这个的，的值，权重层叠规则。作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？一、浏览器渲染开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：show...

The question 2019-08-23 14:55 评论0 收藏0