伪元素动态content，三目运算，img标签无法伪元素，ol序号样式，flex栅格方案，图片加载抖动，数组填充，吸顶效果，cover和contain，BrowserRouter开发模式无法刷新

1、伪元素动态content

来自简书的大佬

2、三目运算

来自个人的学习总结：
1、在if条件下 进行if else

// ... 省略若干React代码
 {// 此处三目运算分别判断4种情况
    activeIndex === 0
      ? (
        !systemList.length ? (<img src={systemNull} />) : (
          renderMsgContent(systemList)
        )
      )
      : (
        !interactionList.length ? (< img src={interactionNull} />) : (
          renderMsgContent(interactionList)
        )
      )
  }

3、img标签无法使用伪元素

略去代码证明。
当img图片渲染成功，伪元素 无法正常 渲染。
当img图片挂了，伪元素 正常 渲染。

ol序号样式

4、flex栅格方案

四等分：
方案一：盒子套盒子（较理想）

.model-container {
	width: 25%;
    margin: $margin_outer; // 此处 ，因为container的父盒子定宽1200px，故margin会向内扩展。
    @include columnCenter;
	// ...
    .model-project {
	}
	// ...
}

注： padding也一样，需添加box-sizing: border-box;

方案二： 仅一个盒子（简单，但不能做左右边距清除）

square-work {
  	margin: 1.25%; // 1.25% * 2 +22.5%  = 25% 即四等分
    width: 22.5%;
    flex: 0 0 22.5%;
    // ...
}

注比如做左右边距清除，会导致整体宽度减少 边距*2 的长度。

5、图片加载抖动

实现方案，padding-bottom

6、数组填充

7、吸顶效果

2020年1月9日14:32:26，仅记录我用到，用过的。
1、animation
通过style去动态控制


若React开发，通过这种方式还可以尝试写高阶组件，封装类似Vue的transition组件。

8、cover和contain

contain: 使图片完全展示出来。

优点：保证图片了全部显示。
缺点： 可能触发repeat图片会非常扭曲。

cover: 贴合一侧宽或高则停止。

优点：保证图片不失真，保持原尺寸。
缺点：可能需要配合background-position进行位置调整。

9、BrowserRouter开发模式无法刷新

开发模式无法刷新，解决方案。