寫在前面：

嘗試回答幾個問題：

什么是盒模型，控制盒模型的屬性有哪些？

Margin、Padding、Border、Width、Height這些屬性改變/影響盒模型，但每個屬性都會在所有元素上生效么？

如果存在區別，那么和元素類型或者元素定位有關系么？

浮動元素是什么？位置如何確定？如果去掉浮動？

層疊關系如何判斷優先級？越大就越靠近用戶么？

盒模型是我們每天都在接觸的，但盒子模型到底如何計算排列的，總是一知半解。本文嘗試從W3C規范和實例入手，解決上述問題。

目錄

包含塊(containing block) 盒模型(Box model) 定位模式(Positioning schemes) 層疊關系(Layered presentation)

包含塊

概念 每個盒子會變成他后代盒子的包含塊，后代盒子的大小和位置會根據他包含塊的矩形邊框進行計算。但是不會受到包含塊的限制，可能會溢出。 確定包含塊的方法

對于根元素、position=fixed的元素，包含塊都是視窗

如果元素是relative或者static,則是他最近的塊形父元素的內容區(content)——注:規定了父元素必須是block container

如果元素是absolute，包含塊是最近的非static的父元素的Padding區——注:父元素的類型未規定

舉例 包含塊最直觀的判斷是一個元素對大小設置百分比時，相對的元素是哪一個，這個元素就是他的包含塊 1. 最基本的例子 示例代碼 2. 當em變成absolute定位 示例代碼

盒模型

Margin

寬度。分為四個方向，都支持百分比和具體的像素。并且margin的百分比是根據元素的包含塊(containing-block)的width來計算。并不是margin-top/ bottom對應height。示例代碼

內聯元素(display: inline)的margin-top和margin-bottom失效。瀏覽器不允許設置。

合并。

• • 水平的margin不會合并(inline-block和inline都支持) 示例代碼
  • 都屬于常規流內(in flow)塊級盒，處于同一個上下文的兄弟元素 解決方法：將其中一個塊盒變成BFC，阻止margin的合并 示例代碼
  • 塊級父元素和其子元素，在沒有padding,border,height,空隙將之隔開時，子元素的margin會滲透到父元素上。簡單講，父元素和子元素之間沒有其他元素。示例代碼

? 4.? 允許設置負值。

• • 對于position=static元素，負值相當于將元素向負值方向移動覆蓋，但是只會覆蓋顏色，不會覆蓋文字。示例代碼
  • 對于position=relative元素， 負值還是會把下面的元素粘著一起移動，但會完全覆蓋前一個元素。示例代碼
  • 對于position=absolute元素，因為元素脫離了文檔流，所以負值只會自己發生偏移，對前后元素沒有任何影響。示例代碼
  • 對于float元素，可以通過負值進行覆蓋，最常見的應用是三欄應用。示例代碼

Padding

寬度。同Margin。

內聯元素(display: inline)的padding生效，但是top和bottom并不會推擠，只會覆蓋其他元素，覆蓋情況遵循z-index原則。示例代碼

合并。Padding不存在合并情況示例代碼

不允許負值。

Border

寬度。只有px，不支持百分比。

合并。inline元素左右不合并，上下會合并。inline-block&block元素四個方向都不會合并示例代碼

Width

內聯元素不能設置width和height。

非內聯元素百分比設置(見上文包含塊)

• • 根據包含塊的content box寬度計算
  • 如果當前元素是絕對定位，那么相對父元素的padding box的寬度定位

Height 計算方式同width

定位模式

常規流 流內元素有幾大模型。CSS2.1中定義了IFC（Inline Formatting Contexts）與 BFC（Block Formatting Contexts）。CSS3中增加了GFC（GridLayout Formatting Contexts）和FFC（Flex Formatting Context）。后兩個后續文章會詳細講解，這里暫且不提。 BFC（Block formatting contexts）塊格式化上下文

什么情況產生BFC(四選一)

• • 浮動
  • 絕對定位
  • 非塊盒的塊容器（inline-block）
  • overflow不為visible的塊盒

? ?2. 特性

• • 從包含塊頂部豎直方向排列
  • BFC內部兄弟盒子之間的margin會合并——可以通過把兄弟之一變成BFC解決合并
  • BFC可以阻止margin合并

IFC（Inline formatting contexts）內聯格式化上下文

如何產生：只有在一個塊級元素中僅僅包含內聯級別元素時才會生成

特性

• • 從包含塊頂部水平方向排列
  • 排列情況和浮動與否會改變行盒的高度
  • 當一個行盒被分割，margin,border,padding都不會再有視覺效果了

浮動

概念：float CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，盡管仍然保持部分的流動性

位置:

• • 當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素
  • 浮動元素會根據上一個元素的類型判斷位置，如果上一個是浮動的，則跟隨他，放不下就擠到下一行
  • 如果上一個是標準流的元素，則浮動元素的相對垂直高度不變，頂部和上一個元素的底部對齊。

? ?3. 清除浮動

• • 引入空隙，父元素使用::after偽元素
  • 浮動元素限制成BFC，使用overflow:hidden
  • clear屬性

? ?4. 代碼： 示例代碼 絕對定位position=absolute設置元素絕對定位，會導致元素變成絕對定位，脫離文檔流，并且元素此時是BFC布局，Margin不會進行合并。使用top/bottom/left/right(下面簡寫成TBLR)控制位置的變動，具體像素和百分比都參照包含塊進行偏移。比較其他position屬性值

position=static 常規流布局，無法通過TBLR控制位置

position=relative 盒子相對于其常規流位置進行偏移，兄弟元素相對其偏移前的位置定位。使用TBLR控制時，如果是固定像素，那盒子相對于自身邊界偏移，如果是百分比，則參照包含塊偏移。

position=fixed 包含塊是視窗，使用TBLR控制都是相對包含塊偏移

對于百分比：left/right 相對于包含塊的width，top/bottom相對于包含塊的height

層疊關系

在一個層疊上下文中一共可以有7種層疊等級，列舉如下：示例代碼

背景和邊框 —— 形成層疊上下文的元素的背景和邊框。 層疊上下文中的最低等級。

負z-index值 —— 層疊上下文內有著負z-index值的子元素。

塊級盒 —— 文檔流中非行內非定位子元素。

浮動盒 —— 非定位浮動元素。

行內盒 —— 文檔流中行內級別非定位子元素。

z-index: 0 —— 定位元素。 這些元素形成了新的層疊上下文。

正z-index值 —— 定位元素。 層疊上下文中的最高等級。

當對某一個元素的z-index賦值了除了auto以外的值，就創建了一個新的層疊上下文，獨立于其他的層疊上下文。比較順序變成，先比較各個層疊上下文的z-index。然后在層疊上下文中比較子元素的優先級。

總結

本文解釋包含塊，以及基于包含塊確定的盒模型，對盒模型的四個邊界的計算方式做了總結。

對元素的定位方式和不同定位方式引起的元素之間位置變化做了總結。

后續會繼續以總結形式梳理CSS中常見但迷惑的地方。

如有錯誤，請指出，大家一起共同進步~

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS原理解析之模型篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。