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

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

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

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

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

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

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

使用display: none 。

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

使用visibility: hidden與display: none可以分解為幾個關鍵領域：

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

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

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

是的， visibility: hidden元素通常可以保持屏幕讀取器的訪問，前提是該元素仍然是文檔標簽順序的一部分，或者尚未明確排除在可訪問性樹中。這是因為該元素仍然存在于DOM中，并且是渲染樹的一部分，盡管在視覺上隱藏了。

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

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

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

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