float與absolute脫離文檔流的區(qū)別

fantix 發(fā)布于2019-08-01 15:53 / 831人閱讀

摘要：對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。例如將上例中改為。可以看到，第二個的文字亦被第一個的文字給覆蓋了

使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍。例如：

 .firstdiv{
    background-color:rgba(125,125,235,0.4);
    height:200px;
    width: 200px;
    float: left;
  }
  .seconddiv{
    background-color: #faf;
    height:300px;
    width: 300px;
    border:1px solid red;
  }
  
     這是第一個DIV
  
  
     這是第二個DIV

根據(jù)chrome調(diào)試和紅色邊框，可以看到第二個div的背景和邊框是占據(jù)了第一個DIV的空間的，但是第二個div的文本仍然為第一個DIV留出了位置。

對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。
例如：將上例中float：left改為position: absolute。可以看到，第二個div的文字亦被第一個div的文字給覆蓋了

云服務(wù)器 GPU云服務(wù)器 java輸出流的區(qū)別云文檔與服務(wù)器云文檔與服務(wù)器連接 absoluted

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50177.html

相關(guān)文章

float與absolute脫離文檔流的區(qū)別

摘要：對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。例如將上例中改為。可以看到，第二個的文字亦被第一個的文字給覆蓋了使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍。例如： .firstdiv{ background-color:rgba(125,125,235,0.4); height:200p...

itvincent 2019-08-29 11:29 評論0 收藏0
“位置”在css里的細(xì)節(jié)

摘要：在確定頁面元素的準(zhǔn)確位置時，需要細(xì)致地參考這些邊。它們的位置從下到上依次是為負(fù)的定位元素。本文只介紹了一部分有關(guān)位置的細(xì)節(jié)知識，如果你也曾對這些內(nèi)容有所困惑，那么希望能有所幫助。位置是個怎樣的概念哎，這個元素怎么跑那里去了？回想一下，在我們覺得樣式崩了，頁面出bug了的時候，是不是會有相當(dāng)一部分情況都可以描述成上面這句話呢？我們在寫css的時候，就會經(jīng)常考慮位置這個事。理念就是...

Cristalven 2019-08-28 18:20 評論0 收藏0
CSS 3-浮動、定位

摘要：讓元素脫離文檔流有三種方法浮動絕對定位固定定位元素脫離文檔流定位的三種布局機(jī)制文檔流浮動定位。定位元素會脫離文檔流。浮動的元素是先站住自己所在文檔流的位置，然后左右浮動。文檔流文檔流是一種默認(rèn)定位方式，在文檔流中元素框的位置由元素在html中的位置決定，文檔流中元素的position屬性為默認(rèn)的static或繼承來的static并按照普通流定位。塊級元素獨(dú)占一行，自上而下排列；內(nèi)聯(lián)...

TalkingData 2019-08-29 15:32 評論0 收藏0
【學(xué)習(xí)筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學(xué)習(xí)筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。《張鑫旭的CSS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應(yīng)用場景中也可用絕對定位替代絕對定位的行為表現(xiàn) 無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
html和css常見的一些問題總結(jié)

摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環(huán)繞效果有關(guān)。 html 標(biāo)簽一般在html有塊級元素和行級元素，主要的塊級元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

EddieChan 2019-08-30 12:53 評論0 收藏0