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負值5種應用
最近做的專案中經常會用到margin的負值,這裡就總結一下關於margin負值的5種使用及相關bug的解決。1.在流動性布局中的應用 如wordpress的兩欄式不固定布局就是使用margin負值來實現的定位,屬於左右margin負值在流動性布局中的應用。左側寬度固定 寬度自適應,啦啦啦。寬度自適應...
margin負值問題
1 原理 2 對普通文件流中元素 指不是浮動元素也不是絕對定位 固定定位的元素等 的影響 負邊距對由普通文件流控制的元素的作用是,會使它們在文件流中的位置發生偏移,這種偏移不同於相對定位 通過相對定位偏移後的元素仍然會堅守著它原來佔據的空間,不會讓文件流的其它元素乘虛而入 通過負邊距進行偏移的元素,...
理解margin負值
上和左方的margin負值使元素向上和左方向移動,如果該元素position不是absolute或fixed,這還會導致之後的元素也向上,左移 下和右方的margin負值會縮小下和右方的空間,使處於該元素下,右方的元素被拉向該元素,使之後的元素發生向上,左移,以至於與之重疊 由於margin在上下左...