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

資訊專欄INFORMATION COLUMN

margin 外邊距

phodal / 357人閱讀

摘要：的意思很容易明白，就是外邊距，用更通俗的話說，就是二個盒子之間間距的設置。有許多需要注意的地方，比如塊級元素垂直相鄰外邊距會合并，行內元素實際上不占上下外邊距，左右外邊距也不會合并，浮動元素的外邊距也不會合并。

作者：心葉
時間：2018-04-26 20:39

第一步：基礎說明。

margin的意思很容易明白，就是外邊距，用更通俗的話說，就是二個盒子之間間距的設置。

margin有許多需要注意的地方，比如塊級元素垂直相鄰外邊距會合并，行內元素實際上不占上下外邊距，左右外邊距也不會合并，浮動元素的外邊距也不會合并。

普通元素的margin百分百是按照父級元素（正確的說應該是包含塊，具體可以看這篇文章關于CSS中設置overflow屬性的值為hidden的相關理解）的寬來計算的，而絕對定位的元素的margin百分比是按照第一個定位元素（relative，absolute和fixed）的寬來計算的。

第二步：block元素重疊。

block元素（不考慮float和absolute）在垂直方向發生margin重疊（不考慮writing-mode改變書寫方式）；margin三種重疊：1.相鄰兄弟元素；2.父親元素和第一個或最后一個孩子元素；3.空的block元素。

第三步：重疊條件。

父子元素重疊條件（margin-top）

1.父元素非塊狀格式上下文元素；
2.父元素和第一個子元素之間沒有inline元素分割；
3.父元素沒有border-top或padding-top設置。

父子元素重疊條件（margin-bottom）

1.父元素非塊狀格式上下文元素；
2.父元素沒有border-bottom或padding-bottom設置；
3.父元素和最后一個子元素之間沒有inline元素分割；
4.父元素沒有height,min-height和max-height的限制。

空的block元素重疊

1.元素沒有border或padding或inline設置；
2.沒有height或者min-height設置。

第四步：有價值的細節。

重疊計算方法：正正取最大、負負取最小和正負相加。

在書寫方向的垂直方向，margin:auto會自動分配剩余空間（剩余空間的意思簡單的可以理解為：在沒有設置寬之前的長度去掉你設置的寬余下的那段距離）。

絕對定位元素的非定位方向margin無效（貌似是的，不過描述不準確，其實一直有效，只不過現在只可以影響自己，無法改變兄弟了，因此看起來失效了）。

最后一個題外話，margin-collapse可以設置重疊方式（collapse默認，重疊、discard取消margin,等于margin:0和separate分隔，就是不發生重疊）。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113145.html

相關文章

  • CSS--外邊距合并的問題

    摘要：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 首先看下W3C對于外邊距合并的介紹： 外邊距合并...

    longshengwang 評論0 收藏0

  • CSS 盒模型

    摘要：概覽盒模型也叫框模型，規定了元素框處理元素內容內邊距邊框和外邊距的方式。不幸的是，和在使用自己的非標準模型。當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。如果缺少右外邊距的值，則使用上外邊距的值。 概覽 CSS 盒模型 (Box Model)也叫框模型，規定了元素框處理元素 內容、 內邊距、 邊框 和 外邊距 的方式。 showImg(http...

    heartFollower 評論0 收藏0

  • 「CSS」Margin Collapsing - 外邊距合并

    摘要：外邊距合并都是基于以下三種基本的外邊距合并。空元素它自己的上外邊距和下外邊距合并了。阻止外邊距合并第二種情況不合并設置不為都可。 外邊距合并在排版上帶來非常大的便利，但是人們對其不甚了解，導致使用外邊距的時候總是出現繁多問題，今日寫下一片文章，總結一下外邊距合并。 三種基本的外邊距合并 只有上外邊距和下外邊距才會觸發外邊距合并，左外邊距和右外邊距不會。外邊距合并都是基于以下三種基本的外...

    cheukyin 評論0 收藏0

  • 深入理解CSS外邊距折疊（Margin Collapse）

    摘要：我們可以注意定義中的幾個關鍵字毗鄰兩個或多個垂直方向和普通流。如何避免外邊距疊加上面講了外邊距的疊加，那如何避免呢，其實只要破壞上面講到的四個條件中的任何一個即可毗鄰兩個或多個普通流和垂直方向。 外邊距疊加一直是前端開發必須了解的一個概念，面試一般也會問到這個問題。所以整理一下相關外邊距疊加相關的知識點。外邊距疊加是什么？什么時候會發生外邊距疊加？如何避免外邊距疊加？ 什么是外邊距疊加...

    zhonghanwen 評論0 收藏0

  • CSS規范 > 8 盒模型 Box Model

    摘要：當兩個及以上外邊距折疊，合并后的外邊距寬度是發生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

    suemi 評論0 收藏0

  • 詳解css外邊距折疊（margin collapsing）

    摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...

    孫吉亮 評論0 收藏0

發表評論

0條評論

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