css样式实现

实现垂直居中布局

• 需要知道高度
  1. 绝对定位+负外边距
  2. 绝对定位+自动外边距
  3. 绝对定位+计算属性
• 不需要知道高度
  1. 绝对定位+tranform：translate
  2. flex布局
  3. 行高，子元素必须是inline或者inline-block
  4. vertical-align
     • 此属性的元素的位置不是针对外框而是同级元素的高度来定位的
     • 可在父级添加一个高度为 100%的子元素提供参考
  5. display:table-cell

自动计算rem基准值

html {
  font-size: calc(100vw / 7.5);
}

js实现rem基准值

(function (doc, win) {
  var docEl = doc.documentElement || doc.body;
  var isIOS = navigator.userAgent.match(/iphone|ipod|ipad/gi);
  var dRatio = win.devicePixelRatio;
  var dpr =
    isIOS && dRatio !== undefined
      ? Math.min(dRatio, 3)
      : dRatio !== undefined
      ? dRatio
      : 1; // 设备像素比devicePixelRatio
  var resizeEvt =
    'orientationchange' in window ? 'orientationchange' : 'resize';
  docEl.dataset.dpr = dpr;

  var recalc = function () {
    // 页面内容可见区域的宽度(兼容各种平台),对于ios设备devicePixelRatio值只可能是1或者2
    // 当width=device-width时，可视区的宽度就是document.documentElement.clientWidth
    // 安卓平台下可见区的宽度：document.body.clientWidth || document.documentElement.clientWidth
    var width = docEl.clientWidth || win.innerWidth;
    // 大于750屏幕限制
    if (width / dpr > 750) {
      width = 750 * dpr;
    }
    docEl.style.fontSize = 100 * (width / 750) + 'px';
  };
  recalc();
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
})(document, window);

美化滚动条

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-image: linear-gradient(135deg, #09f, #3c9);
}

美化input占位符样式

input::-webkit-input-placeholder {
  color: #66f;
}

空载布局：无子元素内容时显示占位元素

<ul class="empty-layout">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
<ul class="empty-layout"></ul>

$empty: 'https://yangzw.vip/img/empty.svg';
.empty-layout {
  overflow: auto;
  width: 200px;
  height: 150px;
  outline: 1px solid #3c9;
  &:empty {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url($empty) no-repeat center/100px auto;
    &::after {
      margin-top: 90px;
      font-weight: bold;
      content: '没钱就没数据';
    }
  }
  li {
    padding: 0 10px;
    height: 30px;
    background-color: #09f;
    line-height: 30px;
    color: #fff;
    &:nth-child(even) {
      background-color: #f90;
    }
  }
}

多格布局

<ul class="multigrid-layout">
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
  <li class="item">
    <img src="https://static.yangzw.vip/codepen/ab-3.jpg" />
  </li>
</ul>

@mixin square($count: 2) {
  $length: calc((100% - #{$count} * 10px) / #{$count});
  width: $length;
  height: $length;
}
.multigrid-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 400px;
  height: 400px;
  li {
    display: flex;
    overflow: hidden;
    justify-content: center;
    margin: 5px;
    background-color: #f0f0f0;
    @include square(3);
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
// 一个元素
.item:only-child {
  border-radius: 10px;
  width: auto;
  max-width: 80%;
  height: auto;
  max-height: 80%;
}

content内容插入

.elem {
  content: 'Hello ' 'CSS'; // 等价于"Hello " "CSS"
  content: 'Hello' attr(data-name); // 与attr()拼接
  content: counter(progress) '%'; // 与counter()拼接
}

attr(data-name)可以捕获元素属性为data-name的属性值，如元素标签为：<h1 data-name="world"></h1>，则attr(data-name)则会得到world

counter方法是一个组合，具体查看counter 方法