overflow与锚点定位

* 什么是锚点
  就是可以让页面定位到某个位置的点
* 锚点定位行为的触发条件
  url地址中的连接与锚点元素对应并有交互行为
  可focus的锚点元素处于focus状态
* 什么是overflow
  CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 
* overflow的四个属性值
1. overflow: visible：默认值。内容不会被修剪，会呈现在元素框之外
1. overflow: hidden：容会被修剪，并且其余内容不可见
1. overflow: scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容 
1.  overflow: scroll：由浏览器定夺，如果内容被修剪，就会显示滚动条
1. overflow: auto：规定从父元素继承overflow属性的值
* 锚点定作用的本质
锚点定位行为的发生，本质上就是改变容器滚动高度或者宽度来实现的
``` 
<!-- <a href="#">回到顶部</a> -->
    <!-- 测试锚点连接，点击的时候跳转到另一个元素 -->
    <div class="box">
        <div class="content"></div>
        <h4 id="title">底部标题</h4>
    </div>
    <p><a href="#title">点击到标题元素</a></p>
 .box {
            height: 200px;
            border: 1px solid red;
            overflow: auto;
        }
        .content {
            height: 200px;
            background-color: gold;
        }
```
*上面代码中：先点击“点击回到底部元素”，然后先触发.box容器的锚点定位，也就是滚动到底部，然后再触发窗口的锚点定位。
* 实现一下选项卡切换效果

``` 
<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="fore">4</div>
        <div class="list" id="five">5</div>
    </div>
    <div>
        <a href="#one">1</a>
        <a href="#two">2</a>
        <a href="#three">3</a>
        <a href="#fore">4</a>
        <a href="#five">5</a>
    </div>
 .box {
            height: 10em;
            border: 1px solid red;

            overflow: hidden;
        }
        .list {
            line-height: 10em;
            background: #ddd;
        }
```
上面代码存在缺点：容器需要设置高低，锚点定位会触发窗体的重新定位，也就是说页面是可以滚动的

另一种写法：
```
 <!--使用input标签和label标签  -->
    <!-- 
        这样实现就不会产生跳动现象
     -->
     <div class="box1">
        <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="fore">4</div>
        <div class="list"><input id="five">5</div>
     </div>
     <div class="box2">
         <label class="list1" for="one">1</label>
         <label class="list1" for="two">2</label>
         <label class="list1" for="three">3</label>
         <label class="list1" for="fore">4</label>
         <label class="list1" for="five">5</label>
     </div>
 .box1 {
            overflow: hidden;
            height: 10em;
            border: 1px solid red;
        }
        .list {
            height: 100%;
            background: #ddd;
            position: relative;
        }
        .list>input {
            position: absolute;
            top: 0px;
            height: 100%;
            border: 0;
            padding: 0;
            margin: 0;
            padding: 0;
            /* 
                clip:rect(top, right, bottom, left)（裁剪）
                top: 矩形上长对应父元素上长的距离
                right：矩形右宽对应父元素左宽的距离
                bottom: 矩形下长对应父元素上长的距离
                left： 矩形左宽对应父元素左宽的距离
                clip配合absolut使用，生成绝对定位，进行裁剪
                如果先有"overflow：visible"，clip属性不起作用
                clip配合position:absolute;使用，生成绝对定位元素，进行剪裁
             */
            clip: rect(0 0 0  0);
            /* overflow: hidden; */
        }
        .box2 {
           margin-top: 10px;
            width: 200px;
           
        }
         .list1 {
            margin-left: 10px;
            font-size: 30px;
            border: 1px solid rgb(47, 45, 45);
            background: rgb(154, 146, 146);
        }
```
上面的代码的优点：其实就是中设置了一个肉眼看不见的input，然后就是选项卡按钮变成label标签元素，并通过for属性和id属性相关连，点击选项按钮后会触发输入框的focus行为，触发锚点定位，实现选项卡切换，而且还可以使用tap键来切换、浏览器各种选项面板的内容。