驚呆！原來position和float還可以這樣！
前幾天有小伙伴在后臺問橘子，初學前端不怎么理解float和position，所以今天就仔細講一講關于元素的浮動和定位，
一：Float
怎么看待一個新的事物？當然是站在巨人的肩膀上！
MDN檔案中這樣定義Float：
CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和行內元素環繞它，該元素從網頁的正常流動(檔案流)中移除，盡管仍然保持部分的流動性（與絕對定位相反），
float的常用屬性一般有三個：left、right、none，
接下來咱們每個細化：
解釋：float：left；
表明元素必須浮動在其所在的塊容器左側的關鍵字，也就是說：被添加浮動的元素向左浮動，
解釋：float：right；
表明元素必須浮動在其所在的塊容器右側的關鍵字，也就是說：被添加浮動的元素向右浮動，
解釋：float：none；
表明元素不進行浮動的關鍵字，也就是說：此元素未被加入浮動，
由上可以總結出關于浮動的特性：
（1）浮動的元素會脫離標準流
脫離標準流的控制移動到指定位置浮動的盒子不會保留原先的位置（可以看到左浮動的時候文字是被填充到window視窗的最右側，但是當盒子右浮動的時候文字是被填充到window視窗的最左側）
（2）浮動的元素會在一行顯示
如圖：如果多個盒子同時添加浮動則盒子會按照屬性值在一行內顯示并且頂端對齊排列
（3）添加浮動的元素會具有行內塊的特點（行內塊：在一行內可以顯示多個塊級元素）
如圖：因為span是行內元素，所以直接設定span的寬高是無效的，但是通過對span添加浮動之后是可以進行直接設定其寬高，
橘子覺得最好的編程老師就是鍵盤，心動不如行動！快去撰寫吧！
二：Position
MDN檔案這樣定義position：
CSS position屬性用于指定一個元素在檔案中的定位方式，
它的常用屬性一般有四個：static、relative、absolute、fixed；
接下來咱們每個細化：
解釋：position：static；（靜態定位）
所謂靜態定位就是按照標準流特性擺放位置，它沒有邊偏移（top、bottom、left、right），也就是說此時 top, right, bottom, left 和 z-index 屬性無效！所以說這種定位方式在布局時很少用到；
解釋：position：relative；（相對定位）
相對定位就是在元素移動位置的時候，是相對于它原來的位置來說的，相對定位是以原來的位置來移動的（移動位置的時候參照點是自己原來的位置）；
需要注意的是：使用了絕對定位到盒子，還是會繼續占有原來的位置，（顧名思義就是，即使添加了相對定位的盒子離開原來的位置，它原來所占有的地方其它元素還是不可以占有）
解釋：position：absolute；（絕對定位）
絕對定位就是相對于父元素移動的
**注意: **
（1）如果父元素沒有定位就會以瀏覽器為準！
（2）如果父級元素添加了相對定位、固定定位中的其中一種，那么添加絕對定位的子元素會以添加定位的父級元素為移動基準！
（3）添加了絕對定位的盒子會脫離標準流！
解釋：position：fixed；（固定定位）
固定定位是元素固定于瀏覽器可視區的位置，顧名思義，也就是用戶的螢屏位置，（一般的運用場景是，在用戶滑動頁面時，被添加固定定位的元素在網頁左右兩側位置不變，沒錯！就是廣告經常用的！
那么實際開發中如何運用定位呢？
通常的運用方式是：相對定位+相對定位通過對父級元素添加相對定位，這樣子元素在添加固定定位的時候就會在父盒子里自由移動了！
我是橘子，一個高達帥氣的程式員！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/231012.html
標籤：其他