css定位機制
文件流：元素按照在html中的位置決定排布的過程
塊級元素是從上到下的，內聯元素是從左到右的
浮動
position布局
cssposition屬性用於指定乙個元素在文件中的定位方式。top，right，bottom，left屬性則決定了該元素的最終位置。
屬性值描述
static
預設。靜態定位， 指定元素使用正常的布局行為，即元素在文件常規流中當前的布局位置。此時top,right,bottom,left和z-index屬性無效。
relative
相對定位。 元素先放置在未新增定位時的位置，在不改變頁面布局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）
absolute
絕對定位。不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設定外邊距（margins），且不會與其他邊距合併
fixed
固定定位。 不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變
relative
1.不脫離文件流
參考點
以原來的位置作為參考點，可以進行top,left,right,bottom進行位移
注意
由於相對的位置是原來的位置，座標軸為第4象限，y軸是相反的
absolute
1.脫離文件流
2.層級提高
參考點
父標籤的位置
static：
無特殊定位，物件遵循正常文件流。top，right，bottom，left等屬性不會被應用。
相對於最近的非static祖先元素定位，如果沒有非static祖先元素，那麼以頁面左上角進行定位子絕父相
fixed
1.脫離文件流
參考點
html左上角為參考點
z-index
z-index只應用在定位的元素，預設z-index:auto;
z-index取值為整數，數值越大，它的層級越高
如果元素設定了定位，沒有設定z-index，那麼誰寫在最後面的，表示誰的層級越高。
從父現象。通常布局方案我們採用子絕父相，比較的是父元素的z-index值，哪個父元素的z-index值越大，表示子元素的層級越高。
加浮動的元素，會脫離文件流，會在父容器中靠左或者靠右顯示，如果之前有浮動元素，就會挨著浮動的元素排列，如果父容器空間不足，他會自行調整浮動：css樣式表中用float來表示
屬性值描述
none
表示不浮動，所有之前講解的html標籤預設不浮動
left
左浮動right
右浮動inherit
繼承父元素的浮動屬性
float注意點
1.只會影響後面的元素
2.內容預設提公升半層，為1.5層，文件流的層為1，但是文字的層級為1.5，所以會出現文字環繞的現象
3.浮動元素的寬度是內容決定的
4.換行排列，父容器一行裝不下了，會到下一行（這其中有很多不同的規則，注意下）
5.主要是給塊級元素新增的，但是也可以給內聯元素新增
常見作用
浮動實現布局
文字環繞
父盒子高度塌陷
父盒子的高度不能由浮動元素撐起來
清除浮動的方式
上下排序（上級元素浮動，對後面無影響）
clear屬性：表示清除浮動，left、right、both
巢狀排列（子浮動元素，如何把父元素撐起來）
overflow：hidden（bfc規範），如果子元素想溢位，那麼會受到影響
偽元素清除法
#a:after屬性值描述
visible
預設值。內容不會被修剪，會呈現在元素框之外
hidden
內容會被修剪，並且其餘內容不可見
scroll
內容會被修剪，瀏覽器會顯示滾動條以便檢視其餘內容
auto
由瀏覽器定奪，如果內容被修剪，就會顯示滾動條
inherit
規定從父元素繼承overflow屬性的值
block formtting context
bfc區域一條規則:計算bfc（塊級盒子）的高度時，浮動元素也參與計算
bfc布局規則
1.內部的box會在垂直方向，乙個接乙個地放置。
2.box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。4.bfc的區域不會與float 元素重疊。
5.bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6.計算bfc的高度時，浮動元素也參與計算
bfc產生條件
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
布局行內元素水平居中
text-align:center
line-height:盒子高度
display:table-cell 轉為單元格
vertical-align:middle
position:absolute
margin:auto
left:0
right:0
top:0
bottom:0
display:table-cell
vertical-align:middle
text-align:center
display:inline-blockposition:absolution
top:50%
left:50%
margin-left:-50px
margin-top:-50px
CSS 定位和浮動
css 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也...
CSS 定位和浮動
css 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也...
CSS定位和浮動
基本思想 允許定義元素框相對於其正常位置應該出現的位置,或者相對于父元素,另乙個元素和瀏覽器視窗的本身.一切皆為框 元素分為塊級元素和行級元素兩種 可以使用display屬性改變框的型別 display屬性值 詳解block 可以讓行元素表現得像塊級元素一樣 none 生成的元素沒有框,該框的內容不...