1.overflow的裁剪界線——border-box
overflow屬性用于指定塊容器元素的內(nèi)容溢出時(shí)的表現(xiàn)方式——滾動(dòng)，裁剪，自適應(yīng)?！癇FC的最佳結(jié)界”只是其衍生出來(lái)的特性，“裁剪”才是其本職工作。在使用overflow做裁剪工作的時(shí)候需要注意裁剪的邊界時(shí)border box的內(nèi)邊緣，來(lái)看下面的例子。
<div style="width: 200px;height: 200px;overflow: hidden;border: 10px solid #ccc;padding: 20px">
<img src="../小和尚.jpg">
</div>
裁切部分的留白似乎不是很符合我們的預(yù)期，如果想要實(shí)現(xiàn)元素裁切同時(shí)四周留白的話，可以利用透明邊框，此時(shí)padding屬性時(shí)無(wú)能為力的！
2.overflow與滾動(dòng)條
HTML中有兩個(gè)標(biāo)簽是默認(rèn)可以產(chǎn)生滾動(dòng)條的，一個(gè)是跟元素html，還有一個(gè)是文本標(biāo)簽textarea，只有這兩個(gè)標(biāo)簽的默認(rèn)overflow是auto屬性，其他都是visible。關(guān)于瀏覽器的滾動(dòng)條，有以下兩個(gè)結(jié)論：
（1）在PC端，無(wú)論什么瀏覽器，默認(rèn)滾動(dòng)條均來(lái)自html，而不是body，這點(diǎn)可以由瀏覽器下body的默認(rèn)margin不為零，但當(dāng)內(nèi)容高度超過(guò)100%的時(shí)候，滾動(dòng)條離瀏覽器不會(huì)有間隙（body的默認(rèn)margin）可以得出結(jié)論。上述結(jié)論只針對(duì)PC端有效！
（2）在PC端，滾動(dòng)條出現(xiàn)就一定會(huì)占用容器的可用寬度/高度，也就是你本來(lái)布局非常準(zhǔn)確的200像素寬度，在加入右側(cè)滾動(dòng)條后，可能會(huì)導(dǎo)致子元素的像素計(jì)算出現(xiàn)偏差，由于父容器的右側(cè)擠入了一個(gè)不速之客——滾動(dòng)條。因此在考慮PC端帶滾動(dòng)條布局的時(shí)候，可以減少子元素的實(shí)際可用寬度，通常情況下，瀏覽器滾動(dòng)條所占的寬度是17px（并不是絕對(duì)的），因此可以考慮子元素在右側(cè)留白>17px。注意本條定律也僅針對(duì)PC端有效，由于移動(dòng)端的屏幕分辨率本來(lái)就低，因此滾動(dòng)條一般以懸浮的方式出現(xiàn)，并不會(huì)占用實(shí)際寬度。
（3）既然滾動(dòng)條在CSS布局中有如此重要的地位，因此其樣式也是可以自定義的，在chrome瀏覽器中的屬性如下：
整體部分，::-webkit-scrollbar;
兩端按鈕，::-webkit-scrollbar-button;
外層軌道，::-webkit-scrollbar-track;
內(nèi)層軌道，::-webkit-scrollbar-track-piece;
滾動(dòng)滑塊，::-webkit-scrollbar-thumb;
邊角部分，::-webkit-scrollbar-corner;
overflow除了和滾動(dòng)條是PY關(guān)系，還有一些衍生屬性也要依賴overflow，如單行文字超出部分省略號(hào)顯示，就需要用到overflow:hidden的聲明。代碼如下
<style>
.overText{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
</style>
3.overflow與錨點(diǎn)定位
什么是錨點(diǎn)定位？通俗點(diǎn)的解釋就是讓頁(yè)面定位到某個(gè)位置的點(diǎn)。在高度較高的頁(yè)面中，通常我們會(huì)通過(guò)側(cè)邊導(dǎo)航欄定位到文章的某一段內(nèi)容中去，如bilibili的側(cè)邊導(dǎo)航欄即可實(shí)現(xiàn)這個(gè)功能。要實(shí)現(xiàn)錨點(diǎn)定位，很多人都知道可以通過(guò)Js通過(guò)調(diào)整scrollTop實(shí)現(xiàn)，但新手很少會(huì)知道CSS本身就已經(jīng)提供了這個(gè)功能（包括我）。這跟網(wǎng)上教程中很少涉及"CSS錨點(diǎn)定位"功能實(shí)現(xiàn)有關(guān)，通常情況下，我們看到的都是"JS錨點(diǎn)定位"功能的講解。下面來(lái)看看如何用CSS實(shí)現(xiàn)錨點(diǎn)定位。CSS規(guī)定觸發(fā)錨點(diǎn)定位行為發(fā)生的條件有兩種：
（1）URL地址中的錨鏈與錨點(diǎn)元素對(duì)應(yīng)并有交互行為
（2）可focus的錨點(diǎn)元素處于focus狀態(tài)
URL的觸發(fā)條件比較容易，最常用的a標(biāo)簽即可幫助我們實(shí)現(xiàn)錨點(diǎn)定位功能。如下代碼:
<a href="#1">我要定位到和1綁定的元素</a>
<div id="1">我是要被定位的元素</div>
此時(shí)我們點(diǎn)擊a標(biāo)簽，便會(huì)觸發(fā)URL的哈希值改變，然后頁(yè)面會(huì)根據(jù)實(shí)際情況讓id為1的div元素定位在瀏覽器窗體的上邊緣（如果需要的話，div元素本身就在頁(yè)面的第一行就沒(méi)必要定位了）
可focus的錨點(diǎn)元素處于focus狀態(tài)不是本章要討論的重點(diǎn)，這里只舉一個(gè)簡(jiǎn)單的鏈子，在PC端，我們使用Tab鍵可以快速定位可focus的元素，如果下一個(gè)focus元素位于屏幕外，那么瀏覽器就會(huì)自動(dòng)重新定位，將這個(gè)屏幕外的元素定位到屏幕之中。
雖然兩者都是錨點(diǎn)定位，但是這兩種方式的表現(xiàn)行為還是有差異的，"URL錨點(diǎn)定位"實(shí)讓元素定位在瀏覽器窗體的上邊緣，而"focus錨點(diǎn)定位"是讓元素在瀏覽器窗體范圍顯示即可，不一定是在上邊緣（這個(gè)你自己一試便知，如CSDN的編輯器就有許多focus元素，把滾動(dòng)條拖到最上方，按下Tab鍵就可以看到效果了~）
錨點(diǎn)定位行為發(fā)生的本質(zhì)是通過(guò)改變?nèi)萜鳚L動(dòng)高度/寬度來(lái)實(shí)現(xiàn)的，除了html，錨點(diǎn)定位功能還可以在任何overflow不為visible的元素中實(shí)現(xiàn)，這句話中可以拆分成兩個(gè)條件。
條件（1）：錨點(diǎn)定位行為可以在任何元素中發(fā)生，不只是html，還可以是普通的div元素
條件（2）：只要是overflow不為visible的元素都可以錨點(diǎn)定位，包括overflow:hidden！
第二個(gè)條件說(shuō)明，錨點(diǎn)定位功能和有沒(méi)有滾動(dòng)條時(shí)也能實(shí)現(xiàn)，后面我們會(huì)借助這個(gè)條件用CSS實(shí)現(xiàn)一個(gè)選項(xiàng)卡功能。干巴巴的說(shuō)了許多，還沒(méi)確認(rèn)過(guò)功能，下面我們就來(lái)簡(jiǎn)單驗(yàn)證一下CSS自帶的錨點(diǎn)定位功能。
<!-- CSS錨點(diǎn)定位 -->
<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>
上面的例子證明了錨點(diǎn)定位也可以發(fā)生在普通元素中，同時(shí)我們還需要知道一個(gè)概念，就是錨點(diǎn)定位是可以同時(shí)發(fā)生在嵌套元素中的，且發(fā)生的順序是“由內(nèi)而外的”，如普通元素和窗體可以同時(shí)滾動(dòng)的時(shí)候，就會(huì)由內(nèi)而外觸發(fā)所有可以滾動(dòng)的窗體的錨點(diǎn)定位功能。
上面只是錨點(diǎn)定位功能的簡(jiǎn)單測(cè)試，同時(shí)他也符合“錨點(diǎn)定位功能是滾動(dòng)條的表現(xiàn)形式”的正常預(yù)期。然而本小節(jié)的核心內(nèi)容是：overflow:hidden的元素也是可以實(shí)現(xiàn)錨點(diǎn)定位的，當(dāng)元素聲明了overflow后，里面內(nèi)容高度溢出的時(shí)候，滾動(dòng)永遠(yuǎn)存在，滾動(dòng)條可有可無(wú)，下面我們就將上面例子中的overflow:auto改為overflow:hidden，看看是否符合這個(gè)理論。
結(jié)果跟理論相同，overflow:hidden的元素也可以實(shí)現(xiàn)錨點(diǎn)定位功能。（關(guān)于CSS的錨點(diǎn)定位，我個(gè)人求證了掘金右側(cè)的導(dǎo)航欄也是用的CSS錨點(diǎn)定位功能，感興趣的小伙伴可以自己看一下掘金自帶的錨點(diǎn)定位功能）
4.利用CSS實(shí)現(xiàn)選項(xiàng)卡效果
理論需要被用在實(shí)踐中才能發(fā)揮他的作用，下面我們就用overflow:hidden的錨點(diǎn)定位功能實(shí)現(xiàn)一個(gè)CSS選項(xiàng)卡效果。
<!-- CSS實(shí)現(xiàn)選項(xiàng)卡功能 -->
<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編輯器支持標(biāo)簽語(yǔ)言，因此我們可以直接預(yù)覽最終效果如下（小提示：你可以直接點(diǎn)擊1，2，3，4看到效果，建議copy代碼到本地查看效果）
當(dāng)然這個(gè)方法也有其缺點(diǎn)，就是需要固定高度，當(dāng)然這只是一個(gè)小缺點(diǎn)，他還有個(gè)更麻煩的地方就是，錨點(diǎn)功能“由內(nèi)而外”的特性會(huì)使其觸發(fā)窗體外的重定位，也就是說(shuō)如果頁(yè)面也是可以滾動(dòng)，那么點(diǎn)擊選項(xiàng)卡后頁(yè)面會(huì)發(fā)生跳動(dòng)，這種體驗(yàn)顯然是“bug”級(jí)別的存在，因此這里只是介紹這種方法，在實(shí)際場(chǎng)景中，我更推薦使用第二種方法去實(shí)現(xiàn)CSS錨點(diǎn)定位功能。
還記得剛才提到的focus元素也可以觸發(fā)錨點(diǎn)定位的功能嘛？而且focus的特性就是只要元素在瀏覽器內(nèi)，就不會(huì)觸發(fā)瀏覽器窗口的重新定位，這個(gè)屬性用在選項(xiàng)卡這兒，簡(jiǎn)直是太棒了。那么如何觸發(fā)元素的focus呢？原生的標(biāo)簽也可以觸發(fā)這個(gè)屬性，就是已經(jīng)快被我們遺忘的label標(biāo)簽可以完美觸發(fā)input的focus，知道了這些理論后我們就可以實(shí)現(xiàn)一個(gè)完美的CSS選項(xiàng)卡功能了。
<!-- CSS實(shí)現(xiàn)選項(xiàng)卡功能 -->
<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的講解到此就結(jié)束了，下一章我們繼續(xù)來(lái)探討CSS世界的流破壞與流保護(hù)，之前講了float，下一章float的好PY position：absolute相關(guān)的內(nèi)容，感興趣的關(guān)注一下吧~
最后，給大家推薦一個(gè)前端學(xué)習(xí)進(jìn)階內(nèi)推交流群685910553（前端資料分享），不管你在地球哪個(gè)方位，
不管你參加工作幾年都?xì)g迎你的入駐！（群內(nèi)會(huì)定期免費(fèi)提供一些群主收藏的免費(fèi)學(xué)習(xí)書(shū)籍資料以及整理好的面試題和答案文檔?。?/p>
如果您對(duì)這個(gè)文章有任何異議，那么請(qǐng)?jiān)谖恼略u(píng)論處寫(xiě)上你的評(píng)論。
如果您覺(jué)得這個(gè)文章有意思，那么請(qǐng)分享并轉(zhuǎn)發(fā)，或者也可以關(guān)注一下表示您對(duì)我們文章的認(rèn)可與鼓勵(lì)。
愿大家都能在編程這條路，越走越遠(yuǎn)。
