几个高效的全局 css 样式设置解君愁

防脱发神器

一图胜千言

使用border-box控制尺寸更加直观，因此，很多网站都会加入下面的代码

1
2
3
4
5

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

颜色的 alpha 通道

颜色的 alpha 通道标识了色彩的透明度，它是一个 0~1 之间的取值，0 标识完全透明，1 标识完全不透明

在 css 中使用 rgba 可以为颜色添加 alpha 通道

1
2
3
4
5
6
7
8

.alpha {
  /* 一个完全透明的颜色，等同于 transparent */
  color: rgba(0, 0, 0, 0);
  /* 一个完全不透明的颜色，等同于rgb */
  color: rgba(0, 0, 0, 1);
  /* 一个半透明的颜色 */
  color: rgba(0, 0, 0, 0.5);
}

rgba 还可以有多种书写方式，例如rgba(0, 0, 0, 0.5)还可以写为：

• rgb(0 0 0 / 50%)
• #00000080

尺寸的百分比

绝大部分可以书写尺寸的地方，都可以书写百分比

百分比是一个相对单位，其相对于元素的参考系，比如：

• 普通元素的参考系为父元素的内容区域
• 绝对（固定）定位元素的参考系为父元素中第一个定位元素的 padding 区域

下面罗列常见的百分比情况

最大最小宽高

• 最大宽度：max-width，最大高度：max-height
• 最小宽度：min-width，最小高度：min-height

当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。

在实际开发中，我们通常为 PC 端的页面设置一个最小宽度，通常此宽度为设计稿的宽度

1
2
3

html {
  min-width: 1226px;
}

又或者，我们会为页面中的所有图片设置一个最大宽度，让其不至于超过容器

1
2
3

img {
  max-width: 100%;
}

字体图标

MDN font-face 指令

css3 新增了font-face指令，该指令可以让我们加载网络字体

其最常见的应用就是字体图标

字体图标本质上是文字，即通过color设置颜色，通过font-size设置尺寸

国内使用最多的字体图标平台是阿里巴巴矢量图标库

登录平台后即可免费使用其所有字体图标

图像内容适应

MDN 详细文档

css3 属性object-fit可以控制多媒体内容和与元素的适应方式，通常应用在img或video元素中

一图胜千言

下图中的所有img元素均被固定了宽高，溢出 img 的部分实际上均不会显示

视口单位

css3 支持使用vw和vh作为单位，分别表示视口宽度和视口高度

例如1vh表示视口高度的1%，100vw表示视口宽度的100%

伪元素选择器

通过::before和::after选择器，可以通过 css 给元素生成两个子元素

使用伪元素可以避免在 HTML 中使用过多的空元素

伪元素必须要有content属性，否则不能生效，如果不需要有元素内容，设置content:''

平滑滚动

MDN 详细文档

使用scroll-behavior: smooth，可以让滚动更加丝滑

参见 MDN 效果即可