一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

序

经过了铜三铁四，面试了十几次后，总结了一些CSS相关的知识，还有项目上常用的CSS代码片段。

个人总结的CSS知识和技巧，主观性强，或许对你有用。

transition和animation的区别

面试被问到这个问题，当时想的是，两个感觉没什么关系，transition是渐变效果，animation是动画，animation需要@keyframes，transition不需要。

感觉回答得不够完整，也没回答到点子上吧。

两者区别有不少，其中关键的一点是transition需要触发，而animation不需要。

两者触发方式

一般来说，transition需要在hover时候使用，而且触发一次就执行一次，再执行需要再次触发。

而animation只要页面加载了就自动执行，还可以控制执行次数。

动画的状态

transition只有触发前状态和触发后状态

animation可以配置@keyframes以百分比0-100%或from-to配置多个值

transition和animation案例

以背景颜色渐变为效果，用transition和animation做动画效果的案例

div {
    margin: 4px;
    padding: 12px;
    height: 160px;
    width: 320px;
    border: 1px dotted;
    color: #fff;
    background-position: 0% 0%;
    background: linear-gradient(-45deg, #0072ff, #00ff84, #23a6d5, #9f36e6);
}
.transition {
    transition: all 2.5s linear;
    background-size: 400% 400%;
    &:hover{
      cursor: pointer;
      background-position: 50% 50%;
    }
}
.animation {
    background-size: 400% 400%;
    animation: backgroundAnimate 5s ease-in-out infinite;
}

css函数calc

calc我最常用于计算元素宽度和高度的属性值了，比如一行有4个div，左右间距为12px，那么他们的宽度可以是calc((100% / 4) - 12px) (父元素设置display: flex或者给div设置浮动)。

calc很方便的点在于可以计算任何值，px、rem、百分比、vh等都可以相互计算

而且支持四则运算，且按照数学的运算优先级规则

需要注意的是，必须在运算符号前后保留一个空格，否则不生效

calc案例

#app {
  div {
    border: 1px solid;
    margin: 10px;
    padding: 8px;
  }
  .calc1 {
    width: calc(100px + 100px);
  }
  .calc2 {
    width: calc(500px / 2);
  }
  .calc3 {
    width: calc(10vw * 5);
  }
  .calc4 {
    width: calc(((30vw + 100px) * 3) / 2);
  }
}

常用CSS代码片段

使用calc水平上下居中

#app {
  position: relative;
  height: 400px;
  .center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    border: 1px solid;
  }
}

文字溢出

.info {
  margin: 20px;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  &.one {
    white-space: nowrap;
  }
  &.two {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

码上掘金 (juejin.cn)