【css】CSS中折疊margin的問題

為什么要翻譯這篇說明?css2本有人已翻譯過,但看一下,很粗糙(不是說自己就怎么怎么樣啊,翻譯者真的是很值得敬佩的!),近來跟css與xhtml接觸得越來越多,但接觸得越多,迷惑卻總不見少。

現在我覺得很多問題根本不能稱之為問題,原因就在于我們的草率理解,比如殺雞用牛刀,不是不可以,是不合理、不恰當,根源錯了,表象也就會錯了,如果解決問題從表象入手,難免總會摸不著頭腦,還是那句話,要腳踏實地,切莫浮躁。

在這個說明中,“collapsing margins”(折疊margin)的意思是:2個或以上盒模型之間(關系可以是相鄰或嵌套)相鄰的margin屬性(這之間不能有非空內容、padding區域、border邊框或使用清除分離方法)結合表示為一個單獨的margin。

在css2.1中,水平的margin不會被折疊。

垂直margin可能在一些盒模型中被折疊:


1、在常規文檔流中,2個或以上的塊級盒模型相鄰的垂直margin會被折疊。
最終的margin值計算方法如下:

a、全部都為正值,取最大者;
b、不全是正值,則都取絕對值,然后用正值減去最大值;
c、沒有正值,則都取絕對值,然后用0減去最大值。
注意:相鄰的盒模型可能由DOM元素動態產生并沒有相鄰或繼承關系。

2、相鄰的和模型中,如果其中的一個是浮動的(floated),垂直margin不會被折疊,甚至一個浮動的盒模型和它的子元素之間也是這樣。


3、設置了overflow屬性的元素和它的子元素之間的margin不會被折疊(overflow取值為visible除外)。


4、設置了絕對定位(position:absolute)的盒模型,垂直margin不會被折疊,甚至和他們的子元素之間也是一樣。


5、設置了display:inline-block的元素,垂直margin不會被折疊,甚至和他們的子元素之間也是一樣。


6、如果一個盒模型的上下margin相鄰,這時它的margin可能折疊覆蓋(collapse through)它。在這種情況下,元素的位置(position)取決于它的相鄰元素的margin是否被折疊。

a、如果元素的margin和它的父元素的margin-top折疊在一起,盒模型border-top的邊界定義和它的父元素相同。
b、另外,任意元素的父元素不參與margin的折疊,或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零,那么元素的border-top邊界位置和原來一樣。

一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom折疊。
注意,那些已經被折疊覆蓋的元素的位置對其他已經被折疊的元素的位置沒有任何影響;只有在對這些元素的子元素布局時,border-top邊界位置才是必需的。


7、根元素的垂直margin不會被折疊。


浮動的塊級元素的margin-bottom總是與它后面的浮動塊級兄弟元素(floated next in-flow block-level sibling)的margin-top相鄰,除非那個同級元素使用了清除操作。

浮動的塊級元素的margin-top和它的第一個浮動塊級子元素(floated first in-flow block-level child)的margin-top相鄰(如果該元素沒有border-top,沒有padding-top,并且子元素沒有使用清除操作)。

浮動的塊級元素的margin-bottom如果符合下列條件,那么它和它的最后一個浮動塊級子元素的margin-bottom相鄰(如果該元素沒有指定padding-bottom或border):


a、指定了height:auto
b、min-height小于元素的實際使用高度(height)
c、max-height大于元素的實際使用高度(height)


如果一個元素的min-height屬性設置為0,那么它所擁有的margin是相鄰的,并且它既沒有border-top和border-bottom,也沒有padding-top和padding-bottom,它的height屬性可以是0或auto,它不能包含一個內聯的盒模型(line box),它所有的浮動子元素(如果有的話)的margin也都是相鄰的。

當一個元素擁有的margin折疊了,并且它使用了清除操作,那么它的margin-top會和緊隨其后的兄弟元素的相鄰margin折疊,但結果是它的margin將無法和其塊級父元素的margin-bottom折疊。

折疊操作是以padding、margin、border的值為基礎的(即在瀏覽器解析所有這些值之后),折疊后的margin計算將覆蓋已使用的不同margin的值。

from:http://hi.baidu.com/vernorica/item/9d5abd70af4a7942ef1e53a8

轉載于:https://www.cnblogs.com/diguonianzhu/archive/2012/07/20/2600836.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/379480.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/379480.shtml
英文地址,請注明出處:http://en.pswp.cn/news/379480.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

算法---鏈表

文章目錄反轉鏈表合并兩個有序鏈表刪除重復元素反轉鏈表 反轉鏈表包括兩種,反轉全部元素或者反轉部分元素。在這里,我們約定:數據元素類型是struct LinkNode,要反轉鏈表的第一個節點是head,head的前面一個節點是pre&a…

SSM

二、環境設置(MyEclipse) 1,字體設置 window–>Preference->General->Appearance->Colors and Fonts->Basic Text->Font 2,workspace字符集設置 window–>Preference->General->Appearance->W…

IOS NSArray,NSDictionary

