css给inline-block设置 vertical-align: middle; 中部对齐给inline-block

一：inline,inline-block 水平方向无法对齐

给inline-block设置 vertical-align: middle; 中部对齐

二：# css 颜色 rgba 转换为十六进制

function hexify(color) {
    var values = color
      .replace(/rgba?\(/, '')
      .replace(/\)/, '')
      .replace(/[\s+]/g, '')
      .split(',');
    var a = parseFloat(values[3] || 1),
        r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
        g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
        b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
    return "#" +
      ("0" + r.toString(16)).slice(-2) +
      ("0" + g.toString(16)).slice(-2) +
      ("0" + b.toString(16)).slice(-2);
  }
  console.log(hexify('rgba(0, 0, 0, 0.05)'))

三：flex

1.flex-shrink

flex-shrink指的是当flex容器空间不足时候，单个元素的收缩比例。
不支持负值，默认值是1，也就是默认所有的flex子项都会收缩。如果设置为0，则表示不收缩，保持原始的宽度。

2.flex-grow

弹性盒子元素如何分配剩余空间
行内块inline-block元素之间出现空白间隙（空白格）

父元素设置font-size：0；子元素如果是文字单独包一层盒子设置font-size

五：字体缩放有一个角标样式的需求 1.跟随字体大小变化而变化的 2.大小为字体的50% 所以用到了缩放功能

display: inline-block;
transform: scale(0.7);

但是缩小的范围依然是有间距的所以用到了

zoom:0.7;

但zoom 的兼容性没那么好火狐浏览器不支持

css

行内块inline-block元素之间出现空白间隙（空白格）