CSS样式

  /* 粘性布局，使导航固定 */
  position: sticky;
  top: 0rpx;

  /* 
    实现垂直居中的方法：
  (1)绝对定位法：这个方法就是利用绝对定位，使它的top、left、right、bottom都为0就可以实现居中
  (2)flex居中：display: flex;  justify-content: center;  align-items: center;
  (3)transform位移居中：transform: translate(-50%,-50%);
  (4)不确定宽高居中：父元素相对定位，子元素绝对定位，子元素只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。
  */

/* 
文本溢出隐藏：
  (1)单行：display: block;
             white-space: nowrap;     不换行
                 overflow: hidden;        溢出隐藏，只能在块级元素生效
                  text-overflow: ellipsis;    省略号代替

(2)多行：overflow: hidden;          溢出隐藏
               text-overflow: ellipsis;      省略号代替
              display: -webkit-box;
              -webkit-box-orient: vertical;  设置对齐模式，纵向对齐
              -webkit-line-clamp: 2;       设置多行的行数，示例为2行
  */

/* 
flex布局：
  (1)flex-direction（主轴排列方向）: row（主轴水平对齐） | row-reverse（主轴水平反方向对齐） | column（主轴垂直对齐） | column-reverse（主轴垂直反方向对齐）;

(2)flex-wrap（主轴排列不下如何换行）: nowrap（不换行） | wrap（换行，第一行在上方） | wrap-reverse（换行，第一行在下方）;

(3)flex-flow（是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap）: <flex-direction>  <flex-wrap>;

(4)justify-content（在主轴上的对齐方式）: flex-start（左对齐） | flex-end（右对齐） | center（剧中对齐） | space-between（两端对齐，项目之间的间隔都相等） | space-around（每个项目两侧的间隔相等）;

(5)align-items（交叉轴上对齐方式）: flex-start（交叉轴起点对齐） | flex-end （交叉轴终点对齐）| center（交叉轴中点对齐） | baseline（项目第一行文字的基线对齐） | stretch（默认值，轴线占满整个容器的高度）;

(6)align-content（定义了多根轴线的对齐方式）: flex-start（交叉轴起点对齐） | flex-end （交叉轴终点对齐）| center（交叉轴中点对齐） | space-between（与交叉轴两端对齐） | space-around（每根轴线两侧的间隔都相等） | stretch（默认值，轴线占满整个交叉轴）;
  */