成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

詳解css盒模型與外邊距重疊

roundstones / 1482人閱讀

摘要：如圖所示代表，代表，代表。以上例子中，和之間的折疊產(chǎn)生的，是個(gè)相鄰折疊的結(jié)果。將其值分為兩組正值，，負(fù)值，，根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的最大值為，負(fù)值中絕對(duì)值最大的是，所以，最終折疊后的應(yīng)該是。

盒模型的構(gòu)成

之前寫了一篇關(guān)于如何解決css的外邊距重疊問(wèn)題,可是后來(lái)發(fā)現(xiàn),我有些本末倒置了,對(duì)于一個(gè)問(wèn)題的正確的處理流程就應(yīng)該是先發(fā)現(xiàn)問(wèn)題,分析問(wèn)題,解決問(wèn)題,所以我在這篇文章中就對(duì)下css的盒模型,什么是外邊距重疊,為什么會(huì)發(fā)生外邊距重疊,以及怎樣計(jì)算外邊距重疊一一進(jìn)行解讀,旨在透過(guò)現(xiàn)象看本質(zhì),達(dá)到掌握的目的.文章可能會(huì)有點(diǎn)長(zhǎng),為節(jié)省時(shí)間大家可以根據(jù)掌握的情況瀏覽閱讀.

1.結(jié)構(gòu)
為了給文檔樹中的各個(gè)元素排版定位(布局),瀏覽器會(huì)根據(jù)渲染模型,為每個(gè)元素生成四個(gè)嵌套的矩形框,他們分別是content box,padding box, border box,margin box,他們是不可分割的,并在一定情況下會(huì)重合, 這就是css規(guī)范中所描述的盒模型,它是以CSS的角度去看一個(gè)元素被渲染后的抽象形態(tài),是一個(gè)元素自身的構(gòu)成部分.

注：padding、border 和 margin 區(qū)域都包括 top、right、bottom、left 四部分。如圖所示（"LM" 代表 left margin，"RP" 代表 right padding，"TB" 代表 top border……）。

2.邊界

上述四個(gè)區(qū)域(content, padding, border, margin)分別有他們的邊界,細(xì)化來(lái)說(shuō), 每個(gè)區(qū)域都有top, right, bottom, left四個(gè)邊界.

Content邊界/內(nèi)邊界: content邊界環(huán)繞在由該元素的寬和高決定的一個(gè)矩形上,這個(gè)尺寸通常由該元素渲染后的內(nèi)容決定,這四個(gè)content邊界組成的矩形框就是該元素的content box.

Padding邊界:padding邊界環(huán)繞在該元素的padding區(qū)域的四周,顧名思義,填充背景色.如果padding的寬度為零,則padding邊界與content邊界重合.這四個(gè)padding邊界組成的矩形就是該元素的padding box.

Border邊界:border邊界環(huán)繞在該元素的border區(qū)域的四周.如果border的寬度為零,則border邊界與padding邊界重合.這四個(gè)border邊界組成的矩形就是該元素的border box.

Margin邊界:margin邊界環(huán)繞在該元素的margin區(qū)域的四周,如果margin的寬度為零,則margin邊界與border邊界重合.這四個(gè)margin邊界組成的矩形就是該元素的margin box.

3.一些小的注意事項(xiàng),如果你已掌握,請(qǐng)忽略
(1) 對(duì)于行內(nèi)非替換元素(例如span),垂直方向上的margin不起作用
(2) margin不適用于table類型的元素,如table-caption,table,inline-table,以及td,th,tr等.
(3) border-style的可用值有：’none’(無(wú)樣式)，’hidden’(隱藏)，’dotted’(點(diǎn)線)，’dashed’(虛線)，’solid’(實(shí)線)，’double’(雙線)，’groove’(3D凹槽輪廓)，’ridge’(3D吐槽輪廓)，’inset’(3D凹邊輪廓), "outset"(3D凸邊輪廓).后四項(xiàng)很少用到,所以在此提一下,大家可以嘗試自己運(yùn)行下,看看他們之間的區(qū)別.

外邊距重疊

這個(gè)也是我這篇文章要重點(diǎn)介紹的.
Collapsing margins,即外邊距重疊,指的是毗鄰的兩個(gè)或多個(gè)普通流中的塊元素垂直方向山的外邊距會(huì)合并為一個(gè)外邊距.

其中所說(shuō)的margin毗鄰可以歸結(jié)為以下兩點(diǎn):

這兩個(gè)或多個(gè)邊距沒(méi)有被非空內(nèi)容,padding,border或clear分隔開

這些margin都處于普通文檔流中
注意一點(diǎn),在沒(méi)有被分割開的情況下,一個(gè)元素的margin-top回和它普通流的第一個(gè)元素的margin-top相鄰,只有在一個(gè)元素的height是"auto"的情況下,他的margin-bottom才會(huì)和它普通流中的最后一個(gè)元素(非浮動(dòng)元素等)的margin-bottom相鄰.

