成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于CSS中設(shè)置overflow屬性的值為hidden的相關(guān)理解

codercao / 967人閱讀

摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。如何觸發(fā)只需要保證滿足下面至少一條就會(huì)觸發(fā)根元素設(shè)置了值不為的元素設(shè)置了屬性不為的元素設(shè)置了屬性不為和的元素設(shè)置了的值為和中的任何一個(gè)的元素。

作者：心葉
時(shí)間：2018-04-18 17:53

包裹元素剪裁條件

是不是包裹元素overflow設(shè)置為hidden以后，內(nèi)部元素如果超過(guò)包裹元素的話就會(huì)被剪裁？答案是不一定，這要看此刻的CSS環(huán)境。

根據(jù)對(duì)CSS2.1規(guī)范的理解，可以這樣表述：如果一個(gè)元素的包含塊的overflow屬性設(shè)置為hidden，那么超過(guò)這個(gè)包含塊部分的內(nèi)容就會(huì)被剪裁。

因此我們需要學(xué)會(huì)尋找一個(gè)元素的包含塊，不過(guò)在這之前，讓我們先簡(jiǎn)單的知道如果一個(gè)元素的overflow屬性設(shè)置為hidden，被其包裹的內(nèi)容如果溢出需要同時(shí)滿足的條件：

擁有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式；

內(nèi)部溢出的元素是通過(guò)position:absolute絕對(duì)定位或position:fixed固定定位。

尋找包含塊 什么是包含塊？

根據(jù)CSS2.1規(guī)范里面的說(shuō)明，簡(jiǎn)單的說(shuō)就是：用來(lái)確定一個(gè)元素的盒子的位置和尺寸的矩形就叫這個(gè)元素的包含塊。

尋找規(guī)則

因此包含塊是一個(gè)非常有意義而且涉及屬性很多的概念，至于如何確定一個(gè)元素的盒子的包含塊是誰(shuí)，遵循下面幾條規(guī)則：

根元素的包含塊

其包含塊又叫初始包含塊，可以先認(rèn)為就是可視區(qū)域（其實(shí)不準(zhǔn)確，姑且這樣說(shuō)比較簡(jiǎn)單）。

非根元素，且其position屬性是relative和static的元素的包含塊

它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。

非根元素，且其position屬性是absolute的元素的包含塊

它的包含塊由最近的position不為static的祖先元素創(chuàng)建（如果沒(méi)有找到這樣的祖先元素，這個(gè)絕對(duì)定位的元素的包含塊為初始包含塊）；具體創(chuàng)建方法如下：

如果這個(gè)祖先元素是行內(nèi)元素，包含塊的范圍是這個(gè)祖先元素中的第一個(gè)和最后一個(gè)行內(nèi)盒的padding box圍起來(lái)的區(qū)域；

如果這個(gè)祖先元素不是行內(nèi)元素，包含塊的范圍是這個(gè)祖先元素的內(nèi)邊距+width區(qū)域。

為什么會(huì)清除浮動(dòng)造成的影響

一個(gè)有趣的現(xiàn)象是：一個(gè)沒(méi)有設(shè)置高度的父元素包裹一個(gè)子元素，父元素應(yīng)該會(huì)被子元素?fù)纹饋?lái)，也就是有高了，不過(guò)如果你給子元素設(shè)置了浮動(dòng)，顯然原來(lái)父元素?fù)纹饋?lái)的高就塌了，到這里好像都很正常；接著，你給父元素加了一個(gè)overflow:hidden，發(fā)現(xiàn)父元素的高又有了，好像浮動(dòng)被清除了一樣，為什么會(huì)這樣？

其實(shí)歸根結(jié)底，這里的浮動(dòng)沒(méi)有清除，只是因?yàn)閛verflow屬性的值是hidden的時(shí)候會(huì)形成一個(gè)BFC，而B(niǎo)FC就是一個(gè)隔離的渲染區(qū)域，因此浮動(dòng)造成的高崩塌會(huì)導(dǎo)致對(duì)外部布局的影響，為了消除這種不益的表現(xiàn)，計(jì)算高度的時(shí)候浮動(dòng)元素也計(jì)算進(jìn)去了。

如果說(shuō)到這里就停止，你可能會(huì)非常好奇，除了這里的情況還有什么情況會(huì)產(chǎn)生BFC，而B(niǎo)FC環(huán)境下具體會(huì)有哪些規(guī)則？接著下段來(lái)講。

BFC（塊級(jí)格式化上下文）

