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