示例代碼:


    

       

           
B

效果圖:

因?yàn)?C這個(gè)div的高度不是auto,所以他的margin-bottom和他的子元素B的margin-bottom不相鄰,因此,不會(huì)發(fā)生重疊,依然只有50px;

折疊后margin的計(jì)算
1.參與折疊的margin都是正值
例子:

A


B

在 margin 都是正數(shù)的情況下，取其中 margin 較大的值為最終 margin 值.

示意圖:

2.參與折疊的margin都是負(fù)值
例子:

A


B

在 margin 都是負(fù)值的時(shí)候,取的是其中絕對(duì)值較大的,然后從零開始,負(fù)向位移.
示意圖:

3.參與折疊的margin中有正值有負(fù)值
例子:

A


B

在 margin中有正值有負(fù)值的時(shí)候,要從所有負(fù)值中選出絕對(duì)值最大的,所有正值中選擇絕對(duì)值最大的,二者相加,此例的結(jié)果即為: 100px + (-50)px =50px;

示意圖:

4.相鄰的margin要一起參與計(jì)算
例子:


    

           
A

    





    

           
B

請(qǐng)注意，多個(gè) margin 相鄰折疊成一個(gè) margin，所以計(jì)算的時(shí)候，應(yīng)該取所有相關(guān)的值一起計(jì)算，而不能分開分步來(lái)算。
以上例子中，A 和 B 之間的 margin 折疊產(chǎn)生的 margin，是6個(gè)相鄰 margin 折疊的結(jié)果。將其 margin 值分為兩組：

正值：50px，150px，200px
負(fù)值：-60px，-100px，-120px
根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的最大值為 200px，負(fù)值中絕對(duì)值最大的是 -120px，所以，最終折疊后的 margin 應(yīng)該是 200 + (-120) = 80px。

浮動(dòng)元素,inline-block元素,絕對(duì)定位的元素和創(chuàng)建了塊級(jí)格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊

另外,要注意,自身的margin-botom和margin-top相鄰時(shí)也會(huì)發(fā)生重疊,只有當(dāng)自身內(nèi)容為空,垂直方向上border,padding,均為空時(shí),自身的margin-top與margin-bottom才會(huì)相鄰.

原文連接:http://w3help.org/zh-cn/kb/006/
推薦網(wǎng)站: http://w3help.org 這個(gè)網(wǎng)站可以幫我們?cè)敿?xì)解讀了css很多的特性,非常棒的網(wǎng)站.

以上都是我個(gè)人的粗淺之見,希望口下留情,錯(cuò)誤之處可評(píng)論或者私信給我指明,我會(huì)及時(shí)改正的.另外關(guān)于這篇文章的不解之處或者說(shuō)覺(jué)得我說(shuō)的不完善或者不明確的地方都可以評(píng)論或者私信給我.
如果覺(jué)得這篇文章幫到你了,記得點(diǎn)贊或者收藏奧!.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112511.html

相關(guān)文章

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

    verano 評(píng)論0 收藏0

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

    suxier 評(píng)論0 收藏0

  • CSS盒模型完整介紹

    摘要：盒模型的認(rèn)識(shí)基本概念標(biāo)準(zhǔn)模型模型。如圖由于盒模型的怪異模式，模型和標(biāo)準(zhǔn)模型的內(nèi)容計(jì)算方式不同。設(shè)置為標(biāo)準(zhǔn)模型，它的元素寬度。這里就不介紹，大家可以自行搜索。 盒模型的認(rèn)識(shí) 基本概念：標(biāo)準(zhǔn)模型+IE模型。 包括margin,border,padding,content 標(biāo)準(zhǔn)模型和IE模型的區(qū)別 css如何設(shè)置獲取這兩種模型的寬和高 js如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高 根據(jù)盒模型解釋邊距...

    qqlcbb 評(píng)論0 收藏0

  • CSS 外邊距(margin)重疊及防止方法

    摘要：結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。但是邊界的重疊也有例外情況水平邊距永遠(yuǎn)不會(huì)重合。外邊距重疊示例外邊距重疊是指兩個(gè)垂直相鄰的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，起外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。邊距重疊解決方案(BFC) 首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為塊級(jí)格式化上下文 ? 兩個(gè)或多個(gè)塊級(jí)盒子的垂直...

    劉東 評(píng)論0 收藏0

  • css面試總結(jié)

    摘要：兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。 CSS知識(shí)點(diǎn)整理瀏覽器兼容性問(wèn)題解決方案 · 總結(jié) 行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式 在引用 CSS 上，分為四種形式：行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式，下面介紹這四種模式。 1.行內(nèi)樣式 直接對(duì) HTML 的標(biāo)記使用 style 屬性，然后將 CSS 代碼直接寫進(jìn)去： 2....

    SKYZACK 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<