定位體系概述

定位體系

1.視覺格式化模型

• 視覺格式化模型css的一種機制，規定了頁面中的多個盒子如何布局

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

  1、正常流 （normal flow） 2、浮動（float） 3、絕對定位（absolute positioned）

• 包含塊：containing block 每個元素都有一個包含塊，指元素在頁面中擺放的區域，通常情況下，元素的包含塊是它父元素的内容盒。

   注：當定位體系發生變化時，就不一定是父元素了;html的包含塊是初始化包含塊（initial containing block）

• 元素在包含塊中的尺寸和位置，主要受以下影響：1元素的盒模型 2 元素的定位體系

2.定位體系

2.1正常流：

又叫，文檔流，普通文檔流，正常文檔流；所有元素，預設屬于正常流布局；總體規則：塊盒獨占一行，行盒水準依次排列

1.正常流塊盒在水準方向上，内容撐滿包含塊

2正常流塊盒在垂直方向上，正常流塊盒由上而下依次擺放

3正常流塊盒兩個相鄰的會産生外邊距合并

2.2浮動：

當float屬性取值為left或right時，屬于浮動定位；float 取值：none（預設值) left right (不浮動 左浮動 右浮動)

盒子位置：左浮動向上向左排列 右浮動的盒子向上向右排列 浮動盒子的頂邊不得高于上一個盒子的定邊

注：浮動的初衷是為了文字環繞，子級浮動會導緻父級元素高度塌陷

清除浮動：1.給父元素添添加overflow hidden ；2.給最後一個正常流塊盒下加clear：both。

正常流遇上浮動：

正常流盒子和浮動盒子的混合擺放

1.浮動盒子在擺放時，要避開正常流盒子

2.正常流盒子在擺放時，無視浮動盒子（脫離文檔流）

3.正常流盒子的自動高度計算時，無視浮動盒子-高度塌陷

2.3絕對定位

取值：position static 為預設值  position(absolute positioned)

1.當浮動元素被設定為絕對定位，屬于絕對定位，float屬性被強制設定為none

2.絕對定位元素對其他任何元素的影響：

絕對定位元素不會對其他任何元素造成任何影響

3.絕對定位元素的位置：可通過left top right bottom來确定

position(fixed）固定位置：

包含塊：視口 ；偏移量的設定（移動），元素的起始位置為視口的左上角

适用場景：pc:頁面頭部 移動端：footer；以下五個情況的元素，推薦為：aside 1.廣告2.側邊欄3.目錄4.回到頂部5.即時通訊

position(absolute）絕對位置：

包含塊：包含我并離我最近且position值不等于static的元素

适用場景：兩個及以上的标簽需要重疊在一起的時候

3.定位體系的判定

step1：判定元素的position屬性值是不是absolute（絕對位置），fixed（固定位置）；如果是其中某一個，目前元素就屬于絕對定位

注：position預設值static；當取值不是兩個時，才執行第二步

step2：判定元素的float屬性值是不是以下取值：left（左浮動），right（右浮動），如果是其中某一個取值，則目前元素就屬于浮動定位

注：float預設值none;預設情況下，元素為正常流定位；第一步滿足了不看後面