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

資訊專欄INFORMATION COLUMN

深入理解css之BFC

姘擱『 / 3407人閱讀

摘要：屬性，會(huì)破壞文檔流，與非定位元素很難結(jié)合起來用，因此也不適合自適應(yīng)布局。，其對(duì)無感，無法自適應(yīng)剩余瀏覽器空間?？偨Y(jié)的定義，就如同結(jié)界一樣，完全封閉對(duì)外無任何影響。引起的各種屬性與自適應(yīng)布局自適應(yīng)布局與屬性說明

BFC的定義

BFC的全稱是block formatting context（塊狀格式化上下文），當(dāng)BFC起作用的時(shí)候，其元素內(nèi)部無論怎么翻江倒海都不會(huì)影響到外部元素，同樣，外部元素的變化也不會(huì)影響到BFC內(nèi)部元素，這就跟結(jié)界一樣，你可以理解為有一個(gè)很強(qiáng)的護(hù)盾在包裹著BFC元素，這也是為什么BFC元素不會(huì)發(fā)生margin重疊的原因。

引起B(yǎng)FC的條件

BFC起作用不需要特別多的條件，滿足以下情況都會(huì)引起B(yǎng)FC：

html根元素

float不為none的元素

overflow為auto、hidden或scroll的元素

position不為relative或none的元素

display為inline-block的元素

table-cell、table-row或者table-caption元素

在清除浮動(dòng)的時(shí)候，只要元素滿足以上這些情況，就不需要再加clear屬性。

BFC與自適應(yīng)布局

在之前的文章中，我們有說到過float實(shí)現(xiàn)的文字環(huán)繞效果，這時(shí)候如果給文字加上overflow:hidden就可以實(shí)現(xiàn)兩欄自適應(yīng)布局。這樣實(shí)現(xiàn)的好處是文字的寬度是自適應(yīng)的，無論圖片是多大或多小，排版都不會(huì)亂。代碼和效果如下：

.fl {
    float: left;
    width: 100px;
    margin-right: 10px;
}
.content {
    overflow: hidden;
}


    
    

        這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，
        這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示

圖片和文字之間如果需要間距，可以在圖片中設(shè)置margin-right的值或者透明border，也可以在內(nèi)容區(qū)設(shè)置透明border，但是不可以直接在內(nèi)容區(qū)設(shè)置margin-left，如果是設(shè)置了margin-left，其間距必須是圖片的寬度加上你想設(shè)置的間距大小，這樣的間距就會(huì)對(duì)圖片的大小產(chǎn)生依賴。

與BFC有關(guān)的屬性說明

由于引起B(yǎng)FC的屬性都有一些古怪的特性，并不是所有的情況都適合實(shí)現(xiàn)自適應(yīng)布局，下面我們來一一說明下：

float屬性，設(shè)置了float之后，元素本身也會(huì)BFC化，由于具有破壞性和包裹性，也就失去了寬度自適應(yīng)的特性，所以float并不適合自適應(yīng)布局。

position屬性，position會(huì)破壞文檔流，與非定位元素很難結(jié)合起來用，因此也不適合自適應(yīng)布局。

overflow:hidden，這個(gè)屬性要比float和position好很多，設(shè)置了overflow:hidden的元素，整體上跟普通元素差不多，也保留著普通元素的寬度自適應(yīng)性，但是有一個(gè)缺點(diǎn)，就是內(nèi)容溢出會(huì)被裁剪。在平時(shí)的開發(fā)中，這種場景不是很常見，因此overflow: hidden可以作為常用的BFC布局。

display:inline-block，由于inline-block會(huì)讓元素尺寸包裹，因此也不適用于BFC布局。

display:table-cell，table-cell會(huì)讓元素表現(xiàn)得跟單元格一樣，其有兩個(gè)特性，一個(gè)是父元素寬度足夠時(shí)，展示的是設(shè)置的寬度；第二個(gè)是，但元素寬度超出父元素時(shí)，展示的是父元素的寬度。因此，table-cell也可用于BFC布局，其原理就是設(shè)置一個(gè)足夠多的寬度值，例如3000px，這樣就可以充分利用瀏覽器的剩余空間，也不會(huì)產(chǎn)生滾動(dòng)條，內(nèi)容也是自適應(yīng)的。

display:table-row，其對(duì)width無感，無法自適應(yīng)剩余瀏覽器空間。

display:table-caption，沒有任何用處。

總結(jié)

BFC的定義，BFC就如同結(jié)界一樣，完全封閉對(duì)外無任何影響。

引起B(yǎng)FC的各種屬性

BFC與自適應(yīng)布局

自適應(yīng)布局與BFC屬性說明

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

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

相關(guān)文章

  • 【芝士整理】CSS基礎(chǔ)圖譜

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...

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

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說浮動(dòng)會(huì)用就行、浮動(dòng)過時(shí)了，但是對(duì)于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...

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

  • 【學(xué)習(xí)筆記】CSS深入理解之float

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動(dòng)學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個(gè)BFC破壞：使父容器...

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

  • 【學(xué)習(xí)筆記】CSS深入理解之overflow

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會(huì)被重置為作用前提元素非對(duì)應(yīng)方位的尺寸限制拉伸對(duì)于單元格等需要為狀態(tài)才可以與滾動(dòng)條頁面默認(rèn)滾動(dòng)條來自與無 《張鑫旭的CSS深入理解之overflow》學(xué)習(xí)筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認(rèn))|hidd...

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

  • 深入清除浮動(dòng)原理

    摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動(dòng)了。下面詳細(xì)看一下這兩大類清除浮動(dòng)的方式及原理。所以，避免穿透啊，清除浮動(dòng)什么的也好理解了。 關(guān)于浮動(dòng) 設(shè)置為浮動(dòng)的元素會(huì)脫離當(dāng)前文檔流，向左或向右移動(dòng)直到邊緣遇到另一個(gè)浮動(dòng)元素或者到達(dá)邊界。普通元素不會(huì)對(duì)齊造成影響。 浮動(dòng)是把雙刃劍，在給我們的布局帶來便利的同時(shí)有一些缺點(diǎn)需要我們?nèi)ソ鉀Q。例如最常見的父元素塌陷。如下圖所示：...

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

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

0條評(píng)論

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