BFC是一個(gè)非常有用的環(huán)境，如果用一句話來(lái)說(shuō)明它是什么樣的存在：一個(gè)隔離的渲染區(qū)域，容器里面的子元素不會(huì)在布局上影響到外面的元素，反之也是如此。

如何觸發(fā)BFC?

只需要保證滿足下面至少一條就會(huì)觸發(fā)BFC：

根元素body；

設(shè)置了float值不為none的元素；

設(shè)置了overflow屬性不為visible的元素；

設(shè)置了屬性position不為relative和static的元素；

設(shè)置了display的值為flex、table-cell、table-caption和inline-block中的任何一個(gè)的元素。

可以看出來(lái)，就是一個(gè)比較獨(dú)立的塊，因?yàn)槭且粋€(gè)獨(dú)立的環(huán)境，在開(kāi)發(fā)時(shí)候適度使用會(huì)有效降低開(kāi)發(fā)和維護(hù)難度。

BFC環(huán)境下的特性或規(guī)則

大致可以歸納為三個(gè)方面：獨(dú)立性、垂直分布規(guī)則和水平分布規(guī)則。

獨(dú)立性：BFC是頁(yè)面上一個(gè)隔離的容器，和外面的關(guān)系是不會(huì)互相影響，對(duì)浮動(dòng)而言也是，不會(huì)和浮動(dòng)元素發(fā)生重疊，高也和上面提到的一樣不會(huì)崩塌；

垂直分布規(guī)則：BFC的內(nèi)部里面的一個(gè)個(gè)盒子在垂直方向一個(gè)接著一個(gè)排放，位置由margin決定，兩個(gè)相鄰的盒子margin會(huì)發(fā)生重疊；

水平分布規(guī)則：BFC里面的盒子的左外邊緣和包含塊的左邊相接觸，簡(jiǎn)單的理解就是水平方向不會(huì)發(fā)生margin重疊。

上面只是大體上說(shuō)明一下BFC，具體使用的時(shí)候還有很多沒(méi)有說(shuō)明的，比如上面垂直方向上的重疊如何控制發(fā)生與否？如果重疊那么是如何計(jì)算的？不過(guò)本篇文章到這里就結(jié)束了。

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

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

相關(guān)文章

  • 深入理解css中的margin屬性（最新瀏覽器支持）

    摘要：豎直方向的外邊距合并兩個(gè)豎直方向的盒子相遇時(shí)，其豎直方向的距離等于上方盒子的下外邊距和下方盒子的上外邊距中較大的一個(gè)。 本文啟發(fā)于博客園一篇2016年的深入理解css中的margin屬性文章，根據(jù)當(dāng)前瀏覽器（chrome 71.0.3578.98（正式版本） （64 位）），加上自己的理解，每個(gè)例子都是親測(cè)過(guò) 這篇博文主要分為以下幾個(gè)部分： margin--基礎(chǔ)知識(shí)margin--在同...

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

  • 深入理解css中的margin屬性（最新瀏覽器支持）

    摘要：豎直方向的外邊距合并兩個(gè)豎直方向的盒子相遇時(shí)，其豎直方向的距離等于上方盒子的下外邊距和下方盒子的上外邊距中較大的一個(gè)。 本文啟發(fā)于博客園一篇2016年的深入理解css中的margin屬性文章，根據(jù)當(dāng)前瀏覽器（chrome 71.0.3578.98（正式版本） （64 位）），加上自己的理解，每個(gè)例子都是親測(cè)過(guò) 這篇博文主要分為以下幾個(gè)部分： margin--基礎(chǔ)知識(shí)margin--在同...

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

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到的神奇之處。實(shí)例解決侵占浮動(dòng)元素的問(wèn)題我們知道浮動(dòng)元素會(huì)脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時(shí)，往往是添加了一個(gè)樣式，又或者是修改了某個(gè)屬性，就達(dá)到了我們的預(yù)期。而B(niǎo)FC就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到BFC的神奇之處。 一、什么是BFC（Block Form...

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

  • CSS布局相關(guān)基本概念

    摘要：當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間基于文檔流，理解定位模式相對(duì)定位，即相對(duì)于元素在文檔流中位置進(jìn)行偏移。絕對(duì)定位，即完全脫離文檔流，相對(duì)于屬性非值的最近父級(jí)元素進(jìn)行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測(cè)試?yán)樱篽ttps...

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

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

0條評(píng)論

閱讀需要支付1元查看
<