亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css float的深入研究

Tony / 1086人閱讀

摘要：去年就看到張鑫旭大神的這篇文章，看了好幾遍才看懂。而對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。而這造成的顯示上的差異就是文檔流中的文字實(shí)體不會與浮動元素重疊，而會與絕對定位元素重疊。

去年就看到張鑫旭大神的這篇文章，看了好幾遍才看懂。后來再去想其中的一些原理，又忘了。于是打算把它記下來，一來做個備份，二來希望與君共勉。

這里我對文章以自己的理解做了一些精簡，完整版的可以去http://www.zhangxinxu.com/wor...這里看

浮動的本質(zhì)是：包裹性和破壞性 
包裹性：換種說法就是讓元素inline-block化，例如一個div標(biāo)簽?zāi)J(rèn)寬度是100%顯示的，但是一旦設(shè)置了float，則100%默認(rèn)寬度就會變成自適應(yīng)內(nèi)部元素的寬度。
其實(shí)float就是一個帶有方向的display:inline-block屬性


破壞性：如果我們要理解浮動的破壞性，我們就要從浮動最原始的意義入手。浮動出現(xiàn)的意義其實(shí)只是用來讓文字環(huán)繞圖片而已，僅此而已。

浮動之所以會環(huán)繞含有float屬性的圖片是因?yàn)楦悠茐牧苏５膌ine boxes
我們先來了解一下line boxes模型。先看下面的一段普通的HTML代碼：

這是一行普通的文字，這里有個 em 標(biāo)簽。
代碼中的4種boxes(順序從里到外)：

inline boxes：

?

inline boxes不會讓內(nèi)容成塊顯示，而是排成一行，如果外部含inline屬性的標(biāo)簽(span,a,cite等)，則屬于inline boxes，如果是個光禿禿的文字，則屬于匿名inline boxes

line boxes：

一個一個的inline boxes組成了line boxes.這是浮動影響布局的關(guān)鍵box類型

content area：

content area是一種圍繞文字看不見的box.content area的大小與font-size大小相關(guān)

containing box：

p標(biāo)簽所在的containing box，此box包含了其他的boxes
為什么浮動能使文字環(huán)繞圖片？

默認(rèn)情況下，圖片與文字混排應(yīng)該是這個樣子：圖片與文字基線對齊，圖片與文字在同一行上，如下圖所示：

上圖中，圖片為一個inline boxes,兩邊文字也是inline boxes。由于line boxes的高度是由其內(nèi)部最高的inline boxes的高度決定的，所以這里的line boxes的高度就是圖片的高度


此時圖片與文字是同一box類型的元素，是在同一行上的，所以，默認(rèn)狀態(tài)下，一張圖片只能與一行文字對齊。而要想讓一張圖片要與多行文字對齊，您唯一能做的就是破壞正常的line boxes模型
含有浮動屬性的圖片與文字

先看一下圖片添加了float:left樣式后的表現(xiàn)，見下圖：

正常情況下，圖片自身就是個inline-boxes，與兩側(cè)的文字inline-boxes共同組成了line-boxes，但是一旦圖片加入了浮動，情況就完全變了。浮動徹底破壞了圖片的inline-boxes特性，至少有一點(diǎn)可以肯定，圖片的inline-boxes不存在了


一旦圖片失去了inline-boxes特性就無法與inline-boxes的文字排在一行了，就會從line-boxes上脫離出來，跟隨自身的方向?qū)傩?，靠邊排?/p>

這個從line boxes上脫離的浮動元素其實(shí)就是一個軀體，一個空殼子，表象。因?yàn)槠錄]有inline boxes。有人可能會問，沒有inline boxes就沒有唄，有什么大不了的？非也非也！這個inline boxes很個很重要的概念

為什么inline-boxes很重要？ 
在目前的CSS的世界中，所有的高度都是有兩個CSS模型產(chǎn)生的，一個是盒子模型，對應(yīng)CSS為”height+padding+margin”，另外一個是line box模型，對應(yīng)樣式為”line-height”。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內(nèi)在的height值就會起作用，即使您看不到”height”這個詞


而后者針對于文字等這類inline boxes的元素（圖片也屬于inline boxes，但其height比line-height作用更兇猛，故其inline boxes高度等于其自身高度，對line-height無反應(yīng)），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個原因），而真正的高度表現(xiàn)則是由每行眾多的inline boxes組成的line boxes（等于內(nèi)部最高的inline box的高度），而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或是p標(biāo)簽之類的高度了


所以，對于line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動卻恰恰做了這么齷齪的事情，其直接將元素的inline boxes也破壞了，于是這些元素也就沒有了高度


沿用上面圖片的例子。浮動破壞了圖片的inline box，產(chǎn)生了兩個結(jié)果：一是圖片無法與文字同行顯示，脫離了其原來所在的line box鏈；二是沒有了高度（無inline box -> 無line box -> 無高度）。而這些結(jié)果恰恰是文字環(huán)繞圖片顯示所必須的
文字環(huán)繞圖片顯示的原因

