简单且重要的东西

每一个页面都需要这几个参数

* {
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
  /* border-box 控制尺寸更加直观，默认是content-box */
  /* width height 实际设置的是内容区域的宽高 */
  /* border-box 包含padding border */
}

颜色的 alpha 通道

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

• 0 表示完全透明
• 1 表示完全不透明

.alpha {
  /* 一个完全透明的颜色 等同于 transparent */
  color: rgba(0, 0, 0, 0);
  /* 一个不完全透明的颜色 等同于rgb */
  color: rgba(0, 0, 0, 1);
  /* 一个半透明的颜色 */
  color: rgba(0, 0, 0, 0.5);
  /* 可以写成rgb(0 0 0 / 50%) */
  /* 可以写成 #000000080  从00-FF */
}

body {
  background: url(./bg.jpg) no-repeat;
}

/* 设置透明度 */

opacity 与 alpha 通道区别

• opacity:0.8; 表示里面所有东西全透明
• background rgba(0, 0, 0, 0.5) 只给背景做透明

尺寸的百分比

• 绝大部分可以书写尺寸的地方都可以用百分比
• 百分比是一个相对单位，其相对于元素的参考系，比如
• 普通元素（没有定位的元素）的参考系为父元素的内容区域
• 绝对（固定）定位的元素的参考系为父元素中第一个定位元素的 padding 区域

常见百分比的情况：

• width 参考系的宽度
• height 参考系的高度
• padding 参考系的宽度
• border 参考系的宽度
• margin 参考系的宽度

参考系的高度受本身宽度影响时，设置无效（父元素高度确定才有效）

最大最小宽高

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

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