* 什么是锚点
就是可以让页面定位到某个位置的点
* 锚点定位行为的触发条件
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键来切换、浏览器各种选项面板的内容。