CSS定位有哪幾類

這篇文章主要為大家展示了“CSS定位有哪幾類”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS定位有哪幾類”這篇文章吧。

一、什么是定位

改變?cè)卦陧?yè)面中的位置

二、定位的分類

1、普通流定位

2、浮動(dòng)定位

3、相對(duì)定位

4、絕對(duì)定位

5、固定定位

三、普通流定位

頁(yè)面中元素的默認(rèn)定位方式，默認(rèn)文檔流，從上往下，從左往右

1、每個(gè)元素都在頁(yè)面有自己的空間

2、每個(gè)元素都是從父元素的左上角開始顯示

3、塊級(jí)元素都是按照從上到下的方式逐行排列，每個(gè)元素獨(dú)占一行

4、行內(nèi)元素是多個(gè)元素在一行顯示，從左往右逐個(gè)排列

四、浮動(dòng)定位

1、當(dāng)元素設(shè)置浮動(dòng)后，該元素脫離默認(rèn)文檔流，后面的元素會(huì)上前補(bǔ)位。當(dāng)前元素會(huì)在當(dāng)前行，向左或者向右排列

float：left、right、none

特點(diǎn)：

（1）、元素一旦浮動(dòng)，就脫離文檔流了，不占據(jù)頁(yè)面空間，后面會(huì)上前補(bǔ)位

（2）、浮動(dòng)元素會(huì)停靠在父元素的左邊/右邊，或者其他已經(jīng)浮動(dòng)元素邊緣

（3）、浮動(dòng)就是解決多個(gè)塊級(jí)元素在一行顯示的問題

2、浮動(dòng)引發(fā)的特殊情況

a、（1）當(dāng)父元素顯示不下所有已浮動(dòng)元素的時(shí)候，顯示不下的幾個(gè)將換行顯示，換行顯示的規(guī)則：優(yōu)先上浮，之后向左/右對(duì)齊

（2）浮動(dòng)元素占位，浮動(dòng)元素會(huì)根據(jù)浮動(dòng)方向，占據(jù)方向上的位置，不讓其他后面浮動(dòng)元素占用

b、元素一旦浮動(dòng)，如果沒有定義寬度，寬度會(huì)以內(nèi)容為準(zhǔn)

c、元素一旦浮動(dòng)起來，就變成了塊級(jí)元素，可以設(shè)置寬高，可以設(shè)置上下外邊距

d、文本，行內(nèi)元素，行內(nèi)塊元素是不會(huì)被浮動(dòng)元素壓在下方。而是巧妙的避開了所有浮動(dòng)元素，圍繞者浮動(dòng)元素顯示

e、清除浮動(dòng)：元素一旦浮動(dòng)起來會(huì)對(duì)后續(xù)元素帶來一定影響（后續(xù)元素會(huì)上前補(bǔ)位），如果后續(xù)元素不想上前補(bǔ)位，那么給后續(xù)元素設(shè)置clear，清除前面浮動(dòng)元素帶來的影響

clear：left/right/both

f、高度坍塌，塊級(jí)元素的高度如果不設(shè)置，高度以內(nèi)部元素內(nèi)容為準(zhǔn)，但是如果內(nèi)部元素都是浮動(dòng)元素，浮動(dòng)元素不占據(jù)頁(yè)面空間，父元素的高沒有了

解決方案：

    1、直接為父元素設(shè)置高度，弊端：不知到父元素高度

    2、父元素也浮動(dòng)，弊端：浮動(dòng)會(huì)影響后續(xù)元素

    3、overflow：hidden，弊端：當(dāng)元素真的需要顯示溢出內(nèi)容時(shí)，就顯示不出來了

    4、在父元素中追加一個(gè)空的塊級(jí)元素，并設(shè)置clear：both

3、顯示

1、顯示方式

display

元素在頁(yè)面中的顯示表現(xiàn)形式（塊級(jí)，行內(nèi)，行內(nèi)塊）

