衣食父母(2020/1/8)

css基础😉😉😉

水平居中

1. 文本、行内块, text-align: center;
2. width: 100px; margin: 0 auto;
3. text-align: center; + display: inline-block;
4. 绝对定位+transform
5. flex

垂直居中

1. 单行: height + line-height;
2. 多行: height + n * line-height;
3. 图片: vertical-align: middle;
4. display: table-cell;vertical-align: middle;
5. display: flex; flex-direction: column;justify-content: center;
6. 绝对定位+transform
7. display: flex;+ align-self: center;

绝对居中

position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

两列布局

左列定宽,右列自适应: 左侧定宽,右侧flex:1;

九宫格布局

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/
    grid-template-rows: repeat(3, 1fr);  /*等同于1fr 1fr 1fr,此为重复的合并写法*/
}
.item {
    border: 1px solid #000;
}

栅格

@media screen and (max-width: 768px) {
 ...
}
@media screen and (min-width: 768px) {
 ...
}

纯css实现顶部滚动条😉😉😉

文档

export default function () {
  return (
    <div className={styles.normal}>
      <div className={styles.item}>111</div>
      <div className={styles.item}>111</div>
      .
      .
      .
      <div className={styles.item}>111</div>
    </div>
  );
}

.normal {
  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
  background-size: 100% calc(100% - 100vh + 5px);
  background-repeat: no-repeat;
}

.item {
  position: relative;
  height: 50px;
  z-index: 1;
}

.normal::after {
  content: "";
  position: fixed;
  top: 5px;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 0;
}

background-image可以给dom配置多个背景图和背景色
background-size可以修饰background-image,两者的参数位置一一对应
linear-gradient渐变

一个div画出一个棋盘😉😉😉

.box {
  font-size: 50px;
  width: 6em;
  background-color: green;
  height: 4em;
  background-image:
    linear-gradient(to bottom, transparent 95%, white 95%),
    linear-gradient(to right, transparent 95%, white 95%),
    linear-gradient(to top, transparent 95%, white 95%),
    linear-gradient(to left, transparent 95%, white 95%);
  background-size: 1em 1em;
  background-repeat: repeat, repeat, repeat-x, repeat-y;
}