实用技巧

box-sizing: border-box

box-sizing: border-box是 CSS 中的一个属性，用于设置元素的盒模型。它将元素的 width 和 height 包括 padding 和 border ，而不是只包括元素的内容。

box-sizing: border-box

使用 box-sizing: border-box 控制尺寸会更加直观，因此，很多网页布局都使用这个属性。

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

不透明度（Alpha 通道）

颜色的alpha通道，表示颜色的不透明度。它是一个0到1之间的数值，0表示完全透明，1表示完全不透明。

在CSS中，可以使用rgba()函数来设置颜色的不透明度。

RGBA 中的四个参数分别代表：

参数	描述	值
R (Red)	红色值	0-255
G (Green)	绿色值	0-255
B (Blue)	蓝色值	0-255
A (Alpha)	不透明度	0-1 之间的小数

0 表示完全透明 1 表示完全不透明 0.5 表示 50% 的不透明度

不透明度

background-color: rgba(0, 0, 0, 0); // 完全透明

尺寸百分比

许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。但是，绝对（固定）尺寸的参考系为父对象中第一个定位元素的padding区域

尺寸百分比

最大最小宽高

最大宽度	max-width
最小宽度	min-width
最大高度	max-height
最小高度	min-height

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

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

min-width: 1920px;

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

img {
  max-width: 100%;
}