常见知识点

css 实现骰子的“3”

<div class="fa">
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
</div>

.fa {
  background-color: #fff;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.son {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px brown solid;
  background-color: brown;
  text-align: center;
  margin: 0 auto;
}
.fa .son:nth-child(2) {
  align-self: center;
}
.fa .son:nth-child(3) {
  align-self: flex-end;
}

line-height 继承的坑

• 父元素 line-height 为 px；子元素 line-height 也是 px；
• 父元素 line-height 为倍数；子元素 line-height 为当前子元素 font-size * 倍数；
• 父元素 line-height 为%；子元素 line-height 为当前父元素 font-size * %；

实现 0.5px 边框

1. 给容器内设置伪元素，设置绝对定位，宽、高是 200%，边框是 1px，然后使用 transform:scale(0.5)让伪元素缩小原来的一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有 0.5px。这种方法兼容性最好，4 个边框都能一次性设置，能正常展示圆角，推荐使用。
2. 给容器设置伪元素，设置绝对定位，高度为 1px，背景图为线性渐变，一半有颜色，一半透明。视觉上宽度只有 0.5px。这种方法适合设置一条边框，没法展示圆角
3. 用阴影代替边框，设置阴影 box-shadow:0005px #000 使用方便，能正常展示圆角，兼容性一般。
4. 直接设置 border-width: 0.5px;使用方便，但兼容性不好

padidng-top\margin-top 的特殊性

子元素的 padding-top margin-top 设置为百分数时，是相对于父元素的宽幅的百分比，不是高度

fixed

一提到 position:fixed，自然而然就会想到：相对于浏览器窗口进行定位。

但其实这是不准确的。如果说父元素设置了 transform，那么设置了 position:fixed 的元素将相对于父元素定位，否则，相对于浏览器窗口进行定位。

百分比的继承性

宽高的百分比

宽度和高度设置为百分数，是相对于父元素的宽度和高度来确定。

子元素为浮动元素时，也是对于父元素的宽度和高度来确定。

子元素为定位元素时，是相对于其包裹的外层绝对定位元素的，如果父级没有绝对定位元素，最终相对于 body 的宽度和高度。

• max-width 和 max-width

当父元素宽度设置为 max-width 或者 max-width 时，子元素设置宽度为百分数时，可以继承父元素的宽度。

• max-height 和 max-height

当父元素宽度设置为 max-height 或者 max-height 时，子元素设置高度为百分数时，不可以继承父元素的高度。子元素的高度相当于auto。

内边距的百分比

padding 设置为百分比时，不止left right，还包括top bottom，都是相对于父元素的宽度（宽度为百分数也可以）来计算的。

外边距的百分比

margin 设置为百分比时，不止left right，还包括top bottom，都是相对于父元素的宽度（宽度为百分数也可以）来计算的。