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

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

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

使用float脫離文檔流時(shí)，其他盒子會(huì)無視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(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;
  }
  
     這是第一個(gè)DIV
  
  
     這是第二個(gè)DIV

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

對(duì)于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無視它。
例如：將上例中float：left改為position: absolute?？梢钥吹剑诙€(gè)div的文字亦被第一個(gè)div的文字給覆蓋了

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

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

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

相關(guān)文章

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

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

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

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

Cristalven 2019-08-28 18:20 評(píng)論0 收藏0
CSS 3-浮動(dòng)、定位

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

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

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

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

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

EddieChan 2019-08-30 12:53 評(píng)論0 收藏0