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

时间 2019-12-08

标签 css 使用 span div 遇到问题栏目 CSS 繁體版

原文原文链接

一. span和div的区别

1.span是行级元素，div是块级元素
2.span占用的宽度是内容的宽度，而div默认是一行。
因此通常在页面中，只有一行或不到一行文字用span，元素占据多行时用div。html

二. 问题

下图是但愿获得的效果
spa

div在两个span的下方，可是若是这么写，
htm

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来实现。it

3. 设置div属性overflow

将div设置为overflow: hidden，使其造成BFC，可使div高度自动计算，从而和下面的div不会发生重叠。io

4. 设置content属性position

将content设置为position: absolute，因此content会去找第一个position属性不为static的父元素，即html<body>，因而就会相对于html<body>向下移动30px。class

这种方法虽然也能够解决问题，可是也会带来新的问题，由于position: absolute会致使content元素脱离文档流，若是在content元素下面还有其余元素，那么其余元素位置可能会和content元素重叠。
例如，
float

因此又发生了一样的问题，这种方法不推荐。方法

四. 总结

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