国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

浮動(dòng) 高度塌陷問(wèn)題 BFC

paraller / 850人閱讀

摘要：容易混淆的是，效果幾乎一樣，但是并沒(méi)有脫離文檔流，并且元素中間有空隙。講高度塌陷問(wèn)題在文檔流中，默認(rèn)父元素不設(shè)置高度是被子元素?fù)伍_，當(dāng)子元素脫離了文檔流，父元素會(huì)出現(xiàn)高度塌陷的問(wèn)題。

58-59講 浮動(dòng) 三個(gè)塊級(jí)div水平方向排列： 不脫離文檔流 
display：inline-block可以把它們?nèi)齻€(gè)變?yōu)樾袃?nèi)塊元素,但是書寫方式必須是這也每個(gè)div必須緊鄰，中間不能留有空隙
下面這種垂直排列會(huì)留有空隙
脫離文檔流 
這個(gè)就很簡(jiǎn)單了，略。
浮動(dòng)的注意事項(xiàng)

不管怎么浮動(dòng)也逃不出如來(lái)(父級(jí))手掌心

當(dāng)前面的元素浮動(dòng)后，后面沒(méi)有浮動(dòng)的元素盡量往左上角跑(往上鉆)

當(dāng)前面的元素沒(méi)有浮動(dòng)，并且是塊級(jí)元素就會(huì)把后面的浮動(dòng)元素?fù)踝?鉆不動(dòng))

浮動(dòng)會(huì)出現(xiàn)文字環(huán)繞的效果

在不脫離文檔流的時(shí)候塊級(jí)元素只設(shè)置一個(gè)height，默認(rèn)寬度是父級(jí)的寬度。此時(shí)設(shè)置一個(gè)float脫離文檔流后寬度就是0，如果該div里面沒(méi)有任何文字內(nèi)容的話，你會(huì)發(fā)現(xiàn)該div消失了

內(nèi)聯(lián)元素脫離文檔流后和塊元素脫離文檔流后效果一樣

后面的浮動(dòng)元素不會(huì)超過(guò)他上面緊鄰的浮動(dòng)元素，如下圖div1 div2左浮動(dòng)，div3右浮動(dòng)，發(fā)現(xiàn)div3并沒(méi)有在div1的右邊

總結(jié) 
本講要記的知識(shí)點(diǎn)非常多，注意脫離文檔流后寬高的變化。容易混淆的是display:inline-block，效果幾乎一樣，但是display:inline-block并沒(méi)有脫離文檔流，并且元素中間有空隙。
61-62講 高度塌陷問(wèn)題 
在文檔流中，默認(rèn)父元素不設(shè)置高度是被子元素?fù)伍_，當(dāng)子元素脫離了文檔流，父元素會(huì)出現(xiàn)高度塌陷的問(wèn)題。由于父元素塌陷，父元素后面的元素也會(huì)跟著擠上來(lái)，導(dǎo)致頁(yè)面布局發(fā)生了改變。
解決方案一： 
給父元素設(shè)置高度，但是子元素高度變大后父元素不能自動(dòng)跟著變大就會(huì)發(fā)生溢出。
什么是BFC 
塊級(jí)格式化上下文 (Block Fromatting Context),在頁(yè)面的每個(gè)元素都有一個(gè)隱藏的屬性叫做"BFC"，它默認(rèn)是關(guān)閉的。當(dāng)它開啟后具有如下特性：

父元素的垂直方向外邊距不會(huì)和子元素外邊距重合

開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋(不會(huì)往里面鉆)

開啟BFC的父元素可以包含浮動(dòng)的子元素

如何開啟BFC

設(shè)置元素浮動(dòng)

設(shè)置元素絕對(duì)定位

設(shè)置元素為inline-block

將元素的overflow設(shè)為一個(gè)非visible的值

解決方案二

給父元素開啟BFC，上面的第4種方法是副作用最小的overflow:hidden或者overflow:auto

IE6解決方案

在IE6上面不知道BFC，但是與其對(duì)應(yīng)的有個(gè)hasLayout，可以直接設(shè)置屬性zoom:1來(lái)解決塌陷問(wèn)題，zoom是把元素放大多少倍的意思。zoom:1一般沒(méi)什么缺陷。

最后

設(shè)置為如下可以解決大部分瀏覽器高度塌陷問(wèn)題：

overflow:hidden;
zoom:1;

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114410.html

相關(guān)文章

  • 浮動(dòng) 高度塌陷問(wèn)題 BFC

    摘要：容易混淆的是，效果幾乎一樣，但是并沒(méi)有脫離文檔流，并且元素中間有空隙。講高度塌陷問(wèn)題在文檔流中，默認(rèn)父元素不設(shè)置高度是被子元素?fù)伍_，當(dāng)子元素脫離了文檔流，父元素會(huì)出現(xiàn)高度塌陷的問(wèn)題。 58-59講 浮動(dòng) 三個(gè)塊級(jí)div水平方向排列： 不脫離文檔流 display：inline-block可以把它們?nèi)齻€(gè)變?yōu)樾袃?nèi)塊元素,但是書寫方式必須是這也每個(gè)div必須緊鄰，中間不能留有空隙 下面這...

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

  • CSS-高度塌陷問(wèn)題

    摘要：可以得出產(chǎn)生高度塌陷的原因在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。目錄 CSS-高度塌陷問(wèn)題 表現(xiàn) 產(chǎn)生的原因 高度塌陷的解決辦法： ...

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

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

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

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

  • 解決高度塌陷問(wèn)題

    摘要：但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。所謂高度塌陷就是在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。 由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致...

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

  • html高度塌陷問(wèn)題解決

    摘要：但是會(huì)導(dǎo)致寬度丟失，不推薦使用這種方式將元素的設(shè)置非值解決父元素高度塌陷副作用最小的兼容性在中沒(méi)有但是具有另一個(gè)隱含的屬性叫該屬性的作用和類似，所在瀏覽器通過(guò)開啟來(lái)解決問(wèn)題。高度塌陷的問(wèn)題：?? ?當(dāng)開啟元素的BFC以后，元素將會(huì)有如下的特性?? ?1 父元素的垂直外邊距不會(huì)和子元素重疊?? ?開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋?? ?開啟BFC的元素可以包含浮動(dòng)的子元素?? ?如何開啟元...

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

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

0條評(píng)論

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