摘要:所以一般在頁面中,只有一行或不到一行文字用,元素占據多行時用。設置屬性將設置為,使其形成,可以使高度自動計算,從而和下面的不會發生重疊。例如,所以又發生了同樣的問題,這種方法不推薦。
一. 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來實現。
將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使其變成塊級元素并設置高度,才不會使其后面的元素受到影響。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52344.html
摘要:所以一般在頁面中,只有一行或不到一行文字用,元素占據多行時用。設置屬性將設置為,使其形成,可以使高度自動計算,從而和下面的不會發生重疊。例如,所以又發生了同樣的問題,這種方法不推薦。 一. span和div的區別 1.span是行級元素,div是塊級元素2.span占用的寬度是內容的寬度,而div默認是一行。所以一般在頁面中,只有一行或不到一行文字用span,元素占據多行時用div。 ...
摘要:最后,好像也可以利用這種方法,做出莫名其妙的效果真是很莫名其妙的效果 今天在改一個項目的時候卻遇到了一個莫名其妙的屬性:text-decoration,這個屬性,其實就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了,通常會用在移除超鏈接的底線、或一些特殊強調的效果里頭,但是這么容易的屬性,為什么會莫名其妙呢?就讓我們繼續看下去~ 項目里遇到的問題 在我的項目里頭遇到的問題如下,一...
摘要:最后,好像也可以利用這種方法,做出莫名其妙的效果真是很莫名其妙的效果 今天在改一個項目的時候卻遇到了一個莫名其妙的屬性:text-decoration,這個屬性,其實就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了,通常會用在移除超鏈接的底線、或一些特殊強調的效果里頭,但是這么容易的屬性,為什么會莫名其妙呢?就讓我們繼續看下去~ 項目里遇到的問題 在我的項目里頭遇到的問題如下,一...
摘要:也有的元素被完全無視,比如的元素。對于每個元素,必須在所有中找到符合的并將對應的規則進行合并。這樣做是為了減少無效匹配次數,從而匹配快性能更優。識別屬性值,創建對象,并將對象存入解釋器堆棧。數組中的每一項紀錄了這個的,的值,權重層疊規則。 作為前端,我們每天都在與CSS打交道,那么CSS的原理是什么呢? 一、瀏覽器渲染 開篇,我們還是不厭其煩的回顧一下瀏覽器的渲染過程,先上圖:show...
摘要:也有的元素被完全無視,比如的元素。對于每個元素,必須在所有中找到符合的并將對應的規則進行合并。這樣做是為了減少無效匹配次數,從而匹配快性能更優。識別屬性值,創建對象,并將對象存入解釋器堆棧。數組中的每一項紀錄了這個的,的值,權重層疊規則。 作為前端,我們每天都在與CSS打交道,那么CSS的原理是什么呢? 一、瀏覽器渲染 開篇,我們還是不厭其煩的回顧一下瀏覽器的渲染過程,先上圖:show...
閱讀 2311·2021-10-11 10:59
閱讀 2602·2021-10-11 10:58
閱讀 3304·2021-09-08 09:35
閱讀 3783·2021-09-02 15:21
閱讀 1455·2019-08-30 15:53
閱讀 2608·2019-08-29 14:16
閱讀 2068·2019-08-26 14:00
閱讀 2942·2019-08-26 13:52