Raft算法：保障分布式系統(tǒng)共識(shí)的穩(wěn)健之道
1. 什么是Raft算法？Raft 是英文”Reliable、Replicated、Redundant、And Fault-Tolerant”（“可靠、可復(fù)制、可冗余、可容錯(cuò)”）的首字母縮寫。Raft算法是一種用于在分布式系統(tǒng)
盼了好久，最近 Chrome 125終于迎來(lái)了CSS 錨點(diǎn)定位的正式支持。這是一個(gè)和 CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫一樣，足以顛覆整個(gè) Web 開發(fā)領(lǐng)域的新特性。有了這個(gè)特性，很多以前強(qiáng)依賴 JS 的方式，都可以純 CSS解決，并且實(shí)現(xiàn)起來(lái)更加簡(jiǎn)單、更加靈活，一起看看吧！
可以看到，在切換tab時(shí)，底下的背景是可以無(wú)縫過(guò)渡的。在以前，我們要實(shí)現(xiàn)這樣的功能，必須要借助 JS來(lái)獲取當(dāng)前點(diǎn)擊元素的尺寸和位置，但現(xiàn)在，只需要借助 CSS 錨點(diǎn)定位就能輕松實(shí)現(xiàn)了。
位置信息前面以及提到了，用anchor(left)和anchor(top)就可以了，那尺寸呢，需要用到anchor-size。
anchor-size(width) /*錨點(diǎn)元素寬度*/anchor-size(height) /*錨點(diǎn)元素高度*/利用這個(gè)特性，我們可以很輕松的實(shí)現(xiàn)這樣一個(gè)效果，結(jié)構(gòu)如下：
<nav class="tab"> <a class="item" href="#HTML" name="HTML">HTML</a> <a class="item" href="#CSS" name="CSS">CSS</a> <a class="item" href="#JavaScript" name="JavaScript">JavaScript</a> <a class="item" href="#React" name="React">React</a> <a class="item" href="#Vue" name="Vue">Vue</a></nav>我們用偽元素來(lái)當(dāng)做tab高亮背景，關(guān)鍵實(shí)現(xiàn)如下：
.tab::after{ content: ''; position: absolute; border-radius: 100px; background-color: rgba(65, 105, 225, 0.2); position-anchor: --anchor-el; width: anchor-size(width); height: anchor-size(height); left: anchor(left); top: anchor(top); transition: .3s; pointer-events: none;}.item:target{ anchor-name: --anchor-el;}這樣就能輕松實(shí)現(xiàn)這個(gè)效果了，你也可以訪問(wèn)以下在線鏈接（Chrome 125+）
有時(shí)候定位元素會(huì)處于屏幕邊緣，當(dāng)沒(méi)有足夠空間顯示時(shí)，可以通過(guò)position-try-options來(lái)設(shè)置一個(gè)備用位置。
舉個(gè)例子，比如一個(gè)氣泡，默認(rèn)是朝上的，當(dāng)滾動(dòng)到屏幕邊緣時(shí)會(huì)自動(dòng)朝下，示意如下：
這種情況就可以用@position-try來(lái)實(shí)現(xiàn)了，具體做法是這樣的。
先通過(guò)position-try-options指定一個(gè)變量名，比如--bottom。
tooltip{ position: fixed; position-anchor: --anchor-el; inset-area: top; position-try-options: --bottom;}然后通過(guò)@position-try來(lái)定義規(guī)則。
@position-try --bottom { inset-area: bottom;}這樣就實(shí)現(xiàn)定位元素位置自動(dòng)調(diào)整了。
除此之外，還有一種便捷寫法，直接給position-try-options指定以下關(guān)鍵字。
position-try-options: flip-block; /*垂直翻轉(zhuǎn)*/position-try-options: flip-inline; /*水平翻轉(zhuǎn)*/這樣就無(wú)需@position-try定義了，實(shí)現(xiàn)更簡(jiǎn)單。
當(dāng)然，我覺(jué)得這個(gè)功能還是稍顯不足的，比如當(dāng)氣泡帶有箭頭時(shí)，雖然也能翻轉(zhuǎn)，但是卻無(wú)法改變箭頭的位置，也就是無(wú)法查詢到當(dāng)前是否已經(jīng)翻轉(zhuǎn)了，就像這樣。
首先是點(diǎn)擊出現(xiàn)，這個(gè)就是popover的功能了，通過(guò)popovertarget和popover屬性，將兩者結(jié)合起來(lái)，就能輕松實(shí)現(xiàn)點(diǎn)擊出現(xiàn)菜單的功能。
<button class="btn" popovertarget="more"></button><div class="menu" id="more" popover> <button class="item">編輯</button> <button class="item">刪除</button></div>然后就定位，利用CSS錨點(diǎn)定位，將菜單定位到按鈕的右下方，也就兩三行代碼的事。
.btn{ anchor-name: --menu;}.menu{ position-anchor: --menu; inset-area: bottom span-right;}這樣就能輕易實(shí)現(xiàn)懸浮菜單了，你也可以訪問(wèn)以下在線鏈接（Chrome 125+）
在codepen上找到了一個(gè)更完善的多級(jí)菜單案例。
https://codepen.io/jh3y/pen/dyLjbwG
介紹了這么多，一下子肯定難以接受，多回顧幾遍就明白了，至少可以知道錨點(diǎn)定位是干嘛的，如果以后有類似的需求也有一定的方向，下面總結(jié)一下本文要點(diǎn)
最近幾年CSS更新的確實(shí)有點(diǎn)太快了，很多以往的疑難雜癥都有了新的解決方式。但是很多時(shí)候?qū)W這些好像暫時(shí)沒(méi)啥用，畢竟可能 5 年以后才用得上。但是原生特性不像其他，一個(gè)框架兩三年就有可能被淘汰，或者有新的替代品出現(xiàn)，原生的學(xué)到了就學(xué)到了，只要web存在的一天，就永遠(yuǎn)都不會(huì)過(guò)時(shí)，所以也不虧是吧。
[1]CSS anchor (codepen.io)： https://codepen.io/xboxyan/pen/dyEVVPb。
[2]CSS anchor nav (codepen.io)： https://codepen.io/xboxyan/pen/zYQpvqg。
[3]CSS anchor position-try-options (codepen.io)： https://codepen.io/xboxyan/pen/dyEJYRO。
[4]CSS anchor menu (codepen.io)： https://codepen.io/xboxyan/pen/qBGpOKq。
本文鏈接：http://www.www897cc.com/showinfo-26-101375-0.htmlCSS錨點(diǎn)定位終于來(lái)了！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)