由淺入深漫談margin屬性

2021-08-26 13:09:20 字數 973 閱讀 1555

先給出例子,看html

box-1

box-2

box-4

寫出css.box-1

.box-2

.box-4

測試頁面一:

[url=

沒錯,是那margin-right:-300px惹的禍,它把它對下一元素的參考線為-300px,所以.box-4才會覆蓋在box-2上面。我們看看[1b]margin的基本特性[/1b]

margin 屬性包括 margin-top, margin-right, margin-bottom, margin-left, margin,可以用來設定 box 的 margin area。屬性 margin 可以用來同時設定 box 的四邊外邊距,而其他的 margin 屬性只能設定其自各的外邊距。

margin 屬性可以應用於幾乎所有的元素,除了**顯示型別(不包括 table-caption, table and inline-table)的元素,而且垂直外邊距對非置換內聯元素(non-replaced inline element)不起作用。

或許有朋友對非置換元素(non-replaced element)有點疑惑,稍微幫助大家理解一下。非置換元素,w3c 中沒有給出明確的定義,但我們從字面可以理解到,非置換元素對應著置換元素(replaced element),也就是說我們搞懂了置換元素的含義,就懂了非置換元素。置換元素,

[url=

[color="#0000ee"]w3c[/color]

[/url]

margin 始終是透明的。[1b]仔細[/1b]看下面的圖,就很好理解了。

[url=

[1b]讓我們醍醐灌頂[/1b]

增加乙個box-3,使用margin-left:300px把margin-right:-300px抵消掉.box-3在box-2下增加box-3

box-3

[url=

[color="#000000"]

[/url]

由淺入深漫談margin屬性

margin 在中文中我們翻譯成外邊距或者外補白 本文中引用外邊距 他是元素盒模型 box model 的基礎屬性。一 margin的基本特性 margin 屬性包括 margin top,margin right,margin bottom,margin left,margin,可以用來設定 bo...

由淺入深漫談margin屬性

blankzheng的blog http www.planabc.net margin在中文中我們翻譯成外邊距或者外補白 本文中引用外邊距 他是元素盒模型 box model 的基礎屬性。一 margin的基本特性 margin屬性包括margin top,margin right,margin b...

由淺入深漫談margin屬性

blankzheng的blog 一 margin的基本特性 margin屬性包括margin top,margin right,margin bottom,margin left,margin,可以用來設定box的margin area。屬性margin可以用來同時設定box的四邊外邊距,而其他的m...