資訊專欄INFORMATION COLUMN
摘要：屬性指定了盒的區的寬度。簡寫屬性一次性設置四周的，而其它屬性只設置它們各側的。
margin與容器尺寸 margin與可視尺寸margin屬性指定了盒的margin區的寬度。margin簡寫屬性一次性設置四周的margin，而其它margin屬性只設置它們各側的。這些屬性適用于所有元素，但非替換行內元素上的豎直margin將不會產生任何效果
margin與可視尺寸
只適用于沒有設定width/height的普通block元素
只適用于水平方向尺寸
一側定寬的自適應布局(未修改版)
margin與占據尺寸margin與占據尺寸
我們修改圖片的margin-bottom值,容器的高度隨著margin值變化
block/inline-block水平元素均適用
與有沒有設定width/height值無關
適用于水平方向和垂直方向
滾動容器內上下留白
margin與百分比普通元素百分比
普通元素的百分比margin都是相對于容器的寬度計算的
絕對定位百分比
絕對定位元素的百分比margin是相對于第一個祖先定為元素(relative/absolute/fixed)的寬度計算的
寬度2:1自適應矩形
margin重疊CSS中，兩個或者多個盒（可能但不一定是兄弟）的相鄰的margin會被結合成一個margin。Margin按這種方式結合叫合并（collapse），產生的結合的margin叫做margin重疊
CSS里面關于重疊的條件:
都屬于流內(In-flow)塊級盒,處于同一個塊級格式化上下文(BFC)
沒有行盒(line box),沒有空隙,沒有padding并且沒有border把它們隔開
都屬于豎直相鄰盒邊(vertically-adjacent box edges)
相鄰兄弟元素的重疊相鄰兄弟元素的重疊
父級和第一個/最后一個子元素父級和第一個/最后一個子元素
需要注意的是,overflow:hidden只在父子元素margin重疊時有效,相鄰兄弟元素重疊中無效
margin-top重疊
父元素非塊狀格式化上下文元素
父元素沒有border-top設置
父元素沒有padding-top值
父元素和第一個子元素之間沒有inline元素分隔
margin-bottom重疊
上面的四個例子都可以導致margin-bottom重疊,除此之外
父元素沒有height,min-height,max-height限制
空block元素margin重疊空block元素margin重疊
空block元素margin重疊其他條件
元素沒有border設置
元素沒有padding值
里面沒有inline元素
沒有height或者min-height
margin重疊的計算規則正正取大值
正負值相加
負負最負值
margin重疊的意義在互聯網早期,網頁主要是以文字為載體,連續段落或列表如果沒有margin重疊,首尾項間距會和其它兄弟標簽1:2關系,排版不自然.所以margin重疊主要是為了解決文字布局排版的問題.
margin重疊實踐在表單中,使用.list{margin-top:15px;margin-bottom:15px;},比.list{margin-top:15px;}更具有健壯性,最后一個元素移除或位置調換,均不會破壞原來的布局
margin:automargin:auto的各種特性演示
例1,塊級元素,就算沒有設置width或height,也會自動填充
例2,作為絕對定位元素,width自動填滿父級第一個定位元素容器
例3,此時,如果設置width或height,自動填充特性就會被覆蓋
例4,設置margin-right:100px,margin-left:auto,則margin-left為剩余空間大小即width-margin-right
例5,兩邊均設置margin:auto則平分剩余空間
margin左右均設置auto,圖片水平居中
margin:0 auto沒有使圖片水平居中,因為img是inline水平元素,需要設置display:block屬性,這樣,就算沒有width,元素也會占據整個容器
改變流動方向,使用margin:auto垂直居中
使用margin:auto,絕對定位的水平垂直居中,瀏覽器要求IE8+
上例中絕對定位的水平垂直居中的原理
margin負值 常規流中的margin負值常規流中的margin負值
在常規流中,設置margin-left:-20px,元素會向左移動-20px,對于設置margin-top也一樣.
當設置margin-right:-20px;,元素本身不會移動,后面的元素會向左移動20px到該元素上.對于設置margin-bottom同理
同時,在元素不指定寬度的情況下,如果設置margin-left或者margin-right為負值的話,會在元素的對應方向上增加其寬度.
相對定位元素的margin負值相對定位元素的margin
當設置margin-bottom/top的時候,表現如上,需要注意的是,設置了position:relative屬性的元素會覆蓋在后面的元素上面(后面的元素沒有設置定位以及Z-index)
float元素的margin負值float與marginDemo
對于設置了float的margin,設置margin為負值的時候,表現如下:
如果設置的margin的方向與float相同,那么,元素會往對應的方向移動對應的距離.
如果設置margin的方向與float的方向相反,則元素不動,元素之前或者之后的元素會向該元素的方向移動相應的距離.
第二個例子是使用margin負值與float實現的一列定寬的兩列流式布局
使用margin負值的絕對定位垂直居中對齊垂直居中對齊Demo
給元素設置absolute，left、top分別為50%；然后margin-top為 負的高度的一半、margin-left為 負的寬度的一半
這種方法的缺點是需要固定寬高
使用margin負值的有邊框的列表布局有邊框的列表布局
這里用margin與padding的偏移使邊框重合
使用margin負值的有間距的列表布局以及兩端對齊有間距的列表布局以及兩端對齊
兩個例子用到當元素沒有固定寬度時負值會增加自身寬度
第一個例子實現有間距的列表布局,其中需要消除ul的樣式,并且在ul設置margin負值抵消li中的margin值
第二個例子實現margin負值下的兩端對齊
一側定寬自適應布局一側定寬自適應布局以及DOM順序正確的修改版
第一個例子的重點是給左邊的div嵌套了一個父級div并設置為寬度100%,這樣當容器寬度變化時,左邊的div自適應
第二個例子,我們利用同樣的原理,來使DOM順序和最終視覺順序相符,也就是上面第一個一側定寬的自適應布局的修改版
等高列布局等高列布局Demo
等高列布局主要利用了padding會顯示背景顏色的原理,先給div一個巨大的margin負值,從而產生塌陷,再使用padding正值填補塌陷,從而達到多等高列布局
半遮擋的標題半遮擋的標題Demo
這個例子使用relative屬性會在后面元素上面顯示的特性,配合margin負值偏移
圣杯布局圣杯布局Demo
圣杯布局中,需要注意:
三欄都使用浮動,需要使用clear:both清除浮動影響
左右兩列需要使用position:relative以及負margin來達到三欄一行的目的
父容器需要指定跟左右兩欄寬度相同的padding,用來盛放左右兩欄
圣杯布局詳細介紹
雙飛翼布局雙飛翼布局Demo
雙飛翼布局是圣杯布局的改良版,區別在于對待中間欄內容不被遮擋的處理.
圣杯布局用padding以及相對定位來處理,而雙飛翼布局讓中間欄新增div的margin處理
CSS深入理解之margin
理解并運用 CSS 的負 margin 值
margin負值詳解
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111887.html
摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發外邊距折疊。 最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網上查閱了大量的資料，現做一個整理和總結，方便以后忘記的時候查閱，同時也供廣大網友參考。如有錯誤或者總結方面不全的地方，歡飲廣大網友指出。 外邊距折疊的概念：所...
摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發外邊距折疊。 最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網上查閱了大量的資料，現做一個整理和總結，方便以后忘記的時候查閱，同時也供廣大網友參考。如有錯誤或者總結方面不全的地方，歡飲廣大網友指出。 外邊距折疊的概念：所...
摘要：用于更改用于計算元素寬度和高度的默認的盒子模型。它有和三種取值。和屬性包括內容，內邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據項目中的使用經驗和的建議，推薦將屬性設置為。個人網站原文鏈接屬性詳解和應用 box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...
閱讀 1262·2021-11-23 09:51
閱讀 2638·2021-09-03 10:47
閱讀 2234·2019-08-30 15:53
閱讀 2414·2019-08-30 15:44
閱讀 1375·2019-08-30 15:44
閱讀 1193·2019-08-30 10:57
閱讀 1924·2019-08-29 12:25
閱讀 1086·2019-08-26 11:57
