資訊專欄INFORMATION COLUMN
摘要：屬性單位接受任何長度單位等，，百分比。子元素設(shè)置為，渲染之后為垂直方向使用，距離不是父元素高度的百分比，也是父元素寬度的百分比。原因因為折疊只會發(fā)生在塊級元素浮動元素脫離了正常流，與其他元素不處于同一個流。
一、margin描述
【概念】盒模型中的外邊距，即圍繞在元素邊框的空白區(qū)域，關(guān)于盒模型可以參考https://segmentfault.com/a/11...
【屬性值】
上外邊距 margin-top:10px
右外邊距 margin-right:10px
下外邊距 margin-bottom:10px
左外邊距 margin-left:10px
當(dāng)然，也縮寫為 margin :top right bottom left（上右下左，即順時針方向）
指定三個值 margin:10px 20px 30px；分別指定了上 10px、右 20px 、下 30px，即最后左邊的間距默認(rèn)是0；
指定兩個值 margin:10px 20px；分別指定了上下 10px、左右20px
指定一個值 margin:10px；指定上下左右都是10px。
【屬性單位】接受任何長度單位(px/em/rem等），auto，百分比。
二、利用margin:0 auto實現(xiàn)塊級元素水平居中
三、屬性單位為%
水平方向使用%，距離為父元素寬度的百分比。如下圖所示，父元素寬度是500px。子元素margin-left設(shè)置為10%，渲染之后為50px
垂直方向使用%，距離不是父元素高度的百分比，也是父元素寬度的百分比。如下圖所示，父元素寬度是500px。子元素margin-top設(shè)置為10%，渲染之后為50px
四、margin折疊
1.相鄰元素水平方向不合并，兩個元素的距離等于兩個元素的外邊距之和
2.相鄰元素垂直方向
margin定義的是與其他元素的最小間距。
規(guī)則：margin都為正數(shù)，則取最大值；
margin中一正一負(fù)，則取兩者之和
margin中都是負(fù)數(shù)，則取最小值
3.父子元素垂直方向
如下圖所示，子元素設(shè)置margin，緊貼父元素上邊，切父元素設(shè)置了margin，則會合并，合并之后的值為兩者中的大值
4.子元素穿透父元素
如下圖所示，子元素設(shè)置margin，緊貼父元素上邊，則會導(dǎo)致穿透，看上去是父元素這是了margin-top
解決方案：
父元素設(shè)置padding-top:1px 或者border:1px solid transparent
形成新的BFC，父元素或者子元素設(shè)置float，postion，overflow:hidden(我一般比較喜歡設(shè)置overflow:hidden)
如下圖所示，設(shè)置父元素上述屬性，即可避免穿透
四、注意點
1.浮動元素及inline元素不會發(fā)生重疊，包括他的子元素。
原因：a.因為margin折疊只會發(fā)生在塊級元素；浮動元素脫離了正常流，與其他元素不處于同一個流。
b.inline-block或者浮動元素的形成了一個新的BFC，與子元素不在一個BFC所以不會重疊；
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112435.html
摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)...
摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)...
摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)...
摘要：前言前端頁面的構(gòu)建過程中，盒模型相關(guān)的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文將從盒模型描述標(biāo)準(zhǔn)盒模型傳統(tǒng)盒模型屬性，常見問題。 【前言】前端頁面的構(gòu)建過程中，盒模型相關(guān)的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文會先簡單描述一下盒模型，然后描述一些平常會遇到的注意點。本文將從1、盒模型描述；2、W3C標(biāo)準(zhǔn)盒模型/IE傳統(tǒng)盒模型 ；3.box-sizing屬性；4...
閱讀 2468·2019-08-30 15:53
閱讀 2581·2019-08-29 13:11
閱讀 2668·2019-08-29 12:45
閱讀 3495·2019-08-29 12:41
閱讀 2337·2019-08-26 10:14
閱讀 2166·2019-08-23 14:39
閱讀 2319·2019-08-23 12:38
閱讀 3383·2019-08-23 12:04
