視覺格式化

視覺格式化模型

定義

視覺格式化模型（visual formatting model）：CSS的一種機制，它規定了頁面中的多個盒子如何佈局

CSS的一種機制：視覺格式化模型屬於CSS範疇

多個盒子如何佈局：HTML中的每一個元素都會在頁面中生成盒子，這些盒子如何排列、如何相互影響，由視覺格式化模型定義。

視覺格式化模型是一套很是複雜的機制，包含錯綜複雜的CSS規範

視口

定義

視口（viewport）：可視窗口，一般指瀏覽器的可視區域

視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關

當網頁內容的尺寸超過視口尺寸時，瀏覽器會出現滾動條

包含塊

定義

包含塊（containing block）：每一個元素都有一個包含塊，它是指元素在頁面中擺放的區域

一般狀況下，元素的包含塊就是它父元素的內容盒（content-box）

<li>根元素的包含塊是初始化包含塊（initial containing block）

<li>初始化包含塊是瀏覽器在渲染前自動生成的一塊區域

定位體系概述

視覺格式化模型

定義

視覺格式化模型要求，全部的元素必須放置在他的包含塊中，元素在包含塊中的尺寸和位置，主要受到兩個因素影響：

元素的盒模型

元素的定位體系

什麼是定爲體系

視覺格式化模型規定，定位體系一共有三種：

常規流（normal flow）

浮動（float）

絕對定位（absolute positioned）

注：任何一個元素，必須屬於其中一種定位體系。

注2：不一樣的定位體系中，元素在包含塊中的尺寸和位置會有一些差別。

定位體系斷定

判斷position的值是absolute或fixed。

是=>絕對定位=>結束

不是=>float的值是left或right=>是=>浮動=>結束

不是float的值是left或right=>常規流=>結束

盒模型和定位體系

盒模型就是盒子尺寸；

定位體系就是盒子位置

注：定位體系影響盒模型

盒模型中的尺寸

margin:px/em/%/auto

border:px/em

padding:px/em/%

width:px/em/%/auto

height:px/em/%/auto

盒模型尺寸-%

margin/padding/width的百分比：是包含塊寬度的百分比

height的百分比

盒模型尺寸-auto

尺寸受到定位體系的影響，不一樣的定位體系，auto的計算規則不同

常規流

定義

常規流，又叫作普通流、文檔流、普通文檔流，常規六是最多見的定位體系，全部元素默認狀態下都是常規流定位。

常規流-盒模型中的auto值

水平方向

常規流盒子水平方向上的尺寸，必須等於包含塊的寬度

若是不行，則強行將margin-ight設置爲auto

垂直方向

margin爲auto：0px

height爲auto：適應內容的高度

常規流-盒子位置

盒子在包含塊的垂直方向上依次擺放

依次擺放：按照HTML元素的書寫順序從上到下襬放

盒子在包含塊中佔據的尺寸是整個盒子的尺寸

垂直方向上，若兩個外邊距相鄰，則進行合併（摺疊）

垂直方向：水平方向上的外邊距不會合並

外邊距相鄰：兩個外邊距之間沒有border、padding和content

合併：均爲正數取最大，均爲負數取最小，一正一負則相加

視覺格式化模型

浮動

float

默認值：none=>不浮動

取值：left=>左浮動

tight=>右浮動

margin-laft:auto：儘可能撐滿包含塊（常規流）；0px（浮動）

margin-right:auto：儘可能撐滿包含塊（常規流）；0px（浮動）

margin-top:auto：0px（常規流）；0px（浮動）

margin-bottom:auto：0px（常規流）；0px（浮動）

width:auto：儘可能撐滿包含塊（常規流）；適應內容寬度（浮動）

height:auto：適應內容高度（常規流）；適應內容高度（浮動）

浮動

盒子位置

左浮動的盒子向上向左排列

右浮動的盒子向上向右排列

浮動盒子的頂邊不得高於上一個盒子的頂邊

