overflow与锚点定位

什么是锚点
就是可以让页面定位到某个位置的点
锚点定位行为的触发条件
url地址中的连接与锚点元素对应并有交互行为
可focus的锚点元素处于focus状态
什么是overflow
CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性
overflow的四个属性值

overflow: visible：默认值。内容不会被修剪，会呈现在元素框之外
overflow: hidden：容会被修剪，并且其余内容不可见
overflow: scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow: scroll：由浏览器定夺，如果内容被修剪，就会显示滚动条
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键来切换、浏览器各种选项面板的内容。

__EOF__

本文作者：我爱学习
本文链接：https://www.cnblogs.com/CHEN-JING-YANG/p/16121515.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！