一、基本概念
視覺格式化模型：css的一種機制，它規定了頁面中的多個盒子如何布局
• 視覺格式化模型是一套非常複雜的機制，包含錯綜複雜的css規範
• 本章的課程從實用的角度出發，僅學習在劃分頁面區域的時候需要的核心知識
• 由於劃分頁面區域時幾乎都使用的是塊盒，因此，本章仍然只涉及塊盒
視口：一種視覺化的視窗，大小和內容無關
包含塊（containing block）：每個元素都有乙個包含塊，它是指元素在頁面中擺放的區域
通常情況下，元素的包含塊是它父元素的內容盒（content-box）
html沒有父元素，是初始化包含塊
二、定位體系概述
元素在包含塊中的尺寸和位置，主要受到兩個因素的影響：元素的盒模型和定位體系
定位體系一共有三種：
常規流（normal flow）
浮動（float）
絕對定位（absolute positioned）
不同的定位體系中，元素在包含塊中的尺寸和位置會有一些差異。
定位體系判定：
如果某個元素，分別為它宣告了下面的樣式：
position:absolute; 定位體系是：絕對定位
float:left; 定位體系是：浮動
position:absolute; float:left; 定位體系是：絕對定位
position:static; float:left; 定位體系是：浮動
/* 未宣告樣式 */定位體系是：常規流體系
三、盒模型和定位體系
盒模型就是盒子的尺寸，定位體系等於盒子位置
盒模型中的尺寸：
margin：px、em、%、auto
border：px、em
padding：px、em、%
width：px、em、%、auto
height：px、em、%、auto
margin、padding、width的百分比：是包含塊寬度的百分比
盒模型中的尺寸 — auto
尺寸受到定位體系的影響，不同的定位體系，auto的計算規則不一樣
常規流，浮動，絕對定位：對auto值的影響，對盒子在包含塊中位置的影響
四、常規流
常規流，又叫做普通流、文件流、普通文件流，是最常見的定位體系，所有元素預設都是常規流。
水平方向：如果不行，則強行將margin-right設定為auto
常規流盒子水平方向上的尺寸，必須等於包含塊的寬度。
垂直方向：margin為auto：0px
height為auto：適應內容的高度
盒子位置：依次擺放：按照html元素的書寫順序從上到下擺放
盒子在包含塊中佔據的尺寸是整個盒子的尺寸
垂直方向上，若兩個外邊距相鄰，則進行合併（摺疊）
垂直方向：水平方向上的外邊距不會合併
外邊距相鄰：兩個外邊距之間沒有border、padding和content
合併：均為正數取最大，均為負數取最小，一正一負則相加
浮動：當元素為left和right時為浮動
盒子位置：
左浮動的盒子向上向左排列
右浮動的盒子向上向右排列
浮動盒子的頂邊不得高於上乙個盒子的頂邊
若剩餘空間無法放下浮動的盒子，則該盒子向下移動，直到具備足夠的空間能容納盒子，然後再向左或向右移動
五、當常規流遇上浮動
常規流盒子和浮動盒子混合擺放
清除浮動
常規流盒子和浮動盒子混合擺放
浮動盒子在擺放時，要避開常規流盒子
常規流盒子在擺放時，無視浮動盒子
常規流盒子的自動高度計算時，無視浮動盒子
高度坍塌：常規流盒子的高度無視浮動盒子
清除浮動：clear
none：不清除浮動
left：清除左浮動，元素在左浮動的盒子下方擺放
right：清除右浮動，元素在右浮動的盒子下方擺放
both：清除左右浮動，元素在浮動的盒子下方擺放
對最後乙個子元素使用clear:both，可防止父元素高度坍塌
六、盒子的相對位置
是指相對於盒子在原本定位體系下的位置，position屬性設定為relative，以啟用相對位置
取值：static：靜態位置，盒子在原本定位體系下的位置
relative：相對位置，盒子相對於原本的位置進行偏移
absolute：絕對位置
fixed：固定位置
盒子偏移後，不會對其他盒子造成任何影響。left，right，top，botton只能出現兩個
絕對定位：如果元素被設定為絕對定位，float屬性會被強制設定為none
絕對定位元素不會對其他任何元素造成任何影響
絕對定位可以通過left，right，botton，top來設定
七、堆疊級別
堆疊級別（stack level）：它決定了元素誰顯示在前誰顯示在後
通常情況下，堆疊級別越高，顯示越靠前
通過z-index屬性可設定元素的堆疊級別
使用z-index屬性時需要注意的：不要用於靜態位置的元素，盡量不要使用z-index
八、塊級格式化上下文
全稱block formatting context，簡稱bfc
它是一塊獨立的渲染區域，它規定了在該區域中，常規流塊盒的布局：常規流塊盒在水平方向上，必須撐滿包含塊
常規流塊盒在包含塊的垂直方向上依次擺放
常規流塊盒若外邊距無縫相鄰，則進行外邊距合併
常規流塊盒的自動高度和擺放位置，無視浮動元素
建立bfc的元素，隔絕了它內部和外部的聯絡，內部的渲染不會影響到外部
具體規則：
建立bfc的元素，它的自動高度需要計算浮動元素
建立bfc的元素，它的邊框盒不會與浮動元素重疊
建立bfc的元素，不會和它的子元素進行外邊距合併
布局和定位
網頁的三種布局 流動模型 flow flow 預設的網頁布局模型。浮動模型 flow 可以讓塊級元素顯示在一行，用到float left right 層模型 layer 層模型有三種形式 a position absolute 這種形式將元素從文件流中拖出，然後用left,right,top,bot...
定位和布局
定位和布局 1 1 視覺格式化模型 1 2 視口 1 2 包含塊 2 1 定位體系概述 常規流 normal flow 浮動 float 絕對定位 absolute positioned 2 2 定位體系判定 position 絕對定位為預設值static float 浮動預設值為 none 預設情...
css 布局和定位
首先，我們說一下flow，實際上就是從html在上面開始，從上到下沿著元素流逐個顯示。對於塊元素，從上到下布局。對於塊元素中的內聯元素，從左上方流向右下方。對於內聯元素我們需要注意間距問題 1.對於併排放置的兩個內聯元素，中間外邊距不會重疊。所以最終兩個元素中間相差兩個外邊距之和。2.對於上下放置的...