若剩餘空間沒法放下浮動的盒子，則該盒子向下移動，直到具有足夠的空間可以容納盒子，而後再向左或者向右移動

當常規流趕上浮動

常規流盒子和浮動盒子混合擺放

浮動盒子在擺放時，要避開常規流盒子

常規流盒子在擺放時，無視浮動盒子

常規流盒子的自動高度計算時，無視浮動盒子——高度坍塌</li></ul>

注：常規流的高度無視浮動盒子容易引起高度坍塌

清除浮動

clear：不可繼承

默認值：none：不清除浮動

取值：left：清除做浮動，元素在左浮動的盒子下方擺放

right：清除右浮動，元素在右浮動的盒子下方擺放

both：清除左右浮動，元素在浮動的盒子下方擺放

注：對最後一個子元素使用clear：both，可防止父元素高度坍塌

盒子的相對位置

定義

相對位置，是指相對於盒子在本來定爲體系下的位置，將盒子的position屬性設置爲relative，以啓用相對位置

position：不可繼承

默認值：static

取值：static：靜態位置，盒子在本來定位體系下的位置

relative：相對位置，盒子相對於本來的位置進行偏移

absolute：絕對位置（絕對定位）

fixed：固定位置（絕對定位）

相對位置：該盒子能夠相對於本來的位置進行偏移，可經過left、top、right、bottom設置偏移量

絕對定位

概述

當浮動元素被設置爲絕對定位，float屬性會被強制設置爲none

絕對定位元素對其餘元素的影響：絕對定位元素不會對其餘任何元素形成任何影響

絕對定位元素的位置可經過left、top、rightbottom來設置

絕對定位元素的包含塊：一般狀況下，元素的包含塊是它父元素的內容盒（content-box）

注：一般狀況下是絕對定位元素除外

position中absolute、fixed都是絕對定位

對盒子在包含塊中的位置和影響

盒子的位置：絕對定位中，盒子的位置由left、top、right、bottom四個屬性決定他們表示盒子離包含塊邊緣的距離

盒模型中的auto值

margin-left：auto：0px

margin-right：auto：0px

margin-top：auto：0px

margin-bottom：auto：0px

width：auto：適應內容寬度

height：auto：適應內容寬度

注：少部分狀況下，盒子中auto值須要適應盒子的位置

堆疊級別

概念

它決定了元素誰顯示在前誰顯示在後，一般狀況下，堆疊級別越高，顯示越靠前，經過z-index屬性可設置元素的堆疊級別

z-index

z-index：不可繼承

默認值：auto：自動，一般狀況下，書寫順序靠後的元素越靠前顯示

取值：數值：手動設置堆疊級別，堆疊級別高的元素靠前顯示

注：

不要使用靜態位置（position=static）的元素

儘可能不要使用z-index

塊級格式化上下文

全稱Block Formatting Context，簡稱BFC

它是一塊獨立的渲染區域，它規定了在該區域中，常規流塊盒的佈局

獨立的

不一樣的BFC區域，他們進行了渲染時互不干擾

常見BFC的元素，隔絕了它內部和外部的聯繫，內部的渲染不會影響到外部

具體規則：

建立BFC的元素，它的自動高度須要計算浮動元素

建立BFC的元素，它的邊框盒不會與浮動元素重疊

建立BFC的元素，不會和它的子元素進行外邊距合併

規定該區域中，常規流塊盒的佈局

常規流塊盒在水平方向上，必須撐滿包含塊

常規流塊盒在包含塊的垂直方向上依次擺放

常規流塊盒若外邊距無縫相鄰，則進行外邊距合併

常規流塊盒的自動高度和擺放位置，無視浮動元素

BFC渲染區域

這個區域由某個HTML元素建立，如下元素會在其內部建立BFC區域：

根元素：意味着，< html >元素建立的BFC區域，覆蓋了網頁中全部的元素

浮動和絕對定位元素

overflow不等於visible的塊盒