一些 CSS 技巧

之前看 CSS Secret 做的一些笔记,各种奇技淫巧🙈

# 引言

# 规范从最初启动到最终成熟经过6个阶段

  1. 编辑草案 ED
  2. 首个公开工作草案 FPWD
  3. 工作草案 WD:浏览器早期实现,经常修改
  4. 候选推荐规范 CR:相对稳定适合实现和测试
  5. 提名推荐规范 PR:修改的最后机会,一般很少修改
  6. 正式推荐规范 REC

# CSS 编码技巧

  1. 尽量减少代码重复

    尽量使用相对值而不是绝对值,比如 em, rem, line-height 使用比例, currentColor, inherit...

  2. 相信你的眼睛而不是数字

    人的眼睛并不是完美的输入设备,有时候精准的尺寸看起来并不是你想要的效果。比如同样尺寸的圆和正方形,圆看起来会小一些。

  3. 使用真正的响应式设计

    避免使用 media query 而应该从设计和相对值入手。比如使用 vw, vh, vmin, vmax, max-width, flex, 百分比...

  4. 合理使用简写

    在没有歧义的情况下尽量使用简写,有时候为了 DRY 也会展开来写。

  5. 预处理器

    CSS 和 ES6 越来越强大的情况下还有必要么。。。

# 背景与边框

# 半透明边框

默认情况下背景会延伸到边框所在区域的下层,background-clip 默认值是 border-box 修改为 padding-box 让浏览器把背景从内边缘切掉。

{
  border: 10px solid rgba(0, 0, 0, .5);
  background: white;
  background-clip: padding-box;
}

# 多重边框

使用 box-shadow 一层一层叠加上去。

{
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}

如果只需要2重的话也可以使用 outline 实现。

{
  background: yellowgreen;
  border: 10px solid #655;
  outline: 5px solid deeppink;
}

# 灵活的背景定位

可以使用 background-position 的扩展语法,即 top 等关键字后加偏移量。background-origin 用于改变 background-position 使用需要的边界——每个元素都有3个矩形边界。

{
  background: url(code-pirate.svg) no-repeat #58a;
  background-position: right 20px bottom 10px;
  /* background-position: calc(100% - 20px) calc(100% - 10px); */
}

# 形状

# 自适应椭圆

可以单独指定水平半径和垂直半径,可以接受百分比。

因为 border-radius 是对元素的 border box 进行圆角处理的。

{
  border-radius: 50% / 40%;
}

# 平行四边形按钮

可以利用伪元素生成一个变形的背景

.button::before {
  content: '';
  background: yellowgreen;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transform: skewX(-45deg);
  z-index: -1;
}

# 其他

# 伪元素

:first-line 用于设置首行字体样式

:first-letter 用于设置首字母样式

:before:later 用于在元素前后插入内容

# 定位

static 默认值。正常流,忽略 top, bottom, left, right 或者 z-index 声明。

relative 正常流的相对偏移位置。

absolute 相对于第一个非 static 定位的父元素进行定位。

fixed 相对于浏览器窗口进行定位。