解析margin的自動值auto

2022-09-17 07:36:16 字數 783 閱讀 5076

.n**

使用margin的auto值有什麼好說的呢。乙個元素在水平方向上所佔的長度,由width ,padding ,和margin 決定。這些值中,只有width和margin-left,margin-right可以設為auto。在這裡和大家討論一下三者之間的關係 。下面 介紹一下幾條原則:

1. auto 可以解釋為:彌補其它部分與所要求總合之間的差別;

2.如果三個屬性都沒有被設定成auto ,那麼margin-right會被強制設為auto;

3.如果兩個邊界都被設為 auto ,則被設為相等的值。

4. 如果兩個邊界之一和width設為auto ,則被設定為auto的邊界值為0;

5.三個都被設為auto ,則2個邊界的值都為0,width的值為最大可能值。

寫得有點亂,記得以前看過一些資料有這方面的詳細描述,只是現在想不起也找不到了。不過大概也就這幾個點了,了解一下就可以。

手冊上說的auto自動是字面的意思,但手冊畢竟是手冊和我們實際應用是有區別的。

定義乙個方向為auto,可以理解為此方向隨便,自由

以前不是有個經典的ff居中麼 margin:0 auto,這個其實在ie6下支援也是很好的,於是也有了如下延伸:

margin:0 auto

margin:0 auto 0 0

margin:0 0 0 auto

注意:沒有上或者下方向的auto

此應用一定程度上可以代替float,而且更方便,相容更好

margin值的特殊性

從2016年10月接觸前端,到現在大概1年多了吧,挺長的時間了,本以為自己的布局沒有問題,畢竟還是有專案經驗的,但是今天卻發現自己不是很懂margin,這個前端最常見的屬性之一,因此寫下這篇作為知識梳理。借鑑 css邊距屬性定義元素周圍的空間。通過使用單獨的屬性,可以對上 右 下 左的外邊距進行設定...

解析HTML中的float和margin的疑惑

對於html中的一些小疑惑,在這裡進行解析一下。div是基於行,就是乙個div佔據一行,不會讓別的元素,和自己同行。span 不是基於行的,就是乙個span 有空 專,不會單獨占用一行。css樣式的 float 浮動屬性,用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤等html 標籤 的浮動布局 ...

理解並運用 CSS 的負 margin 值

本文樣式 採用 scss。瀏覽器相容性為 ie6 你的網頁中,不可能沒有使用過 margin。大多數情況下,我們採用的都是正數的 margin 值,可能有時候會用到負的 margin 值。在我們的印象中,負的 margin 值就類似於瀏覽器的 hack 一樣,不被人接受。但是,本文要說明的就是,負的...