CSS_一些问题

包含块

定位参考框或者定位坐标参考系.

元素一旦定义了定位属性(相对，绝对，固定)，就具有了包含块性质

所包含的定位元素都将以该包含块为坐标系进行定位和调整

原理：

一个元素盒子的位置和大小有时候是通过相对于一个特定的长方形来计算的，这个长方形就称之为元素的containing block(包含块)

• 用户代理选择根元素作为包含块（称之为初始 containing block）
• 对于其它元素，除非元素使用的是绝对位置，包含块由最近的块级祖先元素盒子的内容边界组成
• 如果元素有属性position: fixed，包含块由视口决定
• 如果元素有属性position: absolute，包含块由最近的position不是static 的祖先建立(子绝父相，子绝父绝)
• 如果没有祖先，根元素盒子的内容边界确定为包含块

使用CSS3开启GPU硬件

解决Chrome动画"卡顿"的办法：

为动画DOM元素添加CSS3样式-webkit-transfrom: transition3d(0, 0, 0)或-webkit-transfrom: translateZ(0) 这两个属性都会开启GPU硬件加速模式.

原理: 为了渲染3D模式. (设置值为0后，并没有真正使用3D效果，但浏览器却因此开启GPU硬件加速模式)

开启GPU硬件加速可能触发的问题：
通过-webkit-transform: transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以添加属性尝试解决：

-webkit-backface-visibility: hidden // 背面元素是否可见
-webkit-perspective: 1000 // 合适的景深数值

过度使用产生的结果（需要合理使用DOM元素数量）：
大量消耗设备电量，降低电池寿命

细线边框

为元素提供一个边框，宽度等于1个本地设备像素，可以显得非常清晰和清晰。

<div class="hairline-border">text</div>

---

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

box-shadow，当仅使用扩展时，添加可以使用子像素*的伪边框。
使用@media (min-resolution: ...) 为了检查器件像素比(1dppx 等于96 DPI )，将box-shadow的分布设置为1/dppx

Chrome不支持上的子像素值border 。safari不支持上的子像素值box-shadow 。Firefox支持两者的子像素值。

悬停下划线动画

当文本悬停在上面时创建动画下划线效果。

<p class="hover">文本文本</p>

---

.hover {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

环形旋转器

创建可用于指示内容加载的圆环微调器

<div class="donut"></div>

---

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

弹跳加载中

反弹加载程序动画

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

---

@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

自定义文本选择

更改文本选择的样式

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

截断文本

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

均匀分布的子元素

在父元素中均匀分布子元素。

<div class="evenly">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

---

.evenly {
  display: flex;
  justify-content: space-between;
}