【前端學習】-margin

Big_fat_cat 發布于2019-08-29 13:11 / 2571人閱讀

摘要：屬性單位接受任何長度單位等，，百分比。子元素設置為，渲染之后為垂直方向使用，距離不是父元素高度的百分比，也是父元素寬度的百分比。原因因為折疊只會發生在塊級元素浮動元素脫離了正常流，與其他元素不處于同一個流。

一、margin描述
【概念】盒模型中的外邊距，即圍繞在元素邊框的空白區域，關于盒模型可以參考https://segmentfault.com/a/11...
【屬性值】
上外邊距 margin-top:10px
右外邊距 margin-right:10px
下外邊距 margin-bottom:10px
左外邊距 margin-left:10px
當然，也縮寫為 margin :top right bottom left（上右下左，即順時針方向）
指定三個值 margin:10px 20px 30px；分別指定了上 10px、右 20px 、下 30px，即最后左邊的間距默認是0；
指定兩個值 margin:10px 20px；分別指定了上下 10px、左右20px
指定一個值 margin:10px；指定上下左右都是10px。
【屬性單位】接受任何長度單位(px/em/rem等），auto，百分比。

二、利用margin:0 auto實現塊級元素水平居中

三、屬性單位為%
水平方向使用%，距離為父元素寬度的百分比。如下圖所示，父元素寬度是500px。子元素margin-left設置為10%，渲染之后為50px

垂直方向使用%，距離不是父元素高度的百分比，也是父元素寬度的百分比。如下圖所示，父元素寬度是500px。子元素margin-top設置為10%，渲染之后為50px

四、margin折疊
1.相鄰元素水平方向不合并，兩個元素的距離等于兩個元素的外邊距之和

2.相鄰元素垂直方向
margin定義的是與其他元素的最小間距。
規則：margin都為正數，則取最大值；
margin中一正一負，則取兩者之和
margin中都是負數，則取最小值

3.父子元素垂直方向
如下圖所示，子元素設置margin，緊貼父元素上邊，切父元素設置了margin，則會合并，合并之后的值為兩者中的大值

4.子元素穿透父元素
如下圖所示，子元素設置margin，緊貼父元素上邊，則會導致穿透，看上去是父元素這是了margin-top

解決方案：
父元素設置padding-top:1px 或者border:1px solid transparent
形成新的BFC，父元素或者子元素設置float，postion，overflow:hidden(我一般比較喜歡設置overflow:hidden)
如下圖所示，設置父元素上述屬性，即可避免穿透

四、注意點

1.浮動元素及inline元素不會發生重疊，包括他的子元素。
原因：a.因為margin折疊只會發生在塊級元素；浮動元素脫離了正常流，與其他元素不處于同一個流。

 b.inline-block或者浮動元素的形成了一個新的BFC，與子元素不在一個BFC所以不會重疊；

云服務器 GPU云服務器 margin: margins margin 前端前端學習

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

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

重學前端學習筆記（二十五）--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
【前端學習】-盒模型

摘要：前言前端頁面的構建過程中，盒模型相關的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文將從盒模型描述標準盒模型傳統盒模型屬性，常見問題。【前言】前端頁面的構建過程中，盒模型相關的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文會先簡單描述一下盒模型，然后描述一些平常會遇到的注意點。本文將從1、盒模型描述；2、W3C標準盒模型/IE傳統盒模型；3.box-sizing屬性；4...

jonh_felix 2019-08-29 13:09 評論0 收藏0