[css] 举例说明你知道的css技巧有哪些？

[css] 举例说明你知道的css技巧有哪些？

/* 等比例容器 */
.ratio { position: relative; display: block; }
.ratio:before { content: ''; padding-top: 100%; float: left; }
.ratio::after { content: ''; display: block; clear: both; }

/* 非表单元素也适用的 disabled */
.disabled {
  pointer-events: none;
  user-select: none;
  &.gray { filter: grayscale(1); }
}

/* 点击 label 触发隐藏的 file 表单 */
label.form-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  & > input[type="file"] { position: absolute; left: -999em; }
}

/* 子元素之间轻松 10px 空隙 */
.gap-right-10 > :not(:last-child) {
  margin-right: 10px;
}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题