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

資訊專欄INFORMATION COLUMN

margin詳解

darry / 600人閱讀

摘要：二的賦值普通元素的百分比都是相對于容器的寬度計算。絕對定位元素的百分比，絕對定位元素的百分比是相對于第一個定位祖先元素的寬度計算應(yīng)用寬高自適應(yīng)矩形傳送門之所以會是，是因為垂直方向上發(fā)生重疊。

一. margin對尺寸的影響 1.可視尺寸

a.適用于沒有設(shè)定width/height的普通block水平元素
float元素、absolute/fixed元素、inline元素、table-cell元素都不可以
b.只適用于水平方向尺寸，可以改變可視尺寸

應(yīng)用：

a.一側(cè)定寬的自適應(yīng)布局。
HTML：

    

    
一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局一側(cè)定寬的自適應(yīng)布局

CSS:

.left{height:200px;width:200px;background:blue;float:left;}
.right{margin-left:300px;}


b.兩端對齊布局
見下文負(fù)margin部分。

2.占據(jù)尺寸

block/inline-block水平元素均適用

與有沒有設(shè)定width/height值無關(guān)

適用于水平方向和垂直方向

應(yīng)用

a.滾動容器內(nèi)上下留白
demo: codepen傳送門
b.等高布局
見下文負(fù)margin部分。

二. margin的賦值

普通元素的百分比margin都是相對于容器的寬度計算。

絕對定位元素的百分比margin，絕對定位元素的百分比margin是相對于第一個定位祖先元素（relative/absolute/fixed）的寬度計算

應(yīng)用

寬高2：1自適應(yīng)矩形
demo: codepen傳送門
之所以會是2：1，是因為垂直方向上margin發(fā)生重疊。

三. margin重疊 1. 通常特性：

block水平元素（不包括float和absolute元素）

不考慮writing-mode，只發(fā)生在垂直方向（margin-top/margin-bottom）

2. 重疊的3種情境 A.相鄰的兄弟元素 B. 父級和第一個/最后一個子元素

子元素的margin-top相當(dāng)于父元素的margin-top
a.margin-top重疊
父元素非塊狀格式化上下文元素
父元素沒有border-top設(shè)置
父元素沒有padding-top值
父元素和第一個子元素之間沒有inline元素分隔

b.margin-bottom重疊
父元素非塊狀格式化上下文設(shè)置
父元素沒有border-bottom設(shè)置
父元素沒有padding-bottom值
父元素和第一個子元素之間沒有inline元素分隔
父元素沒有height，min-height，max-height

C.空的block元素

元素沒有border設(shè)置
元素沒有padding值
里面沒有inline元素
沒有height或者min-height

3. 計算規(guī)則

正正取大值
正負(fù)值相加
負(fù)負(fù)最負(fù)值

四. margin:auto

1.一側(cè)定值，一側(cè)auto，auto為剩余空間大小
2.兩側(cè)均是auto，則平分剩余空間（使用margin:0 auto;能夠?qū)崿F(xiàn)塊狀元素居中的原因）
3.writing-model與垂直居中
writing-model可以設(shè)置或檢索對象的內(nèi)容塊固有的書寫方向，具體的可以查看一下CSS參考手冊，vertical-lr指的是垂直方向自左而右的書寫方式，即top-bottom-left-right，再結(jié)合margin:auto; 就可以實現(xiàn)垂直居中。
demo: codepen傳送門
4.對于絕對定位的元素，通過設(shè)置top:0;right:0;left:0;bottom:0;鋪滿整個頁面，再通過margin:auto完成水平垂直居中定位
demo: codepen傳送門

五. margin負(fù)值的應(yīng)用 
當(dāng)元素margin的top和left是負(fù)值時會引起元素的向上或向左位置移動。而當(dāng)元素margin的bottom和right是負(fù)值時會影響右邊和下邊相鄰元素的參考線

1.三欄布局，可以對父元素是使用margin-right:負(fù)值;完成左右對齊
demo: codepen傳送門

2.margin負(fù)值下的等高布局
關(guān)鍵代碼：

.child{margin-bottom:-600px;padding-bottom:600px;}

demo: codepen傳送門
3.兩欄布局
可以看看float布局那篇文章:不改變DOM樹先后順序的方法

六. margin失效

inline元素

非替換元素，不是img元素
正常書寫模式

margin重疊

display:table-cell/display:table-row等聲明的margin無效
替換元素除外，firefox：table-cell類型inline-block的渲染行為

絕對定位元素非定位方位的margin值‘無效’，一直有效，但是脫離文檔流。

由于float導(dǎo)致需要增加的邊距增加

內(nèi)聯(lián)特性導(dǎo)致的margin無效

七. 新特性 1. margin-star&margin-end

正常的流向，margin-start等同于margin-left，兩者重疊不累加

如果水平流從右往左，margin-start等同于margin-right

如果垂直流，margin-start等同于margin-top

2. 其他特性

margin-before：默認(rèn)margin-top；
margin-collapse：可以取消重疊等等

八. 參考資料

張鑫旭《CSS深入理解之margin》

我知道你不知道的負(fù)Margin

The Definitive Guide to Using Negative Margins

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

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

相關(guān)文章

  • CSS盒子模型中外邊距（margin）折疊詳解

    摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發(fā)折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發(fā)外邊距折疊。 最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網(wǎng)上查閱了大量的資料，現(xiàn)做一個整理和總結(jié)，方便以后忘記的時候查閱，同時也供廣大網(wǎng)友參考。如有錯誤或者總結(jié)方面不全的地方，歡飲廣大網(wǎng)友指出。 外邊距折疊的概念：所...

    wmui 評論0 收藏0

  • CSS盒子模型中外邊距（margin）折疊詳解

    摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發(fā)折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發(fā)外邊距折疊。 最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網(wǎng)上查閱了大量的資料，現(xiàn)做一個整理和總結(jié)，方便以后忘記的時候查閱，同時也供廣大網(wǎng)友參考。如有錯誤或者總結(jié)方面不全的地方，歡飲廣大網(wǎng)友指出。 外邊距折疊的概念：所...

    genefy 評論0 收藏0

  • margin詳解

    摘要：屬性指定了盒的區(qū)的寬度。簡寫屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡寫屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸 只適用于沒有設(shè)定...

    stonezhu 評論0 收藏0

  • border-sizing屬性詳解和應(yīng)用

    摘要：用于更改用于計算元素寬度和高度的默認(rèn)的盒子模型。它有和三種取值。和屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據(jù)項目中的使用經(jīng)驗和的建議，推薦將屬性設(shè)置為。個人網(wǎng)站原文鏈接屬性詳解和應(yīng)用 box-sizing用于更改用于計算元素寬度和高度的默認(rèn)的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...

    Batkid 評論0 收藏0

發(fā)表評論

0條評論

darry

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<