<ul id="aa0km"></ul>

<del id="aa0km"></del>

<strike id="aa0km"></strike>

<strike id="aa0km"></strike>

<strike id="aa0km"></strike>

css 的margin學習筆記

leiyi 發布于2019-08-28 18:00 / 1725人閱讀

摘要：的特性始終是透明的。例如就等于如果只有兩個值，第一個值表示上下值，第二個值為左右的值。垂直外邊距合并問題外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

Margin的特性

margin始終是透明的。

margin通過使用多帶帶的屬性，可以對上、右、下、左的外邊距進行設置。即：margin-top、margin-right、margin-bottom、margin-left。

外邊距的 margin-width 的值類型有：auto | length | percentage

也可以使用簡寫的外邊距屬性同時改變所有的外邊距：margin: top right bottom left;

1、如果margin只有一個值，表示上右下左的margin同為這個值。例如：margin:10px; 就等于 margin:10px
10px 10px 10px;

2、如果 margin 只有兩個值，第一個值表示上下margin值，第二個值為左右margin的值。例如：margin:10px 20px;
就等于 margin:10px 20px 10px 20px;

3、如果margin有三個值，第一個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。例如：margin:10px
20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四個值，那這四個值分別對應上右下左這四個margin值。例如：margin:10px 20px 30px 40px;

在實際應用中，不推薦使用三個值的margin，一是容易記錯，二是不容易日后修改，一開始如果寫成margin:10px 20px 30px;日后需求改動為上10px，右30px，下30px，左20px，你還是得把這個margin拆開為margin:10px 30px 30px 20px;費力且不討好，不如一開始就老老實實的寫成margin:10px 20px 30px 20px;來的實在，不要為了節省倆字節而讓日后再次開發的成本上升。

垂直外邊距合并問題

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。

W3 CSS 外邊距合并
發生這個問題的原因是:根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

演示

要解決垂直外邊距合并，只需為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

【學習筆記】CSS深入理解之margin

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...

stefan 2019-08-30 15:54 評論0 收藏0
重學前端學習筆記（二十五）--CSS的正常流

摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎上，有相關規則，使得一些盒占據了正常流需要的空間，可以把理解為文字環繞。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯...

dcr309duan 2019-08-30 11:00 評論0 收藏0
重學前端學習筆記（二十五）--CSS的正常流

摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎上，有相關規則，使得一些盒占據了正常流需要的空間，可以把理解為文字環繞。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯...

leap_frog 2019-08-02 15:10 評論0 收藏0
重學前端學習筆記（二十五）--CSS的正常流

摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎上，有相關規則，使得一些盒占據了正常流需要的空間，可以把理解為文字環繞。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯...

toddmark 2019-08-23 17:51 評論0 收藏0