CSS-盒模型

時間 2019-11-12

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

在這張圖中，咱們發現咱們設置的300*400出如今了最裏面的那個藍框中，與此同時咱們能夠發如今這個盒模型中除了咱們設置的內容（content），還有margin（外邊距）、border（邊框）、padding（內邊框）javascript

margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文本和圖像。css

爲了正確設置元素在全部瀏覽器中的寬度和高度，你須要知道盒模型是如何工做的。html

而咱們在測試效果圖看到的350*450盒子，前端

350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2
450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2java

css的兩種盒模型
而引發上面效果的緣由來自於 css 的兩種盒模型的不一樣，這裏我先對兩種盒模型作個介紹。css3

W3C的標準盒模型segmentfault

在標準的盒子模型中，width指content部分的寬度api

IE的盒模型瀏覽器

在IE盒子模型中，width表示content+padding+border這三個部分的寬度dom

咱們能夠看出咱們上面的使用的默認正是W3C標準盒模型，而這裏盒模型的選取更傾向於項目和開發者的習慣，並無絕對的好壞之分。

box-sizing的使用：若是想要切換盒模型也很簡單，這裏須要藉助css3的box-sizing屬性

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默認屬性是content-box

頁面的元素（好比div）設置個固定的高度或寬度。但若是給這個div又設置了內邊距或者邊框的話，那麼這個div就會被撐大。也就是其實際的尺寸變成了：設置的寬高尺寸+內邊距+邊框。這樣就有可能對咱們的佈局形成影響，若是不想讓內邊距和邊框影響到咱們設置的固定尺寸，能夠藉助 box-sizing 這個css屬性來實現。

盒子模型（box model）的基本屬性

內邊距(padding)的設定：

.盒子的內邊距爲上右下左四個方向

.內邊距的設定用來控制盒子中裝載的內容到盒子邊緣(邊框)之間的距離。

.盒子的內邊距佔據的是盒子裏面的空間，最小爲0，不容許出現負值。

內邊距(padding)複合屬性：

.padding-top:上內邊距

.padding-right:右內邊距

.padding-bottom:下內邊距

.padding-left:左內邊距

外邊距(margin)的設定：

.盒子的外邊距分爲上右下左四個方向

.外邊距的設定用來控制盒子外圍四周的距離，不屬於自己範疇

.外邊距的主要用途是控制盒子的位置(如用的比較多的margin:0 auto，表示盒子居中，即上下爲0，左右自動)，因此能夠出現負值。

外邊距(margin)複合屬性：

.margin-top:上外邊距

.margin-right:右外邊距

.margin-bottom:下外邊距

.margin-left:左外邊距

邊框(border)的設定：

.大部分的元素對象在默認狀況下是沒有邊框的

.要設定邊框，必須同時設定3個要素：寬度、樣式、和色彩。(如border:1px solid red)

邊框(border)複合屬性

一、邊框按方向分類的擴展屬性

.border-top:上邊框

.border-right:右邊框

.border-bottom:下邊框

.border-left:左邊框

二、邊框按屬性要素分類的擴展屬性

.border-width:邊框寬度

.border-style:邊框樣式

.border-color:邊框色彩

三、邊框樣式的設定

none：無輪廓。border-color將被忽略，border-width計算值爲0，除非邊框輪廓爲圖像，即border-image。

hidden：隱藏邊框。IE7及如下尚不支持

dotted：點狀輪廓。IE6下顯示爲dashed效果

dashed：虛線輪廓。

solid：實線輪廓

double：雙線輪廓。兩條單線與其間隔的和等於指定的border-width值

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

方式一：經過DOM節點的 style 樣式獲取

element.style.width/height;

缺點：經過這種方式，只能獲取行內樣式，不能獲取內嵌的樣式和外鏈的樣式。

這種方式有侷限性，但應該瞭解。

方式二（IE獨有的）

element.currentStyle.width/height;

