国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS盒子模型以及外邊框合并的問題

zacklee / 2738人閱讀

摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。

盒子模型

我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......
所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子。
你現(xiàn)在心里有很多疑問，沒關(guān)系，接著看。

以下是標準的盒子模型。（圖片來源）

我們平常給元素加上的width，height實際上就是給內(nèi)容區(qū)域加寬和高。我們增加內(nèi)外邊距的時候不改變內(nèi)容區(qū)域的大小，卻會改變整體的大小。如果我們?yōu)樵丶右粋€1像素的框的話，那么我們能看見的只是框里面的東西（內(nèi)邊距+內(nèi)容區(qū)域），如果在元素上添加背景，背景也會應(yīng)用于這一區(qū)域，而外邊距是不可見的，它是用來分隔各個元素。

雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。
即：

height總=margin-top+border+padding-top+height+padding-bottom+border+margin-bottom
width總=margin-left+border+padding-left+width+padding-right+border+margin-right

如果只在視覺上固定框的大小不用加入margin進行計算。這里和《精通CSS 高級web標準解決方案（第二版）》有不同的意見。（P39-P40，我認為書中出錯）

外邊距的合并問題 什么是合并

就是外邊距中會有疊加的情況，取兩者中最大的一個作為間隔

合并問題的前提是

處于普通流兩個或多個塊元素垂直方向上相遇加粗文字，會造成的margin折疊

除去普通流、兩個或多個、塊元素、垂直很好理解之外

這個相遇要好好解釋一下了，什么算相遇呢？

簡單的來說，無非就是就是說兩個元素碰到了一起。這個相遇就是真真正正的遇到了，如果有邊框等阻擋，是不會發(fā)生折疊的！

具體的，分為：

Ⅰ：父元素的上外邊距和第一個子元素的上外邊距

大概就是圖片中的效果：

也就是父元素的margin-top 和 第一個子元素的margin-top相遇，

看代碼：

HTML:


    




CSS:
/*為了效果更加明顯，為body添加背景顏色*/
body{
    background-color:#ccc;
}
.father{
    background-color:blue;
    height:100px;
    width:100px;
    margin-top:20px;
}
.son{
    background-color:red;
    height:20px;
    width:20px;
    margin-top:20px;
}

效果圖:

可以看出來紅色方塊原本應(yīng)該在藍色方塊的下方20px處，然而卻合并了！

這種合并有時候是一種便利，而在有些情況卻成為了不知何處的bug。所以在后面會講怎么消除這種浮動。

Ⅱ：父元素的下外邊距和最后一個子元素的下外邊距

也就是父元素的margin-bottom與最后一個子元素的margin-bottom相遇發(fā)生的重疊。

與上一個類似，所以不再闡述。

Ⅲ：相鄰兄弟姐妹元素

相鄰兄弟就是，相鄰的兩個元素margin-top和margin-bottom發(fā)生的合并。

外邊距為40px的情況：





.block1 {
    background-color:red;
    height:50px;
    width:50px;
    margin-bottom:20px;
}
.block2 {
    background-color:blue;
    height:50px;
    width:50px;
    margin-top:20px;
}
實際效果圖:

由此可見，相鄰?fù)卮_實發(fā)生了合并。

Ⅳ：空元素 ，自己的上外邊距會和自己的下外邊距合 

這個段落的和下面段落的距離將為20px

        


        

這個段落的和上面段落的距離將為20px

這樣第一個p元素和第三個p元素之間距離為20px

阻止自動合并

從定義出發(fā)會很好的理解這個問題，我們可以從合并的前提的角度出發(fā)探討幾種阻止合并的方法：

第一種方法： 擺脫普通流 
position:absolute;
float:left/right;

第二中方法：變成非塊元素

第一篇文章已經(jīng)提過可以用display:inline;將塊元素變成行內(nèi)元素。

注意：用這種雖然是理論上是可以實現(xiàn)的，然而它行內(nèi)元素除了圖片是不能設(shè)置寬高的，同時margin-top margin-bottom也將失效，所以我認為實際實現(xiàn)不了。

其實除了行內(nèi)元素和塊級元素，還有一種元素 inline-block，它集合兩者的優(yōu)點。（之后會有專門一篇文章總結(jié)。）

所以用display:inline-block也可以實現(xiàn)。

避免相遇

最重要的前提就是兩個元素相遇，才有可能合并，我們只需要把它們隔斷！

那么在相遇的兩個margin中間可以有什么呢？
我針對兩種情況給出了圖解。

由此可以很清楚的看出來，只有父子的情況才能用這種方法。

而且方法也很顯而易見：在父級元素設(shè)置padding或者border！

對于父子元素來說，還有一種方式：
清除浮動,overflow:hidden overflow:auto 即可，關(guān)于為什么能清除浮動還沒有搞清楚。

針對父子元素的方法
設(shè)置了清除浮動屬性

注意

如果有負外邊距，合并后外邊距為最大正邊距加上最小負邊距（絕對值最大的一個），如上面元素下邊距為20px，下面元素上邊距為-20px，則最后為0px.

在實際的情況， 可以只寫margin-bottom或者margin-top避免出現(xiàn)這種情況。

非塊元素如何顯示？

為此我專門寫了一篇文章：細究內(nèi)聯(lián)元素（你一定不知道的東西）（同樣的以后再上鏈接。）

更新情況

2017.12.03 第一版
2017.12.03 第二版，修改排版，修改一些重要理解，增加新的探究。
2017.12.15 第三版，修改排版，增加一些新的思索

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54510.html

相關(guān)文章

  • CSS盒子模型以及外邊框合并的問題

    摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

    paulli3 評論0 收藏0

  • CSS學(xué)習(xí)（二）

    摘要：學(xué)習(xí)二一三大模型之盒子模型盒子模型每個矩形元素都由元素的內(nèi)容，內(nèi)邊距，邊框，和外邊距邊框盒子的厚度，如手機包裝盒的厚度內(nèi)邊距內(nèi)容與邊框之間的距離，如填充泡沫的厚度外邊距與其他盒子的距離邊框樣式格式單實線用的最多虛線點線雙實線邊框綜合寫法寫 CSS學(xué)習(xí)（二） 一、CSS三大模型之盒子模型 1.盒子模型 每個矩形元素都由元素的內(nèi)容，內(nèi)邊距，邊框，和外邊距 邊框：盒子的厚度Border，如手...

    Near_Li 評論0 收藏0

  • css盒模型理解

    摘要：盒模型概念盒子模型又稱框模型，包含了元素內(nèi)容內(nèi)邊距邊框外邊距幾個要素。盒子垂直方向的距離由決定。屬于同一個的兩個相鄰盒子垂直方向的會發(fā)生重疊。計算高度時，自然也會檢測浮動的子盒子高度?？倢挾瓤偢叨群凶釉O(shè)置的值其實是除外的的總寬度。 css盒模型概念 css盒子模型又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊...

    xingqiba 評論0 收藏0

  • 前端基礎(chǔ)入門二（CSS）

    摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

    Lorry_Lu 評論0 收藏0

  • CSS 盒模型簡介

    摘要：左右和會起作用。外邊距合并當一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 一、盒子模型概述 盒子模型是CSS的基石,指定標簽如何顯示；頁面上的每個元素都被當成一個矩形盒子,占據(jù)一定的頁面空間,這個盒子由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊界（m...

    netmou 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<