1.overflow的裁剪界線——border-box

overflow屬性用于指定塊容器元素的內容溢出時的表現方式——滾動，裁剪，自適應。“BFC的最佳結界”只是其衍生出來的特性，“裁剪”才是其本職工作。在使用overflow做裁剪工作的時候需要注意裁剪的邊界時border box的內邊緣，來看下面的例子。

<div style="width: 200px;height: 200px;overflow: hidden;border: 10px solid #ccc;padding: 20px"><img src="../小和尚.jpg"> </div>

裁切部分的留白似乎不是很符合我們的預期，如果想要實現元素裁切同時四周留白的話，可以利用透明邊框，此時padding屬性時無能為力的！

2.overflow與滾動條

HTML中有兩個標簽是默認可以產生滾動條的，一個是跟元素html，還有一個是文本標簽textarea，只有這兩個標簽的默認overflow是auto屬性，其他都是visible。關于瀏覽器的滾動條，有以下兩個結論：

（1）在PC端，無論什么瀏覽器，默認滾動條均來自html，而不是body，這點可以由瀏覽器下body的默認margin不為零，但當內容高度超過100%的時候，滾動條離瀏覽器不會有間隙（body的默認margin）可以得出結論。上述結論只針對PC端有效！

（2）在PC端，滾動條出現就一定會占用容器的可用寬度/高度，也就是你本來布局非常準確的200像素寬度，在加入右側滾動條后，可能會導致子元素的像素計算出現偏差，由于父容器的右側擠入了一個不速之客——滾動條。因此在考慮PC端帶滾動條布局的時候，可以減少子元素的實際可用寬度，通常情況下，瀏覽器滾動條所占的寬度是17px（并不是絕對的），因此可以考慮子元素在右側留白>17px。注意本條定律也僅針對PC端有效，由于移動端的屏幕分辨率本來就低，因此滾動條一般以懸浮的方式出現，并不會占用實際寬度。

（3）既然滾動條在CSS布局中有如此重要的地位，因此其樣式也是可以自定義的，在chrome瀏覽器中的屬性如下：

• 整體部分，::-webkit-scrollbar;
• 兩端按鈕，::-webkit-scrollbar-button;
• 外層軌道，::-webkit-scrollbar-track;
• 內層軌道，::-webkit-scrollbar-track-piece;
• 滾動滑塊，::-webkit-scrollbar-thumb;
• 邊角部分，::-webkit-scrollbar-corner;

overflow除了和滾動條是PY關系，還有一些衍生屬性也要依賴overflow，如單行文字超出部分省略號顯示，就需要用到overflow:hidden的聲明。代碼如下

<style> .overText{white-space:nowrap;text-overflow:ellipsis;overflow:hidden; } </style>

3.overflow與錨點定位

什么是錨點定位？通俗點的解釋就是讓頁面定位到某個位置的點。在高度較高的頁面中，通常我們會通過側邊導航欄定位到文章的某一段內容中去，如bilibili的側邊導航欄即可實現這個功能。要實現錨點定位，很多人都知道可以通過Js通過調整scrollTop實現，但新手很少會知道CSS本身就已經提供了這個功能（包括我）。這跟網上教程中很少涉及"CSS錨點定位"功能實現有關，通常情況下，我們看到的都是"JS錨點定位"功能的講解。下面來看看如何用CSS實現錨點定位。CSS規定觸發錨點定位行為發生的條件有兩種：

（1）URL地址中的錨鏈與錨點元素對應并有交互行為

（2）可focus的錨點元素處于focus狀態

URL的觸發條件比較容易，最常用的a標簽即可幫助我們實現錨點定位功能。如下代碼:

<a href="#1">我要定位到和1綁定的元素</a> <div id="1">我是要被定位的元素</div>

此時我們點擊a標簽，便會觸發URL的哈希值改變，然后頁面會根據實際情況讓id為1的div元素定位在瀏覽器窗體的上邊緣（如果需要的話，div元素本身就在頁面的第一行就沒必要定位了）

可focus的錨點元素處于focus狀態不是本章要討論的重點，這里只舉一個簡單的鏈子，在PC端，我們使用Tab鍵可以快速定位可focus的元素，如果下一個focus元素位于屏幕外，那么瀏覽器就會自動重新定位，將這個屏幕外的元素定位到屏幕之中。

雖然兩者都是錨點定位，但是這兩種方式的表現行為還是有差異的，"URL錨點定位"實讓元素定位在瀏覽器窗體的上邊緣，而"focus錨點定位"是讓元素在瀏覽器窗體范圍顯示即可，不一定是在上邊緣（這個你自己一試便知，如CSDN的編輯器就有許多focus元素，把滾動條拖到最上方，按下Tab鍵就可以看到效果了~）

錨點定位行為發生的本質是通過改變容器滾動高度/寬度來實現的，除了html，錨點定位功能還可以在任何overflow不為visible的元素中實現，這句話中可以拆分成兩個條件。

條件（1）：錨點定位行為可以在任何元素中發生，不只是html，還可以是普通的div元素

條件（2）：只要是overflow不為visible的元素都可以錨點定位，包括overflow:hidden！

第二個條件說明，錨點定位功能和有沒有滾動條時也能實現，后面我們會借助這個條件用CSS實現一個選項卡功能。干巴巴的說了許多，還沒確認過功能，下面我們就來簡單驗證一下CSS自帶的錨點定位功能。

<!-- CSS錨點定位 --> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a> <a href="#">回到頂部</a><div style="overflow:auto;height: 300px; width: 300px;"><div id="1" class="li">1</div><div id="2" class="li">2</div><div id="3" class="li">3</div><div id="4" class="li">4</div><div id="5" class="li">5</div><div id="6" class="li">6</div><div id="7" class="li">7</div><div id="8" class="li">8</div><div id="9" class="li">9</div><div id="10" class="li">10</div> </div><style type="text/css"> .li{width: 200px;height: 200px;margin-bottom: 20px;background: yellow;display: inline-block; } </style>

上面的例子證明了錨點定位也可以發生在普通元素中，同時我們還需要知道一個概念，就是錨點定位是可以同時發生在嵌套元素中的，且發生的順序是“由內而外的”，如普通元素和窗體可以同時滾動的時候，就會由內而外觸發所有可以滾動的窗體的錨點定位功能。

上面只是錨點定位功能的簡單測試，同時他也符合“錨點定位功能是滾動條的表現形式”的正常預期。然而本小節的核心內容是：overflow:hidden的元素也是可以實現錨點定位的，當元素聲明了overflow后，里面內容高度溢出的時候，滾動永遠存在，滾動條可有可無，下面我們就將上面例子中的overflow:auto改為overflow:hidden，看看是否符合這個理論。

結果跟理論相同，overflow:hidden的元素也可以實現錨點定位功能。（關于CSS的錨點定位，我個人求證了掘金右側的導航欄也是用的CSS錨點定位功能，感興趣的小伙伴可以自己看一下掘金自帶的錨點定位功能）

4.利用CSS實現選項卡效果

理論需要被用在實踐中才能發揮他的作用，下面我們就用overflow:hidden的錨點定位功能實現一個CSS選項卡效果。

<!-- CSS實現選項卡功能 --> <div class="box"><div class="list" id="one">1</div><div class="list" id="two">2</div><div class="list" id="three">3</div><div class="list" id="four">4</div> </div> <div class="link"><a class="click" href="#one">1</a><a class="click" href="#two">2</a><a class="click" href="#three">3</a><a class="click" href="#four">4</a> </div> <style type="text/css"> .box {width: 20em;height: 10em;border: 1px solid #ddd;overflow: hidden; } .list {line-height: 10em;background: #ddd;text-align: center; } </style>

由于markdown編輯器支持標簽語言，因此我們可以直接預覽最終效果如下（小提示：你可以直接點擊1，2，3，4看到效果，建議copy代碼到本地查看效果）

當然這個方法也有其缺點，就是需要固定高度，當然這只是一個小缺點，他還有個更麻煩的地方就是，錨點功能“由內而外”的特性會使其觸發窗體外的重定位，也就是說如果頁面也是可以滾動，那么點擊選項卡后頁面會發生跳動，這種體驗顯然是“bug”級別的存在，因此這里只是介紹這種方法，在實際場景中，我更推薦使用第二種方法去實現CSS錨點定位功能。

還記得剛才提到的focus元素也可以觸發錨點定位的功能嘛？而且focus的特性就是只要元素在瀏覽器內，就不會觸發瀏覽器窗口的重新定位，這個屬性用在選項卡這兒，簡直是太棒了。那么如何觸發元素的focus呢？原生的標簽也可以觸發這個屬性，就是已經快被我們遺忘的label標簽可以完美觸發input的focus，知道了這些理論后我們就可以實現一個完美的CSS選項卡功能了。

<!-- CSS實現選項卡功能 --> <div class="box"><div class="list"><input id="one">1</div><div class="list"><input id="two">2</div><div class="list"><input id="three">3</div><div class="list"><input id="four">4</div> </div> <div class="link"><label class="click" for="one">1</label><label class="click" for="two">2</label><label class="click" for="three">3</label><label class="click" for="four">4</label> </div> <style type="text/css"> .box {width: 20em;height: 10em;border: 1px solid #ddd;overflow: hidden; } .list {height: 100%;background: #ddd;text-align: center;position: relative; } .list > input { position: absolute; top:0; height: 100%; width: 1px;border:0; padding: 0; margin: 0;clip: rect(0 0 0 0); } </style>

overflow的講解到此就結束了，下一章我們繼續來探討CSS世界的流破壞與流保護，之前講了float，下一章float的好PY position：absolute相關的內容，感興趣的關注一下吧~

最后，給大家推薦一個前端學習進階內推交流群685910553（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（群內會定期免費提供一些群主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）

如果您對這個文章有任何異議，那么請在文章評論處寫上你的評論。

如果您覺得這個文章有意思，那么請分享并轉發，或者也可以關注一下表示您對我們文章的認可與鼓勵。

愿大家都能在編程這條路，越走越遠。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的js锚点定位_overflow属性详解，利用CSS实现锚点定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。