web前端入門到實戰：CSS定位

1、什麼是定位

改變元素在頁面中的位置

2、定位的分類

一、普通流定位

二、浮動定位

三、相對定位

四、絕對定位

五、固定定位

3、普通流定位

頁面中元素的默認定位方式，默認文檔流，從上往下，從左往右

一、每一個元素都在頁面有本身的空間

二、每一個元素都是從父元素的左上角開始顯示

三、塊級元素都是按照從上到下的方式逐行排列，每一個元素獨佔一行

四、行內元素是多個元素在一行顯示，從左往右逐個排列

4、浮動定位

一、當元素設置浮動後，該元素脫離默認文檔流，後面的元素會上前補位。當前元素會在當前行，向左或者向右排列

float：left、right、none

特色：

（1）、元素一旦浮動，就脫離文檔流了，不佔據頁面空間，後面會上前補位

（2）、浮動元素會停靠在父元素的左邊/右邊，或者其餘已經浮動元素邊緣

（3）、浮動就是解決多個塊級元素在一行顯示的問題

二、浮動引起的特殊狀況

a、（1）當父元素顯示不下全部已浮動元素的時候，顯示不下的幾個將換行顯示，換行顯示的規則：優先上浮，以後向左/右對齊

（2）浮動元素佔位，浮動元素會根據浮動方向，佔據方向上的位置，不讓其餘後面浮動元素佔用

b、元素一旦浮動，若是沒有定義寬度，寬度會之內容爲準

c、元素一旦浮動起來，就變成了塊級元素，能夠設置寬高，能夠設置上下外邊距

d、文本，行內元素，行內塊元素是不會被浮動元素壓在下方。而是巧妙的避開了全部浮動元素，圍繞者浮動元素顯示

e、清除浮動：元素一旦浮動起來會對後續元素帶來必定影響（後續元素會上前補位），若是後續元素不想上前補位，那麼給後續元素設置clear，清除前面浮動元素帶來的影響

clear：left/right/both

f、高度坍塌，塊級元素的高度若是不設置，高度之內部元素內容爲準，可是若是內部元素都是浮動元素，浮動元素不佔據頁面空間，父元素的高沒有了

解決方案：

    一、直接爲父元素設置高度，弊端：不知到父元素高度

    二、父元素也浮動，弊端：浮動會影響後續元素

    三、overflow：hidden，弊端：當元素真的須要顯示溢出內容時，就顯示不出來了

    四、在父元素中追加一個空的塊級元素，並設置clear：both

三、顯示

一、顯示方式

display

元素在頁面中的顯示錶現形式（塊級，行內，行內塊）

取值：

（1）none：隱藏，不顯示元素，不佔據位置

（2）block：讓元素的表現形式和塊級元素同樣，特色：獨佔一行，能夠設置寬高，垂直外邊距

（3）inline：讓元素和行內元素同樣，特色：多個元素公用一行，不能設置寬高和垂直外邊距

（4）inline-block：讓元素的表現形式和行內塊同樣，特色：多個元素在一行中顯示，可是能夠設置寬高和垂直外邊距

（5）table：讓元素的表現形式和table同樣，特色：尺寸之內容爲準，每一個元素獨佔一行，容許修改尺寸

二、顯示效果

visibility

取值

visible：默承認見

hidden：隱藏

display：none和visibility：hidden的區別 ：display隱藏，脫離文檔流，不佔據頁面空間，visibility不脫離文檔流，佔據頁面空間

三、透明度

opacity

取值：0～1 越小越透明

opacity和rgba的區別：opacity做用於元素，只要跟元素相關的顏色都會跟着透明，能夠做用到子元素，rgba只改變當前元素的透明度，不會影響其餘元素

四、垂直對齊方式

vertical-align

取值：top/middle/bottom

使用場合：

（1）table標籤中，控制文字的垂直對齊，取值：top/middle/bottom

（2）img標籤，控制圖片與先後文字的垂直對齊方式,取值：top/middle/bottom/baseline

五、光標

cursor：

取值：

（1）default：箭頭

（2）pointer：手

（3）text：I

（4）crosshair：十字

（5）wait：沙漏或者轉圈

（6）help：問號

5、定位

一、定位的屬性

position：

取值：

（1）static： 默認值，靜態，默認文檔流

（2）relative：相對定位

（3）absolute:絕對定位

（4）fixed：固定定位

    專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

元素的position設置爲relative/absolute/fixed中任意一個值，該元素被稱爲已定位元素

偏移屬性

top/bottom/right/left

left：100px 向由移100px

二、相對定位

元素相對於原來的位置偏移某個距離，沒有脫離默認文檔流，頁面上的位置不會被其餘元素補位

語法：position：relative；必須配合偏移屬性使用

使用場合：做爲絕對定位的祖先元素

（1）位置微調

三、絕對定位

絕對定位的元素會脫離默認文檔流，後面元素會向前補位，絕對定位的元素會相對於離他最近的已定位的祖先元素去實現定位，若是全部祖先元素不是已經定位元素，相對於body去實現定位

屬性：position：absolute；配合偏移屬性使用

使用場合：有層疊效果時

四、固定定位

將元素固定在頁面的某一個位置，元素不會隨滾動條發生位置變化，一直固定在但是區域內

語法：

position：fixes；配合偏移屬性使用

注意：

（1）固定定位脫離文檔流，不佔頁面空間

（2）固定定位元素變爲塊級元素

（3）相對於body實現位置的偏移

堆疊順序

元素變爲已定位元素，有可能出現堆疊，想修改堆疊順序

z-index

取值：無單位的數字，數字越大，元素越靠上顯示，父子元素間z-index無效，永遠都是子元素在父元素上面，只有已定位元素才能使用z-index