取值：

（1）none：隱藏，不顯示元素，不占據(jù)位置

（2）block：讓元素的表現(xiàn)形式和塊級(jí)元素一樣，特點(diǎn)：獨(dú)占一行，可以設(shè)置寬高，垂直外邊距

（3）inline：讓元素和行內(nèi)元素一樣，特點(diǎn)：多個(gè)元素公用一行，不能設(shè)置寬高和垂直外邊距

（4）inline-block：讓元素的表現(xiàn)形式和行內(nèi)塊一樣，特點(diǎn)：多個(gè)元素在一行中顯示，但是可以設(shè)置寬高和垂直外邊距

（5）table：讓元素的表現(xiàn)形式和table一樣，特點(diǎn)：尺寸以內(nèi)容為準(zhǔn)，每個(gè)元素獨(dú)占一行，允許修改尺寸

2、顯示效果

visibility

取值

visible：默認(rèn)可見

hidden：隱藏

display：none和visibility：hidden的區(qū)別  ：display隱藏，脫離文檔流，不占據(jù)頁(yè)面空間，visibility不脫離文檔流，占據(jù)頁(yè)面空間

3、透明度

opacity

取值：0～1 越小越透明

opacity和rgba的區(qū)別：opacity作用于元素，只要跟元素相關(guān)的顏色都會(huì)跟著透明，可以作用到子元素，rgba只改變當(dāng)前元素的透明度，不會(huì)影響其他元素

4、垂直對(duì)齊方式

vertical-align

取值：top/middle/bottom

使用場(chǎng)合：

（1）table標(biāo)簽中，控制文字的垂直對(duì)齊，取值：top/middle/bottom

（2）img標(biāo)簽，控制圖片與前后文字的垂直對(duì)齊方式,取值：top/middle/bottom/baseline

5、光標(biāo)

cursor：

取值：

（1）default：箭頭

（2）pointer：手

（3）text：I

（4）crosshair：十字

（5）wait：沙漏或者轉(zhuǎn)圈

（6）help：?jiǎn)柼?hào)

五、定位

1、定位的屬性

position：

取值：

（1）static： 默認(rèn)值，靜態(tài)，默認(rèn)文檔流

（2）relative：相對(duì)定位

（3）absolute:絕對(duì)定位

（4）fixed：固定定位

    專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

元素的position設(shè)置為relative/absolute/fixed中任意一個(gè)值，該元素被稱為已定位元素

偏移屬性

top/bottom/right/left

left：100px   向由移100px

2、相對(duì)定位

元素相對(duì)于原來的位置偏移某個(gè)距離，沒有脫離默認(rèn)文檔流，頁(yè)面上的位置不會(huì)被其他元素補(bǔ)位

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

使用場(chǎng)合：作為絕對(duì)定位的祖先元素

（1）位置微調(diào)

3、絕對(duì)定位

絕對(duì)定位的元素會(huì)脫離默認(rèn)文檔流，后面元素會(huì)向前補(bǔ)位，絕對(duì)定位的元素會(huì)相對(duì)于離他最近的已定位的祖先元素去實(shí)現(xiàn)定位，如果所有祖先元素不是已經(jīng)定位元素，相對(duì)于body去實(shí)現(xiàn)定位

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

使用場(chǎng)合：有層疊效果時(shí)

4、固定定位

將元素固定在頁(yè)面的某一個(gè)位置，元素不會(huì)隨滾動(dòng)條發(fā)生位置變化，一直固定在可是區(qū)域內(nèi)

語法：

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

注意：

（1）固定定位脫離文檔流，不占頁(yè)面空間

（2）固定定位元素變?yōu)閴K級(jí)元素

（3）相對(duì)于body實(shí)現(xiàn)位置的偏移

堆疊順序

元素變?yōu)橐讯ㄎ辉?，有可能出現(xiàn)堆疊，想修改堆疊順序

z-index

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

以上是“CSS定位有哪幾類”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！