CSS_一些问题

wuyumin 发布于2019-08-30 15:53 / 3123人阅读

摘要：，当仅使用扩展时，添加可以使用子像素的伪边框。文本文本环形旋转器创建可用于指示内容加载的圆环微调器弹跳加载中反弹加载程序动画自定义文本选择更改文本选择的样式截断文本均匀分布的子元素在父元素中均匀分布子元素。

包含块

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

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

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

原理：

一个元素盒子的位置和大小有时候是通过相对于一个特定的长方形来计算的，这个长方形就称之为元素的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个本地设备像素，可以显得非常清晰和清晰。

text

.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支持两者的子像素值。

悬停下划线动画

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

文本文本

.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;
}

环形旋转器

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

@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;
}

弹跳加载中

反弹加载程序动画

@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;
}

均匀分布的子元素

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


  Item1
  Item2
  Item3

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116630.html

你的 css 也需要模块化

摘要：局部样式通过，部分解决的模块化的问题。全局样式的特点，导致难以维护，所以需要一种局部样式的解决方案。也就是彻底的模块化，进来的模块，需要隐藏自己的内部作用域。 css 局部样式 sass、less 通过 @import ，部分解决的 css 模块化的问题。由于 css 是全局的，在被引入的文件和当前文件出现重名的情况下，前者样式就会被后者覆盖。在引入一些公用组件，或者多人协作开发同一...

Pikachu 2019-08-30 13:20 评论0 收藏0
CSS Modules入门教程

摘要：预处理器最大的好处就是可以支持模块引入，用的方式来编写，解决了部分混乱以及代码冗余的问题，但是也不能完全避免。为什么引入CSS Modules 或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点：全局样式冲突过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写自己的样式，例如a.css、b.css，看...

suxier 2019-04-23 13:26 评论0 收藏0
PostCSS 是个什么鬼东西？

摘要：参考的文章最权威的初认识一个不错的东西理解等插件解析技术大漠的系列文章，应用型很强，推荐一个年龄差不多的开发者的解释一篇稍微理论化解释的文章一个开发模式简单的优劣比较大家也可以直接阅读我的博客前言最近大漠前辈在群里发关于PostCSS的系列文章，但是耗子姐姐又说看了有点云里雾里的感觉，所以这篇文章将按一个思考的角度来理解一下 PostCSS 到底是一个什么东西。 showImg(h...

IamDLY 2019-08-28 18:19 评论0 收藏0
CSS Modules

摘要：为什么引入全局样式冲突进行打包时，将所有文件导入到入口文件中，样式也会统一加载到入口中，根据的规则，后面的样式会覆盖掉前面的样式声明，造成全局样式的覆盖问题。 CSS Modules 为什么引入CSS Modules （1）全局样式冲突 webpack进行打包时，将所有js文件导入到入口App.js文件中，样式也会统一加载到入口中，根据css的layout规则，后面的样式会覆盖掉前...

gecko23 2019-08-30 11:14 评论0 收藏0
CSS Modules

摘要：为什么引入全局样式冲突进行打包时，将所有文件导入到入口文件中，样式也会统一加载到入口中，根据的规则，后面的样式会覆盖掉前面的样式声明，造成全局样式的覆盖问题。 CSS Modules 为什么引入CSS Modules （1）全局样式冲突 webpack进行打包时，将所有js文件导入到入口App.js文件中，样式也会统一加载到入口中，根据css的layout规则，后面的样式会覆盖掉前...

wangdai 2019-08-23 18:14 评论0 收藏0
什么是CSS Modules ？我们为什么需要他们

摘要：我们将去探索它的目的和主旨。这到底是什么呢我们为什么要这么做呢我们很快就进行介绍。我们不需要人为处理和文件。我们不写纯，我们需要在一个类似这样的文件中取写我们所有的标签。这就是样式也有作用域的原因。换句话说消除了特殊性问题。原文地址：https://css-tricks.com/css-mo...最近我对CSS Modules比较好奇。如果你曾经听说过他们，那么这篇博客正适合你。我们...

dongfangyiyu 2019-08-29 15:15 评论0 收藏0