CSS 中可繼承與不可繼承屬性有哪些

可繼承：

字體系列 font-family font-weight font-size

文本系列 color text-align line-height

可見系列 如 visibility

由於屬性太多，這裡只列舉常見的可繼承的屬性

display 的屬性值及其作用

display 的 block、inline 和 inline-block 的區別

block： 會獨佔一行，可以設定 width、height、margin 和 padding 屬性；

inline： 元素不會獨佔一行，設定 width、height 屬性無效。但可以設定水平方向的 margin 和 padding 屬性，不能設定垂直方向的 padding 和 margin；

inline-block：

隱藏元素的方法有哪些

display: none: 渲染樹不會渲染物件
visibility: hidden: 元素在頁面中仍佔據空間，但是不會響應繫結的監聽事件。
opacity: 0: 元素在頁面中仍然佔據空間，並且能夠響應元素繫結的監聽事件。
position: absolute: 通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。
z-index: 負值:來使其他元素遮蓋住該元素，以此來實現隱藏。
clip/clip-path: 元素仍在頁面中佔據位置，但是不會響應繫結的監聽事件。

link 和@import 的區別

兩者都是外部引用 CSS 的方式，它們的區別如下：

link 是 XHTML 標籤，除了載入 CSS 外，還可以定義 RSS 等其他事務； @import 只能載入 CSS。
link 引用 CSS 時，在頁面載入時同時載入； @import 需要頁面網頁完全載入以後載入。
link 是 XHTML 標籤，無相容問題； @import 是在 CSS2.1 提出的，低版本的瀏覽器不支援。
link 支援使用 Javascript 控制 DOM 去改變樣式； @import 不支援。

transition 和 animation 的區別

transition 是過度屬性，強調過度，它的實現需要觸發一個事件（比如滑鼠移動上去，焦點，點選等）才執行動畫。它類似於 flash 的補間動畫，設定一個開始關鍵幀，一個結束關鍵幀。

animation 是動畫屬性，它的實現不需要觸發事件，設定好時間之後可以自己執行，且可以迴圈一個動畫。它也類似於 flash 的補間動畫，但是它可以設定多個關鍵幀（用@keyframe 定義）完成動畫。

display:none 與 visibility:hidden 的區別

這兩個屬性都是讓元素隱藏，不可見。兩者區別如下：

1. 在渲染樹中

• display:none 不渲染元素
• sibility:hidden渲染元素，只是不可見

2. 是否是繼承屬性

• display:none 是非繼承屬性，子孫節點會隨著父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示；
• visibility:hidden 是繼承屬性，子孫節點消失是由於繼承了hidden，通過設定visibility:visible可以讓子孫節點顯示；

3. 重排與重繪

• display:none 修改此屬性，會導致整個文件重排
• visibility:hidden 修改此屬性，只會導致當前元素重繪

偽元素和偽類的區別和作用？

偽元素： 在內容元素的前後插入額外的元素或樣式，但是這些元素實際上並不在文件中生成。它們只在外部顯示可見，但不會在文件的原始碼中找到它們，因此，稱為“偽”元素。例如：

p::before {content: "第一章：";}p::after {content: "Hot!";}p::first-line {background: red;}p::first-letter {font-size: 30px;}複製程式碼

偽類： 將特殊的效果新增到特定選擇器上。它是已有元素上新增類別的，不會產生新的元素。例如：

