This article documents the new features and usages of CSS in development and on the web

The gap attribute of display

  • gap: 10px; Transverse and longitudinal clearance
  • column-gap: 10px; The left and right clearance is 10px;
  • row-gap: 20px; The upper and lower clearance is 20px;
.wrap {
  display:flex;
  flex-wrap: wrap;
  width: 300px;
  /* gap: 10px; * /
  column-gap: 10px;
  row-gap: 20px;
}

.test {
  background-color: pink;
  width: 110px;
  height: 110px;
}

  <div class="wrap">
    <div class="test test1">1</div>
    <div class="test test2">2</div>
    <div class="test">3</div>
    <div class="test">4</div>
  </div>
Copy the code

Set only the gap between block elements of class ‘test’, not between parent elements

compatibility

Compatible with major browsers is ok

Animations in CSS

  • The transition transition

  • The transform transformation

  • Animation animation

Use @keyFrames to name the animation and define its functionality, and then use animation-name to apply it to the element. Animation-duration controls the completion time.

attribute

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg.rgba(255.255.255.0) 0%.rgba(158.166.255.1) 100%);
    animation: move 1sinfinite; // Compound property}@keyframes move {
    0% { top: -300px; }
    100% { top: 0; }}Copy the code

Native CSS custom properties

When a property value is to be changed, it only needs to be changed in one place

:root{-color: red;
}

.content1 {
    background: var(--color);
}
.content2 {
    background: var(--color);
}
Copy the code