跳到主要内容

CSS3

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 的元素将相对于父元素定位，否则，相对于浏览器窗口进行定位。

清除浮动​

    1. clear 属性清除浮动。clear:left|right|both

步骤：在浮动元素的后面直接添加一个空标签【必须是块级元素】

<div class="clearfix"></div>
.clearfix {
  clear: both;
}
    1. 使用伪元素清除浮动：让浮动元素的父元素调用；请不要设置完浮动就清除浮动，要满足两个条件：
    • 如果父元素没有设置高度；
    • 该父元素种的所有子元素都设置了浮动
.clear::after {
  content: '';
  display: block;
  clear: both;
  height: 0px;
  line-height: 0px;
  visibility: hidden;
}
.clear {
  zoom: 1;
}
    1. 给父元素设置 overflow: hidden，可以将超出父元素的部分进行隐藏。