分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
display: none 让元素从dom树中消失=》重排（回流）
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 （重绘）
opacity: 0:重绘，不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
粘性布局（sticky）
## CSS3 中 transition 和 animation 的属性分别有哪些
*transition* 过渡动画：
- *transition-property*：指定过渡的 *CSS* 属性
- *transition-duration*：指定过渡所需的完成时间
- *transition-timing-function*：指定过渡函数
- *transition-delay*：指定过渡的延迟时间
*animation* 关键帧动画：
- *animation-name*：指定要绑定到选择器的关键帧的名称
- *animation-duration*：动画指定需要多少秒或毫秒完成
- *animation-timing-function*：设置动画将如何完成一个周期
- *animation-delay*：设置动画在启动前的延迟间隔
- *animation-iteration-count*：定义动画的播放次数
- *animation-direction*：指定是否应该轮流反向播放动画
- *animation-fill-mode*：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
- *animation-play-state*：指定动画是否正在运行或已暂停
如何用css实现一个三角形
<div></div>
div{
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
如何实现一个自适应的正方形
// 方法一
.square { width: 10vw; height: 10vw; background: red; }
// 方法二
.square {
width: 10%;
padding-bottom: 10%;
height: 0; // 防止内容撑开多余的高度
background: red;
}
伪类和伪元素的区别
常见的伪类：:link, :hover, :active, :focus, :visited, :enabled, :disabled, :checked, :nth-child(n), nth-last-child(n), :first-child, :last-child, :only-child
常见的伪元素：::before, ::after, ::first-letter, ::first-iine, ::selection
粘性定位
将父元素设置 overflow: visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="aside-warp">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div class="icon">图标</div>
</div>
</body>
</html>
<style>
body {
display: flex;
justify-content: center;
}
.aside-warp {
margin-top: 50px;
height: 500px;
width: 300px;
background-color: aliceblue;
overflow: auto;
}
.aside-warp div {
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid red;
}
.icon {
position: sticky;
bottom: 0px;
background-color: aquamarine;
}
</style>
