CSS進階（11）—— overflow屬性詳解，利用CSS實現錨點定位

本章延續上一章BFC的內容深刻探索BFC的最佳結界——overflow在其本職工做上的表現。

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代碼到本地查看效果）

1

2

3

4

1 2 3 4

固然這個方法也有其缺點，就是須要固定高度，固然這只是一個小缺點，他還有個更麻煩的地方就是，錨點功能「由內而外」的特性會使其觸發窗體外的重定位，也就是說若是頁面也是能夠滾動，那麼點擊選項卡後頁面會發生跳動，這種體驗顯然是「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相關的內容，感興趣的關注一下吧~

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。