[CSS]CSS中使用span和div遇到的問題

bladefury 發布于2019-08-29 15:23 / 1231人閱讀

摘要：所以一般在頁面中，只有一行或不到一行文字用，元素占據多行時用。設置屬性將設置為，使其形成，可以使高度自動計算，從而和下面的不會發生重疊。例如，所以又發生了同樣的問題，這種方法不推薦。

一. 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是什么意思

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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