成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[CSS]CSS中使用span和div遇到的問(wèn)題

bladefury / 1247人閱讀

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

一. span和div的區(qū)別

1.span是行級(jí)元素，div是塊級(jí)元素
2.span占用的寬度是內(nèi)容的寬度，而div默認(rèn)是一行。
所以一般在頁(yè)面中，只有一行或不到一行文字用span，元素占據(jù)多行時(shí)用div。

二. 問(wèn)題

下圖是希望得到的效果

div在兩個(gè)span的下方，但是如果這么寫，

div和span的位置重疊，因?yàn)閷?duì)span元素設(shè)置了float屬性，從而導(dǎo)致浮動(dòng)塌陷，解決辦法是將span元素的高度計(jì)算進(jìn)去，但是因?yàn)閟pan元素是行級(jí)元素，無(wú)法設(shè)置高度，所以需要其他解決辦法。

三. 解決辦法 1. 設(shè)置div高度

這樣就可以了。

2. 設(shè)置div屬性display

將div設(shè)置為display: inline-block，使其既具有block元素的特性，可以設(shè)置寬度和高度，同時(shí)也具有inline元素的不換行的特性。
但是這是對(duì)第二個(gè)span元素設(shè)置的float: right屬性不生效，因?yàn)閐isplay: inline-block會(huì)使元素按行依次排列，所以第二個(gè)span元素的float: right不生效，要想達(dá)到想要的效果，可以通過(guò)設(shè)置margin-left來(lái)實(shí)現(xiàn)。

3. 設(shè)置div屬性overflow

將div設(shè)置為overflow: hidden，使其形成BFC，可以使div高度自動(dòng)計(jì)算，從而和下面的div不會(huì)發(fā)生重疊。

4. 設(shè)置content屬性position

將content設(shè)置為position: absolute，所以content會(huì)去找第一個(gè)position屬性不為static的父元素，即html，于是就會(huì)相對(duì)于html向下移動(dòng)30px。

這種方法雖然也可以解決問(wèn)題，但是也會(huì)帶來(lái)新的問(wèn)題，因?yàn)閜osition: absolute會(huì)導(dǎo)致content元素脫離文檔流，如果在content元素下面還有其他元素，那么其他元素位置可能會(huì)和content元素重疊。
例如，

所以又發(fā)生了同樣的問(wèn)題，這種方法不推薦。

四. 總結(jié)

對(duì)于span和div都用時(shí)，同時(shí)span元素設(shè)置float屬性時(shí)，還是對(duì)span外加div使其變成塊級(jí)元素并設(shè)置高度，才不會(huì)使其后面的元素受到影響。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113281.html

相關(guān)文章

  • [CSS]CSS中使用span和div遇到的問(wèn)題

    摘要：所以一般在頁(yè)面中，只有一行或不到一行文字用，元素占據(jù)多行時(shí)用。設(shè)置屬性將設(shè)置為，使其形成，可以使高度自動(dòng)計(jì)算，從而和下面的不會(huì)發(fā)生重疊。例如，所以又發(fā)生了同樣的問(wèn)題，這種方法不推薦。 一. span和div的區(qū)別 1.span是行級(jí)元素，div是塊級(jí)元素2.span占用的寬度是內(nèi)容的寬度，而div默認(rèn)是一行。所以一般在頁(yè)面中，只有一行或不到一行文字用span，元素占據(jù)多行時(shí)用div。 ...

    yy13818512006 評(píng)論0 收藏0

  • CSS 搞怪的 text-decoration

    摘要：最后，好像也可以利用這種方法，做出莫名其妙的效果真是很莫名其妙的效果 今天在改一個(gè)項(xiàng)目的時(shí)候卻遇到了一個(gè)莫名其妙的屬性：text-decoration，這個(gè)屬性，其實(shí)就只是用來(lái)把一段文字加上上橫線、刪除線或底線的屬性罷了，通常會(huì)用在移除超鏈接的底線、或一些特殊強(qiáng)調(diào)的效果里頭，但是這么容易的屬性，為什么會(huì)莫名其妙呢？就讓我們繼續(xù)看下去~ 項(xiàng)目里遇到的問(wèn)題 在我的項(xiàng)目里頭遇到的問(wèn)題如下，一...

    Mertens 評(píng)論0 收藏0

  • CSS 搞怪的 text-decoration

    摘要：最后，好像也可以利用這種方法，做出莫名其妙的效果真是很莫名其妙的效果 今天在改一個(gè)項(xiàng)目的時(shí)候卻遇到了一個(gè)莫名其妙的屬性：text-decoration，這個(gè)屬性，其實(shí)就只是用來(lái)把一段文字加上上橫線、刪除線或底線的屬性罷了，通常會(huì)用在移除超鏈接的底線、或一些特殊強(qiáng)調(diào)的效果里頭，但是這么容易的屬性，為什么會(huì)莫名其妙呢？就讓我們繼續(xù)看下去~ 項(xiàng)目里遇到的問(wèn)題 在我的項(xiàng)目里頭遇到的問(wèn)題如下，一...

    TANKING 評(píng)論0 收藏0

  • 天天都在使用CSS，那么CSS的原理是什么呢？

    摘要：也有的元素被完全無(wú)視，比如的元素。對(duì)于每個(gè)元素，必須在所有中找到符合的并將對(duì)應(yīng)的規(guī)則進(jìn)行合并。這樣做是為了減少無(wú)效匹配次數(shù)，從而匹配快性能更優(yōu)。識(shí)別屬性值，創(chuàng)建對(duì)象，并將對(duì)象存入解釋器堆棧。數(shù)組中的每一項(xiàng)紀(jì)錄了這個(gè)的，的值，權(quán)重層疊規(guī)則。 作為前端，我們每天都在與CSS打交道，那么CSS的原理是什么呢？ 一、瀏覽器渲染 開(kāi)篇，我們還是不厭其煩的回顧一下瀏覽器的渲染過(guò)程，先上圖：show...

    lijy91 評(píng)論0 收藏0

  • 天天都在使用CSS，那么CSS的原理是什么呢？

    摘要：也有的元素被完全無(wú)視，比如的元素。對(duì)于每個(gè)元素，必須在所有中找到符合的并將對(duì)應(yīng)的規(guī)則進(jìn)行合并。這樣做是為了減少無(wú)效匹配次數(shù)，從而匹配快性能更優(yōu)。識(shí)別屬性值，創(chuàng)建對(duì)象，并將對(duì)象存入解釋器堆棧。數(shù)組中的每一項(xiàng)紀(jì)錄了這個(gè)的，的值，權(quán)重層疊規(guī)則。 作為前端，我們每天都在與CSS打交道，那么CSS的原理是什么呢？ 一、瀏覽器渲染 開(kāi)篇，我們還是不厭其煩的回顧一下瀏覽器的渲染過(guò)程，先上圖：show...

    The question 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<