css margin 負值應用

2021-07-22 12:16:16 字數 1290 閱讀 2570

class="box">

class="ul">

class="li">列表 1div>

class="li">列表 2div>

class="li">列表 3div>

div>

div>

.box

.ul.li

效果如下:

此時第三個列表右側有 20px 的間距,我們可以通過設定負值來實現真正的兩端對齊效果

.box

.ul.li

效果如下:

class="container">

class="left">

div>

class="right">

div>

class="main">

div>

div>

.container

.left, .main, .right

.left

.right

.main

class="container">

class="main">maindiv>

div>

class="left">leftdiv>

class="right">rightdiv>

.container

.main

.left

.right

實現效果:

.box

第乙個li>

第二個li>

第三個li>

第四個li>

第五個li>

第六個li>

ul>

ul

ulli

CSS margin縱向重疊和負值問題

相鄰元素的margin top和margin bottom會發生重疊 空白內容的 也會重疊 如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle p styl...

margin負值5種應用

最近做的專案中經常會用到margin的負值,這裡就總結一下關於margin負值的5種使用及相關bug的解決。1.在流動性布局中的應用 如wordpress的兩欄式不固定布局就是使用margin負值來實現的定位,屬於左右margin負值在流動性布局中的應用。左側寬度固定 寬度自適應,啦啦啦。寬度自適應...

margin負值的應用總結

margin負值 之前一直 應用都是定位 和 列表的時候,從來沒有想著進行個總結,直到遇到了在專案中遇到了 乙個margin負值 但是寬度增加的問題 才想著研究下 margin負值的問題。現將網上找到資料和文章,加上自己理解整理如下 1.元素水平垂直居中 這個彈框要絕對居中啊 tips top和le...