a:hover {color: #FF00FF}p:first-child {color: red}複製程式碼

對盒模型的理解

CSS3 中的盒模型有以下兩種：標準盒模型、IE 盒模型

盒模型是由四個部分組成的，分別是 margin、border、padding 和 content。

標準盒模型和 IE 盒模型的區別在於設定 width 和 height 時，所對應的範圍不同：
標準盒模型的 width 和 height 屬性的範圍只包含了 content，
IE 盒模型的 width 和 height 屬性的範圍包含了 border、padding 和 content。

可以通過修改元素的 box-sizing 屬性來改變元素的盒模型：
box-sizing: content-box表示標準盒模型（預設值）
box-sizing: border-box表示 IE 盒模型（怪異盒模型）

為什麼有時候⽤translate來改變位置⽽不是定位？

translate 不會觸發瀏覽器重排和重繪,只會觸發複合, 利用GPU效率高
絕對定位會導致重排, 進而觸發重繪, 利用CPU效率低

li 與 li 之間有看不見的空白間隔是什麼原因引起的？如何解決？

瀏覽器會把 inline 內聯元素間的空白字元（空格、換行、Tab 等）渲染成一個空格。為了美觀，通常是一個<li>放在一行，這導致<li>換行後產生換行字元，它變成一個空格，佔用了一個字元的寬度。

解決辦法：

• 為<li>設定 float:left。不足：有些容器是不能設定浮動，如左右切換的焦點圖等。
• 將所有<li>寫在同一行。不足：程式碼不美觀。
• 將<ul>內的字元尺寸直接設為 0，即 font-size:0。不足：<ul>中的其他字元尺寸也被設為 0，需要額外重新設定其他字元尺寸，且在 Safari 瀏覽器依然會出現空白間隔。
• 消除<ul>的字元間隔 letter-spacing:-8px，不足：這也設定了<li>內的字元間隔，因此需要將<li>內的字元間隔設為預設 letter-spacing:normal。

CSS3 中有哪些新特性

1. 新增各種 CSS 選擇器 nth not
2. 圓角 border-radius
3. 旋轉 transform
4. 陰影 ext-shadow
5. 其他
6. GIF 動圖
7. JPEG 有損色彩豐富，適合儲存照片, 檔案較大。
8. PNG 無損，體積小，支援透明度
9. SVG 放大不失真，適合 logo icon
10. BMP 無損, 不壓縮, 檔案較大。
11. WebP 谷歌新出的圖片格式, 體積比 png 更小, 相容性不好。

常見的圖片格式及使用場景

對 CSS Sprites 的理解

CSS Sprites（精靈圖），將一個頁面涉及到的所有圖片都包含到一張大圖中去，然後利用 CSS 的 background-image，background-repeat，background-position 屬性的組合進行背景定位。

優點：

• 利用 CSS Sprites 能很好地減少網頁的 http 請求，從而大大提高了頁面的效能，這是 CSS Sprites 最大的優點；
• CSS Sprites 能減少圖片的位元組，把 3 張圖片合併成 1 張圖片的位元組總是小於這 3 張圖片的位元組總和。

缺點：

• 在圖片合併時，要把多張圖片有序的、合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景。在寬屏及高解析度下的自適應頁面，如果背景不夠寬，很容易出現背景斷裂；
• CSS Sprites 在開發的時候相對來說有點麻煩，需要藉助photoshop或其他工具來對每個背景單元測量其準確的位置。
• 維護方面：CSS Sprites 在維護的時候比較麻煩，頁面背景有少許改動時，就要改這張合併的圖片，無需改的地方儘量不要動，這樣避免改動更多的CSS，

什麼是物理畫素，邏輯畫素和畫素密度，為什麼在移動端開發時需要用到@3x, @2x 這種圖片？

以 iPhone XS 為例，當寫 CSS 程式碼時，針對於單位 px，其寬度為 414px & 896px，也就是說當賦予一個 div 元素寬度為 414px，這個 div 就會填滿手機的寬度；

而如果有一把尺子來實際測量這部手機的物理畫素，實際為 1242*2688 物理畫素；經過計算可知，1242/414=3，也就是說，在單邊上，一個邏輯畫素 = 3 個物理畫素，就說這個螢幕的畫素密度為 3，也就是常說的 3 倍屏。

對於圖片來說，為了保證其不失真，1 個圖片畫素至少要對應一個物理畫素，假如原始圖片是 500*300 畫素，那麼在 3 倍屏上就要放一個 1500*900 畫素的圖片才能保證 1 個物理畫素至少對應一個圖片畫素，才能不失真。

當然，也可以針對所有螢幕，都只提供最高清圖片。雖然低密度螢幕用不到那麼多圖片畫素，而且會因為下載多餘的畫素造成頻寬浪費和下載延遲，但從結果上說能保證圖片在所有螢幕上都不會失真。

還可以使用 CSS 媒體查詢來判斷不同的畫素密度，從而選擇不同的圖片:

my-image { background: (low.png); }@media only screen and (min-device-pixel-ratio: 1.5) {

  #my-image { background: (high.png); }

}複製程式碼

CSS 優化和提高效能的方法有哪些？

載入效能：

• css 壓縮, 減小檔案體積。
• css 單一樣式 margin-bottom:bottom； margin-left:left；比 margin:top 0 bottom 0；執行效率高。
• 減少使用 @import，建議使用 link，因為 link 在頁面載入時一起載入，import 是頁面載入完成之後再載入。

選擇器效能：

• 關鍵選擇器, 減少層級, 最高不超過3層
• 儘量使用 class, 避免使用html標籤選擇
• 少使用後代選擇器, 後代選擇器開銷高
• 避免對可繼承的屬性重複定義
• 避免使用通配規則, 只對需要的元素進行處理`

渲染效能：

• 慎重使用高效能屬性：浮動、定位。
• 儘量減少頁面重排、重繪。
• 屬性值為 0 時，不加單位。
• 屬性值為浮動小數 0.**，可以省略小數點之前的 0。
• 不使用 @import 字首，它會影響 css 的載入速度。

可維護性：

• 抽離 css, 提高可複用性。
• 樣式與內容分離, 提高可維護性。

CSS 前處理器/後處理器是什麼？為什麼要使用它們？

前處理器， 如：less，sass，用來預編譯 sass或者less，增加了 css 程式碼的複用性。層級，迴圈， 變數，迴圈等功能對UI元件更易開發與維護。

後處理器， 如： PostCSS，通常是在完成的樣式表中根據 CSS 規範處理 CSS有效。最常做的是新增瀏覽器私有字首，解決跨瀏覽器相容性的問題。

使用原因：

1. 結構清晰， 便於擴充套件
2. 可以很方便的遮蔽瀏覽器私有語法的差異
3. 完美的相容了 CSS 程式碼，可以應用到老專案中
4. 可以輕鬆實現多重繼承

inline-block 什麼時候會顯示間隙？

主要有以下三種情形:

• 有空格時會有間隙，可以刪除空格解決；
• margin 正值時，可以讓 margin 使用負值解決；
• 使用 font-size 時，可通過設定 font-size:0、letter-spacing、word-spacing 解決；

單行、多行文字溢位隱藏

單行文字溢位

overflow: hidden;            // 溢位隱藏text-overflow: ellipsis;      // 溢位用省略號顯示white-space: nowrap;         // 規定段落中的文字不進行換行複製程式碼

多行文字溢位

overflow: hidden;            // 溢位隱藏text-overflow: ellipsis;     // 溢位用省略號顯示display: -webkit-box;         // 作為彈性伸縮盒子模型顯示。

-webkit-box-orient: vertical; // 設定伸縮盒子的子元素排列方式：從上到下垂直排列

-webkit-line-clamp: 3;        // 顯示的行數複製程式碼

對媒體查詢的理解？

<!-- link元素中的CSS媒體查詢 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 樣式表中的CSS媒體查詢 --><style>@media (max-width: 600px) {

  .facet_sidebar {

    display: none;

  }

}</style>複製程式碼

簡單來說，@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是需要設定設計響應式的頁面。

對 CSS 工程化的理解

CSS 工程化是為了解決以下問題：
巨集觀設計： CSS 程式碼如何組織、如何拆分、模組結構怎樣設計？
編碼優化： 怎樣寫出更好的 CSS ？
構建： 如何處理我的 CSS，才能讓它的打包結果最優？
可維護性： 容易變更, 容易接手

以下三個方向都是時下比較流行的、普適性非常好的 CSS 工程化實踐：
前處理器： Less、 Sass 等；
後處理器： PostCSS
Webpack loader 等 。

如何用 Webpack 實現對 CSS 的處理：
css-loader： 匯入 CSS 模組，對 CSS 程式碼進行編譯處理；
style-loader： 建立 style 標籤，把 CSS 內容寫入標籤。

在實際使用中，css-loader 的執行順序一定要安排在 style-loader 的前面。因為只有完成了編譯過程，才可以對 css 程式碼進行插入；若提前插入了未編譯的程式碼，那麼 webpack 是無法理解這坨東西的，它會無情報錯。

如何判斷元素是否到達可視區域

以圖片顯示為例：

• window.innerHeight 是瀏覽器可視區的高度；
• document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動的過的距離；
• imgs.offsetTop 是元素頂部距離文件頂部的高度（包括滾動條的距離）；
• 內容達到顯示區域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

z-index 屬性在什麼情況下會失效

通常 z-index 的使用是在有兩個重疊的標籤，z-index 值越大就越是在上層。z-index 元素的 position 屬性需要是 relative，absolute 或是 fixed。

z-index 屬性在下列情況下會失效：

• 父元素 position 為 relative 時，子元素的 z-index 失效。解決：父元素 position 改為 absolute 或 static；
• 元素沒有設定 position 屬性為非 static 屬性。解決：設定該元素的 position 屬性為 relative，absolute 或是 fixed；
• 元素在設定 z-index 的同時還設定了 float 浮動。解決：去除 float，改為 display：inline-block；
• translate 位移
• rotate 旋轉
• scale 縮放
• skew 斜切

CSS3 中的 transform 有哪些屬性

常見的 CSS 佈局單位

畫素px 基本佈局單位
百分比% ，相對於父元素的百分比，從而實現響應式的效果。
em 相對於父元素的文字的倍數。如果父元素未設定 font-size，則相對於瀏覽器的預設字型尺寸(預設 16px)。
rem 相對於根元素 font-size 的倍數。作用：利用 rem 可以實現簡單的響應式佈局，可以利用 html 元素中字型的大小與螢幕間的比值來設定 font-size 的值，以此實現當螢幕解析度變化時讓元素也隨之變化。

vw： 相對於視窗的寬度，視窗寬度是 100vw；
vh： 相對於視窗的高度，視窗高度是 100vh；
vmin： vw 和 vh 中的較小值；
vmax： vw 和 vh 中的較大值；

vw 和百分比的區別是: vw 相對於視窗, % 相對於父元素

px、em、rem 的區別及使用場景

三者的區別：

• px 是固定的畫素，一旦設定了就無法因為適應頁面大小而改變。
• em 和 rem 相對於 px 更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用於響應式佈局。
• em 是相對於其父元素來設定字型大小，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小。而 rem 是相對於根元素，這樣就意味著，只需要在根元素確定一個參考值。

使用場景：

• 對於只需要適配少部分移動裝置，且解析度對頁面影響不大的，使用 px 即可 。
• 對於需要適配各種移動裝置，使用 rem，例如需要適配 iPhone 和 iPad 等解析度差別比較挺大的裝置。

如何根據設計稿進行移動端適配？

移動端適配主要有兩個維度：

適配不同畫素密度，針對不同的畫素密度，使用 CSS 媒體查詢，選擇不同精度的圖片，以保證圖片不會失真；
適配不同螢幕大小，由於不同的螢幕有著不同的邏輯畫素大小，所以如果直接使用 px 單位，會使得開發的頁面在某一款手機上可以準確顯示，但是在另一款手機上就會失真。為了適配不同螢幕的大小，應按照比例來還原設計稿的內容。

為了能讓頁面的尺寸自適應，可以使用 rem，em，vw，vh 等相對單位。

響應式設計的概念及基本原理

響應式網站是指一個網站能夠相容多個終端。

關於原理： 基本原理是通過媒體查詢（@media）查詢檢測不同的裝置螢幕尺寸做處理。

關於相容： 頁面頭部必須有 meta 宣告的 viewport。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />複製程式碼

為什麼需要清除浮動？清除浮動的方式

浮動的定義： 非 IE 瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。 此時，內容會溢位到容器外面而影響佈局。這種現象被稱為浮動（溢位）。

浮動的工作原理：

• 浮動元素脫離文件流，不佔據空間（引起“高度塌陷”現象）
• 浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

浮動元素可以左右移動，直到遇到另一個浮動元素或者遇到它外邊緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響塊級元素的佈局，只會影響內聯元素佈局。此時文件流中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現“高度塌陷”。

浮動元素引起的問題？

• 父元素的高度無法被撐開，影響與父元素同級的元素
• 與浮動元素同級的非浮動元素會跟隨其後
• 若浮動的元素不是第一個元素，則該元素之前的元素也要浮動，否則會影響頁面的顯示結構

使用 clear 屬性清除浮動的原理？

使用 clear 屬性清除浮動，其語法如下：

clear: none|left|right|both複製程式碼

如果單看字面意思，clear:left 是“清除左浮動”，clear:right 是“清除右浮動”，實際上，這種解釋是有問題的，因為浮動一直還在，並沒有清除。

官方對 clear 屬性解釋：“元素盒子的邊不能和前面的浮動元素相鄰”，對元素設定 clear 屬性是為了避免浮動元素對該元素的影響，而不是清除掉浮動。

還需要注意 clear 屬性指的是元素盒子的邊不能和前面的浮動元素相鄰，注意這裡“前面的”3 個字，也就是 clear 屬性對“後面的”浮動元素是不聞不問的。考慮到 float 屬性要麼是 left，要麼是 right，不可能同時存在，同時由於 clear 屬性對“後面的”浮動元素不聞不問，因此，當 clear:left 有效的時候，clear:right 必定無效，也就是此時 clear:left 等同於設定 clear:both；同樣地，clear:right 如果有效也是等同於設定 clear:both。由此可見，clear:left 和 clear:right 這兩個宣告就沒有任何使用的價值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。

一般使用偽元素的方式清除浮動：

.clear::after{

  content: '';

  display: block;

  clear: both;

}複製程式碼

clear 屬性只有塊級元素才有效的，而::after 等偽元素預設都是內聯水平，這就是藉助偽元素清除浮動影響時需要設定 display 屬性值的原因。

對 BFC 的理解，如何建立 BFC

先來看兩個相關的概念：

• Box: Box 是 CSS 佈局的物件和基本單位，⼀個⻚⾯是由很多個 Box 組成的，這個 Box 就是我們所說的盒模型。
• Formatting context：塊級上下⽂格式化，它是⻚⾯中的⼀塊渲染區域，並且有⼀套渲染規則，它決定了其⼦元素將如何定位，以及和其他元素的關係和相互作⽤。

塊格式化上下文（Block Formatting Context，BFC）是 Web 頁面的視覺化 CSS 渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。

通俗來講：BFC 是一個獨立的佈局環境，可以理解為一個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其它環境中的物品。如果一個元素符合觸發 BFC 的條件，則 BFC 中的元素佈局不受外部影響。

建立 BFC 的條件：

• 根元素：body；
• 元素設定浮動：float 除 none 以外的值；
• 元素設定絕對定位：position (absolute、fixed)；
• display 值為：inline-block、table-cell、table-caption、flex 等；
• overflow 值為：hidden、auto、scroll；

BFC 的特點：

• 垂直方向上，自上而下排列，和文件流的排列方式一致。
• 在 BFC 中上下相鄰的兩個容器的 margin 會重疊
• 計算 BFC 的高度時，需要計算浮動元素的高度
• BFC 區域不會與浮動的容器發生重疊
• BFC 是獨立的容器，容器內部元素不會影響外部元素
• 每個元素的左 margin 值和容器的左 border 相接觸

BFC 的作用：

• 解決 margin 的重疊問題：由於 BFC 是一個獨立的區域，內部的元素和外部的元素互不影響，將兩個元素變為兩個 BFC，就解決了 margin 重疊的問題。
• 解決高度塌陷的問題：在對子元素設定浮動後，父元素會發生高度塌陷，也就是父元素的高度變為 0。解決這個問題，只需要把父元素變成一個 BFC。常用的辦法是給父元素設定overflow:hidden。
• 建立自適應兩欄佈局：可以用來建立自適應兩欄佈局：左邊的寬度固定，右邊的寬度自適應。

<div class="left"></div>

<div class="right"></div>

.left{

     width: 100px;

     height: 200px;

     background: red;

     float: left;

 }

 .right{

     height: 300px;

     background: blue;

     overflow: hidden;

 }複製程式碼

左側設定float:left，右側設定overflow: hidden。這樣右邊就觸發了 BFC，BFC 的區域不會與浮動元素髮生重疊，所以兩側就不會發生重疊，實現了自適應兩欄佈局。

什麼是 margin 重疊問題？如何解決？

問題描述：

兩個塊級元素的上外邊距和下外邊距可能會合並（摺疊）為一個外邊距，其大小會取其中外邊距值大的那個，這種行為就是外邊距摺疊。需要注意的是，浮動的元素和絕對定位這種脫離文件流的元素的外邊距不會摺疊。重疊只會出現在垂直方向。

計算原則：

摺疊合併後外邊距的計算原則如下：

• 如果兩者都是正數，取大者
• 如果是一正一負，取正值減去負值的絕對值
• 兩個都是負值時，取絕對值大者

解決辦法：

對於摺疊的情況，主要有兩種：兄弟之間重疊和父子之間重疊

1. 兄弟之間重疊

• 底部元素變為行內盒子：display: inline-block
• 底部元素設定浮動：float
• 底部元素的 position 的值為absolute/fixed

1. 父子之間重疊

• 父元素加入：overflow: hidden
• 父元素新增透明邊框：border:1px solid transparent
• 子元素變為行內盒子：display: inline-block
• 子元素加入浮動屬性或定位

元素的層疊順序

層疊順序，英文稱作 stacking order，表示元素髮生層疊時有著特定的垂直顯示順序。下面是盒模型的層疊規則：

對於上圖，由上到下分別是：

1. 背景和邊框：建立當前層疊上下文元素的背景和邊框。
2. 負的 z-index：當前層疊上下文中，z-index 屬性值為負的元素。
3. 塊級盒：文件流內非行內級非定位後代元素。
4. 浮動盒：非定位浮動元素。
5. 行內盒：文件流內行內級非定位後代元素。
6. z-index:0：層疊級數為 0 的定位元素。
7. 正 z-index：z-index 屬性值為正的定位元素。

::: tip 提示 當定位元素 z-index:auto，生成盒在當前層疊上下文中的層級為 0，不會建立新的層疊上下文，除非是根元素。 :::

position 的屬性有哪些，區別是什麼

前面三者的定位方式如下：

relative： 元素的定位永遠是相對於元素自身位置的，和其他元素沒關係，也不會影響其他元素。

fixed： 元素的定位是相對於 window （或者 iframe）邊界的，和其他元素沒有關係。但是它具有破壞性，會導致其他元素位置的變化。

absolute： 元素的定位相對於前兩者要複雜許多。如果為 absolute 設定了 top、left，瀏覽器會根據什麼去確定它的縱向和橫向的偏移量呢？答案是瀏覽器會遞迴查詢該元素的所有父元素，如果找到一個設定了position:relative/absolute/fixed的元素，就以該元素為基準定位，如果沒找到，就以瀏覽器邊界定位。如下兩個圖所示：

display、float、position 的關係

1. 首先判斷 display 屬性是否為 none，如果為 none，則 position 和 float 屬性的值不影響元素最後的表現。
2. 然後判斷 position 的值是否為 absolute 或者 fixed，如果是，則 float 屬性失效，並且 display 的值應該被設定為 table 或者 block，具體轉換需要看初始轉換值。
3. 如果 position 的值不為 absolute 或者 fixed，則判斷 float 屬性的值是否為 none，如果不是，則 display 的值則按上面的規則轉換。注意，如果 position 的值為 relative 並且 float 屬性的值存在，則 relative 相對於浮動後的最終位置定位。
4. 如果 float 的值為 none，則判斷元素是否為根元素，如果是根元素則 display 屬性按照上面的規則轉換，如果不是，則保持指定的 display 屬性值不變。

總的來說，可以把它看作是一個類似優先順序的機制，position:absolute 和 position:fixed 優先順序最高，有它存在的時候，浮動不起作用，display 的值也需要調整；其次，元素的 float 特性的值不是 none 的時候或者它是根元素的時候，調整 display 的值；最後，非根元素，並且非浮動元素，並且非絕對定位的元素，display 特性值同設定值。

absolute 與 fixed 共同點與不同點

共同點：

• 改變行內元素的呈現方式，將 display 置為 inline-block
• 使元素脫離普通文件流，不再佔據文件物理空間
• 覆蓋非定位文件元素

不同點：

• absolute 與 fixed 的根元素不同，absolute 的根元素可以設定，fixed 根元素是瀏覽器。
• 在有滾動條的頁面中，absolute 會跟著父元素進行移動，fixed 固定在頁面的具體位置。

對 sticky 定位的理解

sticky 英文字面意思是貼上，所以可以把它稱之為粘性定位。語法：position: sticky; 基於使用者的滾動位置來定位。

粘性定位的元素是依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換。它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。