顯示：無與可見度：隱藏的區(qū)別是什麼？

display: none且visibility: hidden CSS屬性通常用於控製網(wǎng)頁上元素的可見性，但它們在佈局和渲染方面的行為不同。

• 顯示：無：設(shè)置元素display: none ，將其完全從佈局中刪除。這意味著該元素不會佔用頁面上的任何空間，也沒有完全渲染。該元素的任何子女也不會渲染，也不會影響佈局。元素本來可以佔據(jù)的空間已關(guān)閉，其他元素會移動以填補空白。
• 可見性：隱藏：當元素設(shè)置為visibility: hidden ，用戶看不到它，但仍然會影響頁面的佈局。元素通常佔據(jù)的空間仍然存在，好像該元素仍然存在，但看不見。該元素的孩子也可以將其設(shè)置為visibility: visible ，儘管他們的父母被隱藏了，但可以顯示他們。

總而言之， display: none完全從佈局中刪除元素，而visibility: hidden屏蔽了元素，但將其空間保留在佈局中。

顯示的使用如何：沒有任何影響網(wǎng)頁的佈局？

當您使用display: none ，它會以以下方式顯著影響網(wǎng)頁的佈局：

• 刪除空間：該元素不會佔據(jù)頁面上的任何空間。佈局調(diào)整了好像元素從未存在。這意味著其他元素可能會向上，向下或向側(cè)面移動，以填充隱藏元素本來可以佔據(jù)的空間。
• 反流：刪除元素可以觸發(fā)頁面佈局的反映。反流是瀏覽器重新計算頁面上元素的位置和尺寸的過程。這可能是一個密集的操作，尤其是如果更改影響頁面的大部分時間。
• 父和兄弟姐妹元素：帶有display: none無需縮小或擴展，具體取決於其餘內(nèi)容。同級元素將根據(jù)缺乏隱藏元素來調(diào)整其位置。
• 兒童元素：要display: none沒有任何方式也不會以任何方式影響佈局。

使用display: none 。

使用可見性的性能含義是什麼：隱藏與顯示：無？

使用visibility: hidden與display: none可以分解為幾個關(guān)鍵領(lǐng)域：

• 渲染性能：使用visibility: hidden通常更快，因為瀏覽器仍然呈現(xiàn)元素及其子女，但只是將它們隱藏起來。這避免了觸發(fā)佈局的回流，這在計算上可能很昂貴。另一方面， display: none導(dǎo)致元素從渲染樹中刪除，這可能會導(dǎo)致頁面佈局的回流，可能會影響性能，尤其是當隱藏元素很大或佈局是否複雜時。
• 內(nèi)存用法：設(shè)置為visibility: hidden在DOM中並消耗內(nèi)存，因為它們?nèi)匀皇卿秩緲涞囊徊糠帧Ｏ啾戎?，帶?code>display: none不佔用資源，而是在DOM中，可以節(jié)省一些內(nèi)存與visibility: hidden 。
• JavaScript和事件處理：具有visibility: hidden元素仍然可以接收事件並被JavaScript操縱，而帶有display: none 。這可能會影響許多仍在與許多隱藏元素進行交互或操縱的應(yīng)用程序中的性能。
• 可訪問性：具有visibility: hidden （如果不是明確設(shè)置），這可能會影響語音導(dǎo)航和其他輔助技術(shù)的情況。

總體而言， visibility: hidden對績效的徵稅往往更少，但是display: none可以更有效。

可見性：隱藏的元素仍然可以訪問屏幕閱讀器嗎？

是的， visibility: hidden元素通?？梢员３制聊蛔x取器的訪問，前提是該元素仍然是文檔標籤順序的一部分，或者尚未明確排除在可訪問性樹中。這是因為該元素仍然存在於DOM中，並且是渲染樹的一部分，儘管在視覺上隱藏了。

但是，有一些考慮因素要牢記：

• 選項卡順序：如果具有visibility: hidden焦點（例如，表單元素），則屏幕讀取器仍然可以訪問它，如果它是選項卡順序的一部分。
• ARIA屬性：您可以使用ARIA（可訪問的豐富的Internet應(yīng)用程序）屬性來控制元素是否暴露於輔助技術(shù)。例如， aria-hidden="true"可以與visibility: hidden以確保元素也隱藏在屏幕讀取器中。
• CSS和JavaScript ：如果您使用CSS來設(shè)置visibility: hidden ，並且該元素仍然是DOM的一部分，而JavaScript不會操縱以將其從選項卡順序中刪除或設(shè)置aria-hidden ，則可能可以訪問屏幕閱讀器。

與屏幕讀取器一起測試您的Web應(yīng)用程序很重要，以確保隱藏的元素在可訪問性方面的表現(xiàn)。

以上是顯示：無與可見度：隱藏的區(qū)別是什麼？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！