負margin原理及應用

2022-07-07 21:18:17 字數 990 閱讀 4341

margin 可以改變元素的可視尺寸,但和padding 是互補的

padding: 元素設定了width 或者保持 "包裹性"的時候 會改變元素的尺寸

marign:  與padding相反,元素設定了width 或者保持 "包裹性"的時候 margin對尺寸沒有影響

只有元素是"充分利用可用空間" 狀態的時候 ,margin才可改變元素的可視尺寸

只要元素的尺寸表現 符合"充分利用可用空間" 無論是垂直方向,還是水平方向 都可通過margin改變尺寸

css預設流方向是 水平方向,對於普通元素 margin只能改變元素水平方向尺寸,但對於拉伸特性的絕對定位元素,則水平或垂直方向都可以

例子 :

左和右的負邊距對元素寬度的影響

1、負邊距對元素自身的影響2、負邊距在普通文件流中的作用

3、負邊距對絕對定位的元素的影響

負邊距對元素自身的影響

利用margin為負值新增增加寬度——可用於多列布局增加邊距從而不需要增加寬度或者單獨設定margin-right:0;

負邊距在普通文件流中的作用負邊距對絕對定位元素的影響

對於絕對定位元素,負margin會基於其絕對定位座標再偏移,

唯有的缺點就是你必須知道這個覺得定位元素寬度的和高度才能並設定負margin值使其居中瀏覽器視窗,

margin 負邊距應用

最外層寬度 340 100 20 100 20 100 23 24.pp 28 次外層寬度 360 29 30.p 34 每個寬度100 20 35 36.c 43style 44head 4546 body 47 div class pp 48 div class p clearfix 49 di...

margin為負的理解

margin是盒模型中乙個很重要的概念,是border之外的區域,我們通常稱作外邊距,有margin top,margin right,margin bottom.moargin left四個外邊距。注意我書寫的順序是從上開始順時針的順序。對於這四個值,我們在設定的時候必然只能有4種情況 乙個值 兩...

負margin的理解(一)

之前有在看大牛的部落格,然後看到負margin,會想那個負margin值是怎麼計算出來的,還有啥時候設定負margin是有效果,現在做如下總結 html 結構 div class container div class main wrap h2 main content h2 div div cla...