8.20 课堂笔记

1.粘性定位

sticky 粘性定位：

加粘性点各位要注意的是（父元素一定要有足够的高度）

• 基于⽤户的滚动位置来定位

• 在未滚动出目标区域时，类似 position:relative;

• 当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。

• 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

这个特定阈值指的是 top, right, bottom 或 left 之⼀，换⾔之，指定 top, right, bottom 或 left 四个阈值其中之⼀，才可使粘性定位⽣效。否则其⾏为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。

.sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    background-color:red;
    border:2px solid orange;
}

2.层级关系：z-index

z-index:0 ;1

标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。 定位高于浮动，浮动高于标准流。（高低和占不占位置无关） 给定 z-index 的值为层级的值。（不给默认为0）

3.隐藏元素的六种方式

3.1使用透明度​​​​​​

opacity 让元素和图片半透明【0-1】

具有继承性

可以用来隐藏，但占据空间，可以使用过渡

3.2 使用display

display:none 注意：元素消失，不会占据空间

display:block 显示

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    display:none;
  }
</style>
<div class="box"></div>

3.3 使用scale缩放

语法：transform:scale(0) 注意：元素消失，但是还会占据空间，可以用过渡

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transform:scale(0)
  }
</style>
<div class="box"></div>

3.4 使用visibility

visibility：hidden 隐藏

visibility：visible 显示

占据空间， 不可以使用过渡效果

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    visibility:hidden;
  }
</style>
<div class="box"></div>

3.5 使用宽高和overflow

宽度或者高度=0，配合overflow hidden；不占据空间，让出原来的位置，可以使用过渡

<style>
  .box{
    width: 0px;
    height: 0px;
    background-color: aquamarine;
    overflow:hidden;
    visibility:hidden;
  }
</style>
<div class="box"></div>

3.6 使用position定位

语法：position:absolute; top:-当前元素的高度；left：-当前元素的高度 注意： 元素消失，不会占据空间

不占据空间，可使用过渡（不推荐使用）

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position:absolute;
    top:-100px;
    left:-100px;
  }
</style>
<div class="box"></div>

4.光标属性

5.元素垂直水平居中方案

5.1 第一种

.login{
            width: 500px;
            height: 300px;
            background-color: #fff;
            border-radius: 30px;
            margin: 0 auto;
            position: absolute;
            top:calc(50% - 150px);
            left: calc(50% - 250px);
        }

5.2第二种

.login{
            width: 400px;
            height: 200px;
            background-color: #fff;
            border-radius: 30px;
            /* 元素垂直水平居中方案 */
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }