CSS进阶（11）——overflow属性详解，利⽤CSS实现锚点定
位
本章延续上⼀章BFC的内容深⼊探索BFC的最佳结界——overflow在其本职⼯作上的表现。
1.overflow的裁剪界线——border-box
overflow属性⽤于指定块容器元素的内容溢出时的表现⽅式——滚动，裁剪，⾃适应。“BFC的最佳结界”只是其衍⽣出来的特性，“裁剪”才是其本职⼯作。在使⽤overflow做裁剪⼯作的时候需要注意裁剪的边界时border box的内边缘，来看下⾯的例⼦。
<div >
<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 >
<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的元素也可以实现锚点定位功能。
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>
当然这个⽅法也有其缺点，就是需要固定⾼度，当然这只是⼀个⼩缺点，他还有个更⿇烦的地⽅就是，锚点功能“由内⽽外”的特性会使其触发窗体外的重定位，也就是说如果页⾯也是可以滚动，那么点击选项卡后页⾯会发⽣跳动，这种体验显然是“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;
css固定定位
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相关的内容，感兴趣的关注⼀下吧~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。