這里有個動畫，可以很好的幫助我們理解文字環(huán)繞圖片顯示的原因：http://image.zhangxinxu.com/f...

動畫所演示的關(guān)鍵點(diǎn)其實(shí)就是上面的一系列分析與講解，即“包裹與破壞”！包裹是讓標(biāo)簽占據(jù)的空間水平收縮，破壞是破壞的inline box。正如上面講解的，inline boxes是高度形成的基礎(chǔ)，浮動破壞了inline boxes也就沒有高度可言了。正是由于浮動元素沒有了inline boxes，沒有了inline boxes高度，才能讓其他inline boxes元素重新整合，環(huán)繞浮動元素排列


我們現(xiàn)在假設(shè)浮動沒有破壞inline boxes，那么雖然圖片會靠左顯示，但是其會與文字形成新的高度包絡(luò)線（同類聚合），且只能與一行文字形成line box，無法實(shí)現(xiàn)文字環(huán)繞效果，所以浮動破壞inline boxes是必須的
浮動(float) vs 絕對定位(absolute)

了解了浮動之后，我們來對比一下絕對定位

與浮動元素一樣，絕對定位元素也具有"包裹性"和"破壞性"，并適用于任何元素，那么他們之間有什么區(qū)別呢？

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


而對于使用absolute脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。


而這造成的顯示上的差異就是：文檔流中的文字實(shí)體不會與浮動元素重疊，而會與絕對定位元素重疊。這就是文字環(huán)繞顯示的重要原因之一：雖然圖片實(shí)際占據(jù)的高度為0，但是由于其寬度實(shí)體存在（包裹性），同樣是content area實(shí)體的文字不會與之重疊（外部的容器盒子containing box(p,div,ul,li)會重疊），這就好比籃球場上站了個植物人，雖然其幾乎不可能得分，運(yùn)球之類，但是他的實(shí)體在那里，它可以阻擋同一水平空間上的同一類型的個體（即人）直接穿過去，要通過，得繞道。但是其無法阻擋整個球隊(duì)的向前推進(jìn)
觀后感

每次看這篇文章都有不同的感悟，張鑫旭大神對很多問題的理解非常深刻和獨(dú)到，很欣賞他的文章。這篇文章中還有好幾個知識點(diǎn)需要深入理解，比如css行高line-height的一些深入理解及應(yīng)用，absolute的深入理解系列，我會找個時間整理一下，有興趣的伙伴也可以去看下

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111885.html

相關(guān)文章

  • CSS 最核心的幾個概念

    摘要：本文將講述中最核心的幾個概念，包括盒模型等。塊級元素的默認(rèn)為，而內(nèi)聯(lián)元素則是根據(jù)其自身的內(nèi)容或子元素來決定其寬度。如果該元素的下一個兄弟元素中有內(nèi)聯(lián)元素通常是文字，則會圍繞該元素顯示，形成類似文字圍繞圖片的效果。 本文將講述 CSS 中最核心的幾個概念，包括：盒模型、position、float等。這些是 CSS 的基礎(chǔ)，也是最常用的幾個屬性，它們之間看似獨(dú)立卻又相輔相成。為了掌握它們...

    SwordFly 評論0 收藏0

  • CSS魔法堂：說說Float那個被埋沒的志向

    摘要：時其寬度始終保持占滿寬度的態(tài)度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評論0 收藏0

  • 浮動(Floats)原理與清除浮動

    摘要：父元素的頂端會限制浮動元素防止一直浮動到頁面頂端。例子戳這里清除浮動清除浮動的目的是為了解決高度塌陷的問題撐開浮動父元素。原理會在元素的之上增加一個清除區(qū)域這個區(qū)域會在元素的上增加額外間隔并且不允許浮動元素進(jìn)入這個區(qū)域。 浮動概念 浮動元素會脫離文檔的普通流,根據(jù)float的值向左或向右移動,直到它的外邊界碰到父元素的內(nèi)邊界或另一個浮動元素的外邊界為止。由于浮動框不在文檔的普通流中,所...

    andong777 評論0 收藏0

  • CSS基礎(chǔ)知識之float

    摘要：前段時間寫過一篇基礎(chǔ)知識之，當(dāng)時對的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出原文已修正，如有誤導(dǎo)實(shí)在抱歉。浮動的基礎(chǔ)知識浮動有個屬性左浮動右浮動不浮動繼承。浮動元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級元素會環(huán)繞該元素，塊級元素則不受影響。 前段時間寫過一篇CSS基礎(chǔ)知識之position，當(dāng)時對float的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出（原文已修正，如有誤導(dǎo)實(shí)在抱歉）。現(xiàn)對float進(jìn)行更深入的...

    wuyangchun 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動能實(shí)現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個問題：1.浮動的原始用途...

    Tonny 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<