（注：本篇文章使用語言簡(jiǎn)潔明了、示例詳細(xì)的方式，介紹CSS地址默認(rèn)開關(guān)效果） CSS 地址默認(rèn)開關(guān)是前端開發(fā)中常用的一種技巧，用于控制頁(yè)面布局中元素的位置和顯示狀態(tài)。具體來說，它可以通過設(shè)置CSS樣式，讓某個(gè)元素的位置和顯示狀態(tài)自動(dòng)切換。 下面的示例展示了如何使用CSS 地址默認(rèn)開關(guān)技巧，實(shí)現(xiàn)一個(gè)“點(diǎn)擊按鈕切換圖像”的效果：

我們先設(shè)置兩個(gè)圖片的樣式：

.img1 {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.img2 {
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: none;
}

這里需要注意，兩個(gè)圖片的位置都是絕對(duì)定位，層級(jí)分別為 1 和 2，之所以設(shè)置為絕對(duì)定位，是因?yàn)樽釉叵鄬?duì)于其包含塊定位的方式不同，采用絕對(duì)定位可以讓圖片元素從正常的文檔流中脫離，避免產(chǎn)生布局上的影響。

同時(shí)，我們默認(rèn)只顯示第一張圖片，第二張圖片的 display 屬性設(shè)置為 none，即不顯示。

接著，編寫 JavaScript 代碼實(shí)現(xiàn)按鈕的點(diǎn)擊事件：

const btn = document.querySelector('.btn')
const img1 = document.querySelector('.img1')
const img2 = document.querySelector('.img2')
btn.addEventListener('click', () =>{
if (img1.style.display === 'none') {
img1.style.display = 'block'
img2.style.display = 'none'
} else {
img1.style.display = 'none'
img2.style.display = 'block'
}
})

當(dāng)按鈕被點(diǎn)擊時(shí)，通過改變圖片元素的 display 屬性，實(shí)現(xiàn)圖片的切換。

以上就是 CSS 地址默認(rèn)開關(guān)的應(yīng)用示例，通過該技巧可以實(shí)現(xiàn)更加靈活的元素控制和布局管理。