定位

值	语义	定位	转换inline-block
`static`	静态定位	默认定位	不能
`relative`	相对定位	相对于自己在原来标准流中的位置定位	不能
`absolute`	绝对定位	依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。父元素没有定位，则以浏览器为准定位（Document 文档）。	能
`fixed`	固定定位	浏览器可视窗口 + 边偏移属性来设置元素的位置；跟父元素没有任何关系；单独使用，不占位置	能

4. 溢出的文字省略号显示

4.1 white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容


white-space:normal ；默认处理方式

white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

注意：

一定要首先强制一行内显示，再次和overflow属性搭配使用，同时需要有宽度限制

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

多行文本两行

<style>
	.demo {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; 
                overflow: hidden;
                white-space: pre-wrap;
                word-break: break-word; // 按完整单词换行，word-break: break-all;按字母换行
	}
</style>

<body>
	<div class='demo'>这是一段很长的文本</div>
</body>

CSS三角形

        div {
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border: 10px solid transparent;
                border-bottom: 10px solid red;
        }

一张图，你就知道 css 三角是怎么来的了, 做法如下：

我们用css 边框可以模拟三角效果
宽度高度为0
令border为 transparent 透明，需要的方向覆盖原来透明
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

盒模型

参考
CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin（外边距）、border（边框）、padding（内边距）和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型，大小：width/height = content，设置方式：box-sizing: content-box。
IE盒模型，大小：width/height = content + border + padding，设置方式：box-sizing: border-box。

常见的行级元素和块级元素都有哪些，有什么区别？

块级元素

h1-h6, div, p
块状元素特征：

(1)可以设置宽高,默认宽度铺满屏幕
(2)margin和padding的上下左右均对其有效

行内元素

<a>、<span>、<b>、<i>
行内元素特征：

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效

清除浮动

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout
clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因

      .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

      .clearfix {
        *zoom: 1;
      } /* IE6、7 专有 */

display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。两者****区别如下：

（1）在渲染树中

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

（2）是否是 继承属性

display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

对BFC的理解，如何创建BFC

参考
通俗来讲：BFC也叫块级格式化上下文,是Web页面中盒模型布局的CSS渲染模式，可以看作是一个独立的容器，容器里面的元素不会在布局上影响到外面的元素

创建BFC的条件：

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

BFC的作用：

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

flex

转载参考参考网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo，也可以参考。

以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。


.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。


.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。


.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。


.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。


.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。


.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。


.item {
  order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。


.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。


.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。


.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。


.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

flex:flex-grow flex-shrink flex-basis;
flex-grow 属性定义当父元素还有剩余空间的时候，子元素的放大比例，默认为0。
flex-shrink 属性定义了当子元素超出父元素宽度的时候，子元素的缩小比例，默认为1。
flex-basis 属性定义了在分配多余空间之前，元素占据的主轴空间。

css选择器优先级

css选择器包括!important 权重无限大，行内样式 1000， id选择器 100， class选择器、伪类和属性选择器为 10，标签选择器和伪元素选择器为 1，通配符*为 0

css3动画

参考

transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

rotate(45deg)

scale(.5)

animation 帧动画

基本使用

定义动画：使用@keyframes 规则配置动画中的各个帧

from 表示起始点
to表示终点元素使用：

// 对应元素下加入动画名称，执行时间
        animation-name: hd;
        animation-duration: 2s;

示例基本结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        width: 100vw;
        height: 100vh;
        background: #34495e;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      main {
        width: 100px;
        height: 100px;
        background: white;
        animation-name: hd;
        animation-duration: 2s;
      }

      @keyframes hd {
        from { //开始
          background: white;
        }
        to { //结束
          background: #e74c3c;
        }
      }
    </style>
  </head>
  <body>
    <main></main>
  </body>
</html>

时间点

帧动画需要定义在不同时间执行的动作，开始与结束可以使用 form/to 或 0%/100% 声明。

必须添加百分号，25%是正确写法
时间点没有顺序要求，即100%写在25%前也可以
未设置0%与100% 时将使用元素原始状态

      @keyframes hd {
        0% {
          background: white;
        }
        25% {
          transform: scale(2);
        }
        65% {
          transform: scale(1);
        }
        100% {
          background: #e74c3c;
        }
      }

同时声明

时间点可以动画样式一样时可以一起声明，下面将25%/75%背景一起声明。

    @keyframes hd {
        25% {
            transform: translateX(300%);
        }

        50% {
            transform: translate(300%, 300%);
        }

        75% {
            transform: translate(0, 300%);
        }

        25%,
        75% {
            background: #9b59b6;
            border-radius: 50%;
        }

        50%,
        100% {
            background: #e67e22;
        }
    }

多个动画组合使用

使用animation-name 规则可以在元素身上同时使用多个动画。

使用多个动画时用逗号分隔
多个动画有相同属性时，后面动画的属性优先使用使用 animation-duration 可以声明动画播放的时间，即把所有帧执行一遍所需要的时间。
可以使用m秒，ms毫秒时间单位
可为不同动画单独设置执行时间
只有一个时间所有动画公用，如果有多个则按顺序，不够则从头循环开始算如果有属性重叠，优先使用后面的属性，如果后面的动画执行完毕，则将该属性交给前面正在执行的动画

<style>
    main {
        width: 400px;
        height: 400px;
        border: solid 5px #95a5a6;
    }

    div {
        width: 100px;
        height: 100px;
        background-color: #e67e22;
        animation-name: hd, scale;
        animation-duration: 3s, 1s;
    }

    @keyframes hd {
        25% {
            transform: translateX(300%);
        }

        50% {
            transform: translate(300%, 300%);
        }

        75% {
            transform: translate(0, 300%);
        }

        25%,
        75% {
            background: #9b59b6;
        }

        50%,
        100% {
            background: #e67e22;
        }

    }

    @keyframes scale {
        from {
            border-radius: 0;
        }

        75% {
            border-radius: 50%;
        }

        to {
            border-radius: 0;
        }
    }
