margin負值的應用總結

margin負值之前一直應用都是定位和列表的時候，從來沒有想著進行個總結，直到遇到了在專案中遇到了乙個margin負值但是寬度增加的問題才想著研究下 margin負值的問題。現將網上找到資料和文章，加上自己理解整理如下

1.元素水平垂直居中

這個彈框要絕對居中啊

tips:top和left都設定50%；margin-top 賦高度的一半的負值；margin-left 設定寬度一半的負值即可。

2.列表元素兩端對齊

<
style
>
.maina
.maina ul li
.maina ul
style
>
<
div 
class
="maina"
>
<
ul>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
<
li>第乙個li啊
li>
ul>
div>

tips:元素不存在width屬性或者（width：auto）的時候，負margin會增加元素的寬度 so 設定ul 負值，寬度變寬同時向右偏移20畫素，oveflow用於清除浮動

3.左右兩列固定中間自適應

<
style
>
.maina
.main_in
.main_left
.main_right
style
>
<
div 
class
="maina"
>
<
div 
class
="main_in"
>這裡自適應啊
div>
div>
<
div 
class
="main_left"
>這裡是左啊
div>
<
div 
class
="main_right"
>這裡是右啊
div>

tips:主體自適應的元素應該先定義，有兩個div，外層div設定寬度（高度可選）和浮動；內部div設定margin值空出左右兩側的寬度（或寬度+間距）；左側自適應左浮動後 margin-left 負 100%；右側的 margin-left 負自身寬度

4.三列等高

<
style
>
.maina
.mleft
.mmain
.mright
.mleft,.mmain,.mright
style
>
<
div 
class
="maina"
>
<
div 
class
="mleft"
>這裡是左邊，高度設定100
div>
<
div 
class
="mmain"
>這裡是中間啊，高度設定150
div>
<
div 
class
="mright"
>這裡是右邊，高度設定200
div>
div>

tips：padding-bottom填充元素高度，再用margin-bottom為負值減少css讀取元素高度，父元素設定overflow:hidden

5.margin負值去除多餘線

<
style
>
ul.table
ul.table li
style
>
<
ul class
="table"
>
<
li>第一行第一格
li>
<
li>第一行第二格
li>
<
li>第一行第三格
li>
<
li>第二行第一格
li>
<
li>第二行第二格
li>
<
li>第二行第三格
li>
<
li>第三行第一格
li>
<
li>第三行第二格
li>
<
li>第三行第三格
li>
ul>

tips:li最右邊和最後元素的右邊框和下邊框會和父元素的邊框重合，需要用margin-right 負值和margin-bottom的負值隱藏

margin負值的應用總結

margin負值5種應用

margin負值問題

理解margin負值

margin負值的應用總結

margin負值5種應用

margin負值問題

理解margin負值

相關推薦