CSS_一些问题
时间：2023-03-30 23:11:14
CSS
包含块定位参考系或定位坐标参考系。一旦元素定义了定位属性（相对、绝对、固定），它就具有包含块的属性。被包含的定位元素会使用包含块作为坐标系定位和调整原则：元素框的位置和大小有时是相对于特定矩形计算的，称为元素的包含块。用户代理选择根元素作为包含块。块（称为初始包含块）对于其他元素，除非该元素使用绝对定位，否则包含块由最近的块级祖先元素的框的内容边界组成。如果元素具有属性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元素的数量需要合理使用）：消耗大量设备电量，降低电池寿命Thinborders为宽度等于1个本地设备像素的元素提供边框，可以显得非常清晰清晰。text
.hairline-border{box-shadow:0001px;}@media(min-resolution:2dppx){.hairline-border{box-shadow:0000.5像素；}}@media(min-resolution:3dppx){.hairline-border{box-shadow:0000.33333333px;}}@media(min-resolution:4dppx){.hairline-border{box-shadow:0000.25px;}}box-shadow，当只使用扩展时，添加一个可以使用子像素*的伪边框。使用@media(min-resolution:...)检查设备像素比（1dppx等于96DPI），将box-shadow的分布设置为Chrome不支持的1/dppx子像素值边框。Safari不支持box-shadow上的亚像素值。Firefox对两者都支持亚像素值。悬停下划线动画当文本悬停在上方时创建动画下划线效果。
texttext.hover{display:inline-block;位置：相对；颜色：#0087ca;}.hover::after{内容：'';位置：绝对；宽度：100%；转换：scaleX（0）；高度：2px；底部：0；左：0；背景色：#0087ca；变换原点：右下角；transition:transform0.25sease-out;}.hover:hover::after{transform:scaleX(1);transform-origin:bottomleft;}Ringspinner创建一个环形微调器，可用于指示内容加载 @keyframesdonut-spin{0%{transform:rotate(0deg);}100%{变换：旋转（360deg）；}}.donut{显示：内联块；border:4pxsolidrgba(0,0,0,0.1);左边框颜色：#7983ff；边界半径：50%；宽度：30px；高度：30px；animation:donut-spin1.2slinearinfinite;}弹跳加载中的弹跳加载动画
@keyframesbouncing-loader{from{opacity:1;转形式：翻译Y（0）；}至{不透明度：0.1；转换：translateY(-1rem)；}}.bouncing-loader{显示：flex;调整内容：居中；}.bouncing-loader>div{width:1rem;高度：1rem；保证金：3rem0.2rem；背景：#8385aa；边界半径：50%；animation:bouncing-loader0.6s无限交替;}.bouncing-loader>div:nth-child(2){animation-delay:0.2s;}.bouncing-loader>div:nth-child(3){animation-delay:0.4s;}自定义文本选择改变文本选择的样式::selection{background:aquamarine;颜色：黑色；}.custom-text-selection::selection{背景：深粉色；颜色：白色；}截断文本.truncate-text{溢出：隐藏；空白：nowrap；文本溢出：省略号；width:200px;}evenlydistributed子元素在父元素中均匀分布子元素
