CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位

深藏阁楼爱情的钟 2021-09-17 03:50 386阅读 0赞

本章延续上一章BFC的内容深入探索BFC的最佳结界——overflow在其本职工作上的表现。

### 1.overflow的裁剪界线——border-box ###

overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。

![20181201104040578.png][]

裁切部分的留白似乎不是很符合我们的预期，如果想要实现元素裁切同时四周留白的话，可以利用透明边框，此时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的声明。代码如下

### 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自带的锚点定位功能。

<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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70][]

上面的例子证明了锚点定位也可以发生在普通元素中，同时我们还需要知道一个概念，就是锚点定位是可以同时发生在嵌套元素中的，且发生的顺序是“由内而外的”，如普通元素和窗体可以同时滚动的时候，就会由内而外触发所有可以滚动的窗体的锚点定位功能。

上面只是锚点定位功能的简单测试，同时他也符合“锚点定位功能是滚动条的表现形式”的正常预期。然而本小节的核心内容是：overflow:hidden的元素也是可以实现锚点定位的，当元素声明了overflow后，里面内容高度溢出的时候，滚动永远存在，滚动条可有可无，下面我们就将上面例子中的overflow:auto改为overflow:hidden，看看是否符合这个理论。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 1][]

结果跟理论相同，overflow:hidden的元素也可以实现锚点定位功能。

### 4.利用CSS实现选项卡效果 ###

理论需要被用在实践中才能发挥他的作用，下面我们就用overflow:hidden的锚点定位功能实现一个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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 2][]

当然这个方法也有其缺点，就是需要固定高度，当然这只是一个小缺点，他还有个更麻烦的地方就是，锚点功能“由内而外”的特性会使其触发窗体外的重定位，也就是说如果页面也是可以滚动，那么点击选项卡后页面会发生跳动，这种体验显然是“bug”级别的存在，因此这里只是介绍这种方法，在实际场景中，我更推荐使用第二种方法去实现CSS锚点定位功能。

还记得刚才提到的focus元素也可以触发锚点定位的功能嘛？而且focus的特性就是只要元素在浏览器内，就不会触发浏览器窗口的重新定位，这个属性用在选项卡这儿，简直是太棒了。那么如何触发元素的focus呢？原生的标签也可以触发这个属性，就是已经快被我们遗忘的label标签可以完美触发input的focus，知道了这些理论后我们就可以实现一个完美的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相关的内容，感兴趣的关注一下吧~

[20181201104040578.png]: /images/20210813/da0782c70f884523a402055c4d86a990.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70]: /images/20210813/5a62b694c13e4639a9ece6e1218d627d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 1]: /images/20210813/cb892bbed4b34b32a4845ba4c4fa578a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 2]: /images/20210813/60836cd6911540df8bfeaa37e405b610.png