小結: NSArray有序的集合; NSDictionary無序的集合,可排序; 增刪改查 ------NSArray----------- create : 1)NSArray *array [NSArray arrayWithObjects:"Henry","Jones", "Susan", "Smith&q…

Java PropertyPermission equals()方法與示例

PropertyPermission類equals()方法 (PropertyPermission Class equals() method) equals() method is available in java.util package. equals()方法在java.util包中可用。 equals() method is used to check whether this object and the given object (ob) are equal or not…

c#配合oracle快速導入excel方法--原創(6萬條記錄5分鐘左右)

原理:用c#采用讀取Excel數據源方式將數據讀入c#的datatable,循環datatable,將datatable中的數據用stringbuilder拼成insert into (字段名) valus (值);每5條插入一個符號(作用是將sql字符串限制在4000字符以內),然后將拼成的字符串…

English最俗語法大全

一、先分析兩個長難句 1,It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. 人們公認這樣一個事實,一個有錢的單身男人一定想要娶一個妻子。 in want of want 想要 university widely 廣泛的…

tfs 內網和外網切換的方法。

C:\Windows\System32\drivers\etc的hosts文件配置一個123.67.128.109 geo-dept-3轉載于:https://www.cnblogs.com/lwflt/archive/2012/07/23/2604731.html

observable_Java Observable countObservers()方法與示例

observable可觀察的類countObservers()方法 (Observable Class countObservers() method) countObservers() method is available in java.util package. countObservers()方法在java.util包中可用。 countObservers() method is used to count the number of observers exists…

設計模式--Strategy 策略模式

所謂策略模式(Strategy Pattern),就是將策略 (算法) 封裝為一個對象,易于相互替換,如同 USB 設備一樣可即插即用;如果將策略、具體的算法和行為,編碼在某個類或客戶程序內部,將導至事后的修改和擴展不易。 …

HDU-1518 Square dfs+剪枝

該題問給定的棍子能否組成一個正方形。首先我們要判定是否總長度是4的倍數,然后再決定是否存在某條邊大于組合邊長。 搜索的過程中也是可以進行剪枝了。 首先將邊排序,我們可以假定所有的組合邊由大小遞減的邊組成,那么我們在搜索的時候就不用…

英語思維黃金法則

一、謂語單一原則 英文的句子當中,有且只有一套謂語結構。 要想使用多個謂語,有以下三種方法: 1,利用連詞將不同謂語并列起來 2,把其中的一些動詞給降級(v-ing v-ed 非謂語動詞) 3,…

java getname_Java文件類字符串getName()方法(帶示例)

java getname文件類字符串getName() (File Class String getName()) This method is available in package java.io.File.getName(). 軟件包java.io.File.getName()中提供了此方法。 This method is used to retrieve or return the filename or directory name and represente…

WF中DependencyObject和DependencyProperty的實現

WF中DependencyObject和DependencyProperty的實現 DependencyProperty的Register和RegisterAttached方法,將DependencyProperty存在IDictionary中完成注冊,確保相同name的DependencyProperty在一個ownerType類型中只能有一個。 DependencyObject的GetVal…

hdu2115: I Love This Game

hdu2115: http://acm.hdu.edu.cn/showproblem.php?pid2115題意:輸入n組名字和對應的時間(分:秒),要求按時間長度由短到長排序,并輸出對應排名,若時間一樣,則按名字字典序排序&#…

打開eclipse出現Failed to load the JNI shared library “D:\java\jdk\bin\...\jre\bin\server\jvm.dll”如何解決?

eclipse打開的時候出現Failed to load the JNI shared library “D:\java\jdk\bin…\jre\bin\server\jvm.dll”如何解決?? 如圖所示: 即代表你的jdk與eclipse的位數不一樣!!! 你可以查看一下eclipse和jd…

Java DataOutputStream writeUTF()方法及示例

DataOutputStream類的writeUTF()方法 (DataOutputStream Class writeUTF() method) writeUTF() method is available in java.io package. writeUTF()方法在java.io包中可用。 writeUTF() method is used to write the given string value to the basic data output stream wit…

2010年世界杯分組

A 南非 墨西哥 烏拉圭 法國 B 阿根廷 南非 韓國 希臘 C 英格蘭 美國 阿爾及利亞 斯洛文尼亞 D 德國 澳大利亞 塞爾維亞 加納 E 荷蘭 丹麥 日本 喀麥隆 F 意大利 巴拉圭 新西蘭 斯洛伐克 G 巴西 朝鮮 科特迪瓦 葡萄牙 H 西班牙 瑞士 洪都拉斯 智利 轉載于:https://www.cnblogs.c…

圓形墜落模擬算法設計

目標:實現一個算法,模擬在一個封閉二維區域,圓形小球朝給定方向墜落的過程,實現二維區域的緊密填充。 像下面這樣: 難點,及其簡單解決: 1.如何把粒子移動盡可能遠? 圖中的粒子i&…

Maven詳細教學

一、Maven簡介 maven:是apache下的一個開源項目,是純java開發,并且只是用來管理java項目的 依賴管理:就是對jar包的統一管理 可以節省空間 項目一鍵構建:mvn tomcat:run該代碼可以將一個完整的項目運行起來&#xff0…

Java Character.UnicodeBlock of()方法與示例

Character.UnicodeBlock類的()方法 (Character.UnicodeBlock Class of() method) of() method is available in java.lang package. of()方法在java.lang包中可用。 of() method is used to return the Unicode block containing the given parameter value or it returns null…