網頁CSS:margin疊加原理以及邊界條件淺談

來源:互聯網
上載者:User
css|條件|網頁   邊界疊加是一個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。簡單地說,當兩個垂直邊界相遇時,它們將形成一個邊界。這個邊界的高度等於兩個發生疊加的邊界的高度中的較大者。

  當一個元素出現在另一個元素上面時,第一個元素的底邊界與第二個元素的頂邊界發生疊加,見圖:

元素的頂邊界與前面元素的底邊界發生疊加

  當一個元素包含在另一個元素中時(假設沒有填充或邊框將邊界分隔開),它們的頂和/或底邊界也發生疊加,見圖:

元素的頂邊界與父元素的頂邊界發生疊加

  儘管初看上去有點兒奇怪,但是邊界甚至可以與本身發生疊加。假設有一個空元素,它有邊界,但是沒有邊框或填充。在這種情況下,頂邊界與底邊界就碰到了一起,它們會發生疊加,見圖:

元素的頂邊界與底邊界發生疊加

  如果這個邊界碰到另一個元素的邊界,它還會發生疊加,見圖:

空元素中已經疊加的邊界與另一個空元素的邊界發生疊加

  這就是一系列空的段落元素佔用的空間非常小的原因,因為它們的所有邊界都疊加到一起,形成一個小的邊界。

  邊界疊加初看上去可能有點兒奇怪,但是它實際上是有意義的。以由幾個段落組成的典型文本頁面為例(見圖2-8)。第一個段落上面的空間等於段落的頂邊界。如果沒有邊界疊加,後續所有段落之間的邊界將是相鄰頂邊界和底邊界的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生邊界疊加,段落之間的頂邊界和底邊界就疊加在一起,這樣各處的距離就一致了

邊界疊加在元素之間維護了一致的距離

  只有普通文檔流中塊框的垂直邊界才會發生邊界疊加。行內框、浮動框或絕對位置框之間的邊界不會疊加。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。