CSS margin全面了解

2022-09-25 23:15:13 字數 890 閱讀 9217

一、margin可以為負值

在盒模型中,內容區的width/height、padding、border都不能為負值,但是margin例外,它可以為負值。

關於margin負值的使用技巧,了解不多,日後有機會再補充,此處先貼乙個經典應用,margin-left負值結合浮動實現不改變dom結構的流體布局。

此demo與css float**篇中的是同乙個。

xml/html code複製內容到剪貼簿

二、margin的百分比數值

當margin屬性的值為百分數時,其總是以父元素的width為基數進行計算。

請看下面這個demo,當初折磨了我n久的。。。只怪我知道得太晚了,說多了都是淚啊。。。

xml/html code複製內容到剪貼簿

三、垂直方向上margin的合併

這個問題經常造成一些困惑,不過只需要記住一句話即可,垂直方向上的margin只要親密接觸就會合併,也只有親密接觸才會合併。

垂直方向上margin的合併,如果發生在相鄰元素,其實是很好理解的;但是如果發生在父元素與子元素之間,就有些怪異了。

來看例子:

xml/html code複製內容到剪貼簿

消除垂直方向上margin合併的方法:給父元素加border或者加padding,打破父元素與子元素margin之間的親密接觸即可。

margin合併的規則:

xml/html code複製內容到剪貼簿

1.    兩個margin都是正數,取絕對值大的;

2.    乙個margin是正數,另乙個margin是負數,相加;

3.    兩個margin都是負數,取絕對值大的。

原文位址:

本文標題: css margin全面了解

本文位址: /web/css/23267.html

全面了解 Powerset

人們期待已久的自然語言搜尋引擎 powerset 終於亮相,powerset 將改變人們從 wikipedia 搜尋和發現資料的方式。基於 parc 專利許可,以及專有的搜尋技術的 powerset 將是自然語言搜尋技術的一種突破,它可以就任何主題或領域,從 wikipedia 的文章中抓取句子的含...

全面了解「設計模式」

其他設計模式介紹 單例模式 singleton 最易懂的設計模式解析 簡單工廠模式 factorypattern 最易懂的設計模式解析 工廠方法模式 factory method 最易懂的設計模式解析 抽象工廠模式 abstract factory 最易懂的設計模式解析 策略模式 strategy ...

IK FK之全面了解

很久以前就想寫這麼乙個帖子,但是覺得要寫起來需要配圖比較麻煩,但是又經常看到有人對ik fk有錯誤的認識。所以決定還是開始寫,慢慢去完善和補充。我想這個帖子看下來,應該可以讓美術以及不了解ik fk的技術美術有個正確的概念。ik是inverse kinematics,逆向運動或者叫反向運動。與之相對...