成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

margin 外邊距

phodal / 358人閱讀

摘要：的意思很容易明白，就是外邊距，用更通俗的話說，就是二個(gè)盒子之間間距的設(shè)置。有許多需要注意的地方，比如塊級元素垂直相鄰?fù)膺吘鄷喜ⅲ袃?nèi)元素實(shí)際上不占上下外邊距，左右外邊距也不會合并，浮動(dòng)元素的外邊距也不會合并。

作者：心葉
時(shí)間：2018-04-26 20:39

第一步：基礎(chǔ)說明。

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

margin有許多需要注意的地方，比如塊級元素垂直相鄰?fù)膺吘鄷喜?，行?nèi)元素實(shí)際上不占上下外邊距，左右外邊距也不會合并，浮動(dòng)元素的外邊距也不會合并。

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

第二步：block元素重疊。

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

第三步：重疊條件。

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

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

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

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

空的block元素重疊

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

第四步：有價(jià)值的細(xì)節(jié)。

重疊計(jì)算方法：正正取最大、負(fù)負(fù)取最小和正負(fù)相加。

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

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

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

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

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

相關(guān)文章

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

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

    longshengwang 評論0 收藏0

  • CSS 盒模型

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

    heartFollower 評論0 收藏0

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

    摘要：外邊距合并都是基于以下三種基本的外邊距合并?？赵厮约旱纳贤膺吘嗪拖峦膺吘嗪喜⒘?。阻止外邊距合并第二種情況不合并設(shè)置不為都可。 外邊距合并在排版上帶來非常大的便利，但是人們對其不甚了解，導(dǎo)致使用外邊距的時(shí)候總是出現(xiàn)繁多問題，今日寫下一片文章，總結(jié)一下外邊距合并。 三種基本的外邊距合并 只有上外邊距和下外邊距才會觸發(fā)外邊距合并，左外邊距和右外邊距不會。外邊距合并都是基于以下三種基本的外...

    cheukyin 評論0 收藏0

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

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

    zhonghanwen 評論0 收藏0

  • CSS規(guī)范 > 8 盒模型 Box Model

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

    suemi 評論0 收藏0

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

    摘要：這個(gè)例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時(shí)會合并或折疊為一個(gè)外邊距。 外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下 前文 這是的一個(gè)經(jīng)典的老問題，因?yàn)橹皠偤糜凶x者朋友問到，順便整理一下。 從一個(gè)簡單例子說起 先看一個(gè)簡單示例： `` `.sli...

    孫吉亮 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<