CSS盒模型完整介紹

qqlcbb 發布于2019-08-29 14:21 / 2878人閱讀

摘要：盒模型的認識基本概念標準模型模型。如圖由于盒模型的怪異模式，模型和標準模型的內容計算方式不同。設置為標準模型，它的元素寬度。這里就不介紹，大家可以自行搜索。

盒模型的認識

基本概念：標準模型+IE模型。包括margin,border,padding,content

標準模型和IE模型的區別

css如何設置獲取這兩種模型的寬和高

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

根據盒模型解釋邊距重疊

BFC（邊距重疊解決方案，還有IFC）解決邊距重疊

一、基本概念：標準模型+IE模型

什么是盒模型：盒模型又稱框模型（Box Model）,包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：

由于IE盒模型的怪異模式，IE模型和標準模型的內容計算方式不同。

二、標準模型和IE模型的區別

IE模型和標準模型唯一的區別是內容計算方式的不同，如下圖所示：

IE模型元素寬度width=content+padding，高度計算相同

標準模型元素寬度width=content，高度計算相同

三、css如何設置獲取這兩種模型的寬和高

通過css3新增的屬性 box-sizing: content-box | border-box分別設置盒模型為標準模型（content-box）和IE模型（border-box）。

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box設置為標準模型，它的元素寬度width=100px。

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box設置為IE模型，它的元素寬度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。

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

dom.style.width/height 只能取到行內樣式的寬和高，style標簽中和link外鏈的樣式取不到。

dom.currentStyle.width/height 取到的是最終渲染后的寬和高，只有IE支持此屬性。

window.getComputedStyle(dom).width/height 同（2）但是多瀏覽器支持，IE9以上支持。

dom.getBoundingClientRect().width/height 也是得到渲染后的寬和高，大多瀏覽器支持。IE9以上支持，除此外還可以取到相對于視窗的上下左右的距離

以上API在瀏覽器中測試過，有興趣可以都試一下

五、外邊距重疊

當兩個垂直外邊距相遇時，他們將形成一個外邊距，合并后的外邊距高度等于兩個發生合并的外邊距的高度中的較大者。注意：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并，行內框、浮動框或絕對定位之間的外邊距不會合并。

且看下面例子：

這里父元素section的高度是多少呢，100px，但是我們給section設置overflow:hidden后高度就變成110px，這是為什么呢，其實這里我們給父元素創建了BFC。，什么是BFC,請看下面的介紹。

六、BFC

BFC(Block Formatting Context)：塊級格式化上下文。
BFC決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當設計到可視化布局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定的規則進行布局。一個環境中的元素不會影響到其他環境中的布局。

BFC的原理（渲染規則）

BFC元素垂直方向的邊距會發生重疊。屬于不同BFC外邊距不會發生重疊

BFC的區域不會與浮動元素的布局重疊。

BFC元素是一個獨立的容器，外面的元素不會影響里面的元素。里面的元素也不會影響外面的元素。

計算BFC高度的時候，浮動元素也會參與計算(清除浮動)

如何創建BFC

overflow不為visible;

float的值不為none；

position的值不為static或relative；

display屬性為inline-blocks,table,table-cell,table-caption,flex,inline-flex;

說了這么多規則，放幾個實類出來看看。

請看這里的第二個p元素

他被一個父元素包裹，并且父元素有 overflow:hidden 樣式，前面的如何創建BFC的第一條就說了 overflow:hidden 可以創建一個BFC。結果如下圖所示。

我們看這里的2，它的上下外邊距都沒有與1和3發生重疊，但3與4外邊距發生了重疊。這就解釋了BFC創建了一個獨立的環境，這個環境中的元素不會影響到其他環境中的布局，所以BFC內的外邊距不與外部的外邊距發生重疊。

再看看下面的列子：

效果如下：

寫過前端頁面的我們肯定遇到過這種情況，這里其實是浮動元素疊在 .right 元素的上面，如果我們想讓.right元素不會延伸到 float元素怎么辦,其實我們在.right元素上加 overflow:hidden （用其他的方式創建BFC也可以）創建BFC就可以解決。因為BFC不會與浮動元素發生重疊。

還有一種情況很常見，就是由于子元素浮動，導致父元素的高度不會把浮動元素算在內，那么我們在父元素創建BFC就可以讓可以讓浮動元素也參與高度計算。

IFC這里就不介紹，大家可以自行搜索。

GPU云服務器云服務器盒模型盒模型html嗎簡述html盒模型 webrtc完整介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113070.html

【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
面試--css面試

摘要：怪異的盒模型和標準瀏覽器的盒模型，可以通過屬性控制兩種盒模型的變化屬性值這個屬性值和是的盒模型是有關系的。簡便完整響應式地實現各種頁面布局提出了布局。交叉軸的起點對齊。 1、css盒模型 css的盒模型包括：content+padding+border+margin同時值得注意的是：css 的外邊距會在垂直方向合并。兩個上下方向相鄰的塊元素框垂直相遇時，外邊距會合并，合并后的外邊距...

sPeng 2019-08-30 15:53 評論0 收藏0
常見的面試問題：【CSS】CSS盒模型

摘要：標準盒模型盒子總寬度高度。以上支持，除此外還可以取到相對于視窗的上下左右的距離。包括高度寬度內邊距和邊框，不包括外邊距。主要看怎么父元素的盒模型如何設置。空元素的邊距重疊是取與的最大值。一、概念 CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。CSS盒模型：標準模...

android_c 2019-08-30 15:44 評論0 收藏0
深入css布局 (1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內元素，行內塊級元素。行內級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們...

ky0ncheng 2019-04-23 13:43 評論0 收藏0