獲取到的即時運行完以後的寬高（三種css樣式均可以獲取）。但這種方式只有IE獨有。

方式三（通用型）

window.getComputedStyle(element).width/height;

方式三和方式二同樣。只不過，方式三能兼容 Chrome、火狐。是通用型方式。

方式4

element.getBoundingClientRect().width/height;

此 api 的做用是：獲取一個元素的絕對位置。絕對位置是視窗 viewport 左上角的絕對位置。

此 api 能夠拿到四個屬性：left、top、width、height。

總結：

上面的四種方式，要求能說出來區別，以及哪一個的通用型更強。

margin塌陷/margin重疊

標準文檔流中，豎直方向的margin不疊加，只取較大的值做爲margin(水平方向的margin是能夠疊加的，即水平方向沒有塌陷現象)。

PS：若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有margin重疊的現象的。

咱們來看幾個例子。

兄弟元素之間

以下圖所示：

子元素和父元素之間

<!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。注意，此時父親的 height 是100，而不是110。由於兒子和父親在豎直方向上，共一個margin。

兒子這個盒子：

父親這個盒子：

上方代碼中，若是咱們給父親設置一個屬性：overflow: hidden，就能夠避免這個問題，此時父親的高度是110px，這個用到的就是BFC（下一段講解）。

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

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

咱們來看一個奇怪的現象。如今有下面這樣一個結構：（div中放一個p）

<div> <p></p> </div>

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

此時咱們給父親div加一個border屬性，就正常了：

若是父親沒有border，那麼兒子的margin實際上踹的是「流」，踹的是這「行」。因此，父親總體也掉下來了。

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

因此，若是要表達父子之間的距離，咱們必定要善於使用父親的padding，而不是兒子的margin。

BFC（邊距重疊解決方案）

BFC的概念

BFC（Block Formatting Context）：塊級格式化上下文。你能夠把它理解成一個獨立的區域。

另外還有個概念叫IFC。不過，BFC問得更多。

BFC 的原理/BFC的佈局規則【很是重要】

BFC 的原理，其實也就是 BFC 的渲染規則（能說出如下四點就夠了）。包括：

（1）BFC 裏面的元素，在垂直方向，邊距會發生重疊。
（2）BFC在頁面中是獨立的容器，外面的元素不會影響裏面的元素，反之亦然。（稍後看舉例1）
（3）BFC區域不與旁邊的float box區域重疊。（能夠用來清除浮動帶來的影響）。（稍後看舉例2）
（4）計算BFC的高度時，浮動的子元素也參與計算。（稍後看舉例3）

如何生成BFC

有如下幾種方法：

方法1：overflow: 不爲vidible，可讓屬性是 hidden、auto。【最經常使用】
方法2：浮動中：float的屬性值不爲none。意思是，只要設置了浮動，當前元素就建立了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative便可，能夠是absolute或fixed，也就生成了一個BFC。
方法4：display爲inline-block, table-cell, table-caption, flex, inline-flex

參考連接：

下面來看幾個例子，看看如何生成BFC。

BFC 的應用

舉例1：解決 margin 重疊

當父元素和子元素髮生 margin 重疊時，解決辦法：給子元素增長一個父元素，給這個父元素建立BFC。

好比說，針對下面這樣一個 div 結構：

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

上面的div結構中，若是父元素和子元素髮生margin重疊，咱們能夠給子元素建立一個 BFC，就解決了：

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

由於第二條：BFC區域是一個獨立的區域，不會影響外面的元素。

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

針對下面這樣一個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; /*右側標準流裏的元素，比左側浮動的元素要高*/ 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>

效果以下：

上圖中，因爲右側標準流裏的元素，比左側浮動的元素要高，致使右側有一部分會跑到左邊的下面去。

若是要解決這個問題，能夠將右側的元素建立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的背景色顯現出來了，說明問題解決了。

舉例3：清除浮動

如今有下面這樣的結構：

<!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>