</style>

<main>
	<div></div>
</main>

可以变化的属性

不是所有css属性都有过渡效果，查看支持动画的CSS属性 (opens new window)，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。

重复动画

使用animation-iteration-count 规则设置动画重复执行次数，设置值为 infinite 表示无限循环执行。

可同时设置元素的多个动画重复，使用逗号分隔
如果动画数量大于重复数量定义，后面的动画将重新计算重复和animation-duration一样

<style>
    .heart {
        width: 200px;
        height: 200px;
        background: #e74c3c;
        transform: rotate(45deg);
        position: relative;
        animation-name: heart;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }

    .heart::before {
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #e74c3c;
        position: absolute;
        transform: translate(-50%, 0px);
    }

    .heart::after {
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #e74c3c;
        position: absolute;
        transform: translate(0%, -50%);
    }

    @keyframes heart {
        from {
            transform: scale(.3) rotate(45deg);
        }

        to {
            transform: scale(1) rotate(45deg);
        }
    }
</style>

<main>
	<div class="heart"></div>
</main>

动画方向

参考使用 animation-direction 控制动画运行的方向。避免动画恢复时太过生硬

选项	说明
normal	从0%到100%运行动画
reverse	从100%到0%运行动画
alternate	先从0%到100%，然后从100%到0%
alternate-reverse	先从100%到0%，然后从0%到100%

效果比较

Untitled

动画延迟执行 animation-delay

使用 animation-delay 规则定义动画等待多长时间后执行。

        width: 80vw;
        height: 40vw;
        background: #8e44ad;
        transform: translate(-100vw, -100vh);
        animation-name: hd-rotate;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;

动画速率

系统属性

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值

可以在帧中单独定义，将影响当前帧的速率

贝塞尔曲线

需要设置四个值 cubic-bezier(<x1>, <y1>, <x2>, <y2>)，来控制曲线速度，可在 cubic-bezier.com (opens new window)网站在线体验效果。

        li {
            box-sizing: border-box;
            background: #e67e22;
            animation-name: move;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            color: #333333;
            animation-timing-function: ease;
        }

或者在帧里设置

        @keyframes jump {
            0% {
                transform: translateY(0);
                animation-timing-function: ease-in;
            }

            30% {
                transform: translateY(10vh);
                animation-timing-function: ease-in;
            }

            60% {
                transform: translateY(40vh);
                animation-timing-function: ease-in;
            }

            80% {
                transform: translateY(60vh);
                animation-timing-function: ease-in;
            }

            95% {
                transform: translateY(75vh);
                animation-timing-function: ease-in;
            }

            15%,
            45%,
            70%,
            85%,
            100% {
                transform: translateY(80vh);
                animation-timing-function: ease-out;
            }
        }

步进动画steps

过渡使用阶梯化呈现，有点像现实生活中的机械舞，下面是把过渡分五步完成。

选项	说明
steps(n,start)	设置n个时间点，第一时间点变化状态
steps(n,end)	设置n个时间点，第一时间点初始状态
step-start	等于steps(1,start)，可以理解为从下一步开始
step-end	等于steps(1,end)，可以理解为从当前步开始

steps

steps(n,start) 可以简单理解为从第二个开始，steps(n,end) 从第一个开始。

        div:nth-child(5)::before {
            content: 'END';
            position: absolute;
            width: 100px;
            height: 100px;
            background: #e67e22;
            left: 0;
            animation-name: move;
            animation-duration: 2s;
            z-index: 2;
            animation-timing-function: steps(4, end);
            animation-iteration-count: infinite;
        }

动画状态播放暂停

使用 animation-play-state 可以控制动画的暂停与运行。

选项	说明
paused	暂停
running	运行

示例

     main:hover ul::before {
            animation-play-state: paused;
        }

填充模式

animation-fill-mode 用于定义动画播放结束后的处理模式，是回到原来状态还是停止在动画结束状态。

选项	说明
none	需要等延迟结束，起始帧属性才应用
backwards	动画效果在起始帧，不等延迟结束
forwards	结束后停留动画的最后一帧
both	包含backwards与forwards规则，即动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧

组合写法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

单位

vw,vh

vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。vh是可视窗口的高度单位。

百分比布局

百分比参考位置

参考子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度；子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的；

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

position属性sticky

参考

为什么要学习position:sticky

在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现

我不是最后一个知道的：position: sticky

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性

position:sticky用法

position:sticky 被称为粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
简单的理解就是：在目标区域以内，它的行为就像 position:relative;在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
可以说是相对定位relative和固定定位fixed的结合
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。

position:sticky 使用条件

1.父元素不能overflow:hidden或者overflow:auto属性。

2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

3.父元素的高度不能低于sticky元素的高度

4、sticky元素仅在其父元素内生效

例子

当鼠标下滑到一定高度时，触发position:sticky定位的要求，让“流行，新款，精选”固定为距离顶部44px的地方。
css代码

css

.tab-control{
  position: sticky;
  top: 44px;
}

html区域

<tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>

在web开发中注意兼容性：

sticky目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图，基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari

使用sticky容易遇到的“坑”

1.sticky不会触发BFC，
2.z-index无效，
3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4.IE低版本不支持sticky的使用

vertical-align 解决中文和数字不对齐的问题

vertical-align: middle 放在中文上

基础知识-css篇

定位