亚洲成av人无码中文字幕_ CSS盒模型的深度思考及BFC

轉：http://www.shouce.ren/post/view/id/113488

題目：談一談你對CSS盒模型的認識

專(zhuān)業(yè)的面試，一定會(huì )問(wèn) CSS 盒模型。對于這個(gè)題目，我們要回答一下幾個(gè)方面：

（1）基本概念：content、padding、margin。

（2）標準盒模型、IE盒模型的區別。不要漏說(shuō)了IE盒模型，通過(guò)這個(gè)問(wèn)題，可以篩選一部分人。

（3）CSS如何設置這兩種模型（即：如何設置某個(gè)盒子為其中一個(gè)模型）？如果回答了上面的第二條，還會(huì )繼續追問(wèn)這一條。

（4）JS如何設置、獲取盒模型對應的寬和高？這一步，已經(jīng)有很多人答不上來(lái)了。

（5）實(shí)例題：根據盒模型解釋邊距重疊。

前四個(gè)方面是逐漸遞增，第五個(gè)方面，卻鮮有人知。

（6）BFC（邊距重疊解決方案）或IFC。

如果能回答第五條，就會(huì )引出第六條。BFC是面試頻率較高的。

總結：以上幾點(diǎn)，從上到下，知識點(diǎn)逐漸遞增，知識面從理論、CSS、JS，又回到CSS理論。

接下來(lái)，我們把上面的六條，依次講解。

標準盒模型和IE盒子模型

標準盒子模型：

IE盒子模型：

上圖顯示：

在 CSS 盒子模型 (Box Model) 規定了元素處理元素的幾種方式：

width和height：內容的寬度、高度（不是盒子的寬度、高度）。
padding：內邊距。
border：邊框。
margin：外邊距。

CSS盒模型和IE盒模型的區別：

在標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會(huì )影響內容區域的尺寸，但是會(huì )增加元素框的總尺寸。
IE盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。

CSS如何設置這兩種模型

代碼如下：

 /* 設置當前盒子為 標準盒模型（默認） */
    box-sizing: content-box;
    /* 設置當前盒子為 IE盒模型 */
    box-sizing: border-box; 
復制

備注：盒子默認為標準盒模型。

JS如何設置、獲取盒模型對應的寬和高

方式一：通過(guò)DOM節點(diǎn)的 style 樣式獲取

 element.style.width/height;
復制

缺點(diǎn)：通過(guò)這種方式，只能獲取行內樣式，不能獲取內嵌的樣式和外鏈的樣式。

這種方式有局限性，但應該了解。

方式二（IE獨有的）

 element.currentStyle.width/height;
復制

獲取到的即時(shí)運行完之后的寬高（三種css樣式都可以獲?。?。但這種方式只有IE獨有。

方式三（通用型）

 window.getComputedStyle(element).width/height;
復制

方式三和方式二一樣。只不過(guò)，方式三能兼容 Chrome、火狐。是通用型方式。

方式4

 element.getBoundingClientRect().width/height;
復制

此 api 的作用是：獲取一個(gè)元素的絕對位置。絕對位置是視窗 viewport 左上角的絕對位置。

此 api 可以拿到四個(gè)屬性：left、top、width、height。

總結：

上面的四種方式，要求能說(shuō)出來(lái)區別，以及哪個(gè)的通用型更強。

margin塌陷/margin重疊

標準文檔流中，豎直方向的margin不疊加，只取較大的值作為margin(水平方向的margin是可以疊加的，即水平方向沒(méi)有塌陷現象)。

PS：如果不在標準流，比如盒子都浮動(dòng)了，那么兩個(gè)盒子之間是沒(méi)有margin重疊的現象的。

我們來(lái)看幾個(gè)例子。

兄弟元素之間

如下圖所示：

子元素和父元素之間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 
        * {
            margin: 0;
            padding: 0;
        }
 
        .father {
            background: green;
 
        }
 
        /* 給兒子設置margin-top為10像素 */
        .son {
            height: 100px;
            margin-top: 10px;
            background: red;
        }
 
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>
 
復制

上面的代碼中，兒子的height是 100px，magin-top 是10px。注意，此時(shí)父親的 height 是100，而不是110。因為兒子和父親在豎直方向上，共一個(gè)margin。

兒子這個(gè)盒子：

父親這個(gè)盒子：

上方代碼中，如果我們給父親設置一個(gè)屬性：overflow: hidden，就可以避免這個(gè)問(wèn)題，此時(shí)父親的高度是110px，這個(gè)用到的就是BFC（下一段講解）。

善于使用父親的padding，而不是兒子的margin

其實(shí)，這一小段講的內容與上一小段相同，都是講父子之間的margin重疊。

我們來(lái)看一個(gè)奇怪的現象?，F在有下面這樣一個(gè)結構：（div中放一個(gè)p）

 <div> <p></p> </div>
復制

上面的結構中，我們嘗試通過(guò)給兒子p一個(gè)margin-top:50px;的屬性，讓其與父親保持50px的上邊距。結果卻看到了下面的奇怪的現象：

此時(shí)我們給父親div加一個(gè)border屬性，就正常了：

如果父親沒(méi)有border，那么兒子的margin實(shí)際上踹的是“流”，踹的是這“行”。所以，父親整體也掉下來(lái)了。

margin這個(gè)屬性，本質(zhì)上描述的是兄弟和兄弟之間的距離；最好不要用這個(gè)marign表達父子之間的距離。

所以，如果要表達父子之間的距離，我們一定要善于使用父親的padding，而不是兒子的margin。

BFC（邊距重疊解決方案）

BFC的概念

BFC（Block Formatting Context）：塊級格式化上下文。你可以把它理解成一個(gè)獨立的區域。

另外還有個(gè)概念叫IFC。不過(guò)，BFC問(wèn)得更多。

BFC 的原理/BFC的布局規則【非常重要】

BFC 的原理，其實(shí)也就是 BFC 的渲染規則（能說(shuō)出以下四點(diǎn)就夠了）。包括：

（1）BFC 里面的元素，在垂直方向，邊距會(huì )發(fā)生重疊。
（2）BFC在頁(yè)面中是獨立的容器，外面的元素不會(huì )影響里面的元素，反之亦然。（稍后看舉例1）
（3）BFC區域不與旁邊的float box區域重疊。（可以用來(lái)清除浮動(dòng)帶來(lái)的影響）。（稍后看舉例2）
（4）計算BFC的高度時(shí)，浮動(dòng)的子元素也參與計算。（稍后看舉例3）

如何生成BFC

有以下幾種方法：

方法1：overflow: 不為vidible，可以讓屬性是 hidden、auto?！咀畛Ｓ谩?/p>
方法2：浮動(dòng)中：float的屬性值不為none。意思是，只要設置了浮動(dòng)，當前元素就創(chuàng )建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一個(gè)BFC。
方法4：display為inline-block, table-cell, table-caption, flex, inline-flex

參考鏈接：

BFC原理詳解
BFC詳解
前端精選文摘：BFC 神奇背后的原理

下面來(lái)看幾個(gè)例子，看看如何生成BFC。

BFC 的應用

舉例1：解決 margin 重疊

當父元素和子元素發(fā)生 margin 重疊時(shí)，解決辦法：給子元素增加一個(gè)父元素，給這個(gè)父元素創(chuàng )建BFC。

比如說(shuō)，針對下面這樣一個(gè) div 結構：

<div class="father">
    <p class="son">
    </p>
</div> 
復制

上面的div結構中，如果父元素和子元素發(fā)生margin重疊，我們可以給子元素創(chuàng )建一個(gè) BFC，就解決了：

<div class="father">
    <p class="son" style="overflow: hidden">
    </p>
</div> 
復制

因為第二條：BFC區域是一個(gè)獨立的區域，不會(huì )影響外面的元素。

舉例2：BFC區域不與float區域重疊：

針對下面這樣一個(gè)div結構；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 
        .father-layout {
            background: pink;
        }
 
        .father-layout .left {
            float: left;
            width: 100px;
            height: 100px;
            background: green;
        }
 
        .father-layout .right {
            height: 150px;  /*右側標準流里的元素，比左側浮動(dòng)的元素要高*/
            background: red;
        }
 
    </style>
</head>
<body>
 
<section class="father-layout">
    <div class="left">
        左側，生命壹號
    </div>
    <div class="right">
        右側，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
    </div>
</section>
 
</body>
</html>
復制

效果如下：

上圖中，由于右側標準流里的元素，比左側浮動(dòng)的元素要高，導致右側有一部分會(huì )跑到左邊的下面去。

如果要解決這個(gè)問(wèn)題，可以將右側的元素創(chuàng )建BFC，因為第三條：BFC區域不與float box區域重疊。解決辦法如下：（將right區域添加overflow屬性）

<div class="right" style="overflow: hidden">
        右側，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
    </div> 
復制

上圖表明，解決之后，father-layout的背景色顯現出來(lái)了，說(shuō)明問(wèn)題解決了。

舉例3：清除浮動(dòng)

現在有下面這樣的結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father {
            background: pink;
        }
        .son {
            float: left;
            background: green;
        }
    </style>
</head>
<body>
<section class="father">
    <div class="son">
        生命壹號
    </div>
</section>
</body>
</html> 
復制