wordpress官方响应式主题关键词优化按天计费

1.animation-fill-mode: backwards; //避免了在动画开始前元素的突然显现，动画必要。

2.用rem响应式字体大小，可以在html样式定义font-size=?(例10px，62.5%(100%是16px))。然后样式就可以用rem代替px。

3.color: transparent;: 这行代码将文本颜色设置为透明。结合background-clip: text;，这导致文本本身不可见，但文本的轮廓（或形状）被背景图像（渐变）填充。4.clip-path: polygon(0 0,100% 0,100% 75vh,0 100%);clip-path属性用于定义一个元素的可显示区域的形状。定义了一个多边形剪辑路径，这个多边形将用于裁剪元素的内容，仅显示该多边形区域内的部分。这里的polygon函数定义了多边形的顶点，每个顶点由一对坐标值（x, y）表示。

5.图标icon实质上是字体。

6.

.& {

    float: left;

    width: calc((100% - 3*6rem) /4);  //  3指的是:有3个margin-right: 6rem; 6就是下面右边距。4是要平均分成4份。

  }

  .&:not(:last-child) {

    margin-right: 6rem;

  }

7.变形-扭曲-倾斜transform:skey(x,y)与x轴y轴倾斜的角度；

旋转：transform:rotate(xx deg)旋转了多少xx度；

缩放：transform:scale(x,y)与x，y成倍数关系；

位移：transform:translate(px)

8.父类row，子类col，如果row类包含4个col子类，让它们并排，子类用浮动，那么父类需要清除浮动。这是清除浮动的方法之一：

.row::after {

  content: "";

  display: table;

  clear: both;

}

9.最大宽度和自动边距共同使用可以让左右两边留有边距。max-width =114rem和 margin: 0 auto; 这两个属性共同工作，使得 .row 类元素在不超过 114rem 的情况下，能够在页面中居中显示，并且在其两侧留有边距。如果没有设置 max-width，或者 max-width 的值设置得过大，元素可能会占满整个父容器的宽度，从而失去两侧的边距。

10.背面可见性：backface-visibility: hidden;这样就可以自然的反转，不会看到隐藏到后面的元素，反转卡片必要。

11.视图：perspective: 150rem;  -moz-perspective: 150rem（1500px）;越小越奇怪，大的反而自然，这个可以让我们看的更加有空间，不加的话反转就像是拉伸一样。

 12：卡片反转：先写一个父类cart，和子类cart-side，cart-side的两个子类，代表正反两面，cart-side-font和cart-side-back,反面元素back有以y轴旋转-180deg（-180deg这样才会连贯，不然不连贯，看着很别扭）的样式，然后在.cart:hover .cart-side {transformY:rotate(180deg)},最后.cart:hover .cart-side-back {transformY:rotate(0)}。要想让两个卡片重叠在一起，需要用绝对定位，使用绝对定位离不开top=0,right=0(还有其他)。再将宽度百分比占满就可以了。配合上视图perspective和背面可见性backface-visibility:hidde。

13.当子元素使用了绝对定位，子元素无法撑开父元素，现在也不能用纯css来解决父元素坍塌的问题，所以我们用给父元素写一个和子元素一样高度（min-height），把高度写死。

14.BEM命名法：

• Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

__ 双下划线：双下划线用来连接块和块的子元素

--双中划线：双中划线用来描述一个块或者块的子元素的一种状态

15.背景和元素的混合：background-blend-mode:screen; 属性允许你指定元素背景图像和背景颜色之间的混合方式。这个属性可以应用于任何设置了背景图像和背景颜色的元素上。screen 是这个属性可以取的值之一，它表示背景图像和背景颜色将以“屏幕”模式混合。这个可以不用ps弄好然后导出来就能完成这个功能！

16.有图片的话，background-image,配合着background-size='cover',父元素也要定义overflow:hidden;（有图片比加，为了响应式）

17.overflow:hidden; 溢出隐藏。当我们的子元素引入background-image图片时，我们对父元素进行border-radius时有图片的圆角并不会改变，子元素的边框将保持其原始的直角形状。当我们用overflow:hidden将超过父元素边框的隐藏起来，就可以实现跟父元素联动了。

18.用vue将图片渲染，要使用import导入的形式，不然图片渲染不到浏览器上。

如果这样，没有用import导入，不会显示图片。

• 如果使用的是 Vue CLI 创建的项目，通常静态资源应该放在 public 文件夹下，或者通过 import 语句引入图片作为模块。

  解决方案：

• 使用 import 语句引入图片，而不是直接使用路径字符串：

19.怎么让文字（slogan类）位于轮播图的前面：可以在实现轮播图的类为相对定位，文字的类为绝对定位，.slogan 的位置将独立于其他轮播项。通过使用 top、left、right 和 bottom 属性，以及 transform 属性（用于居中），可以精确地控制 .slogan 的位置。z-index 属性用于控制元素的堆叠顺序。再给.slogan一个z-index就可以了。

20.点击滑动到页面指定位置：点击的定义@click，指定位置定义id,然后在script中定义一个点击的函数。.scrollIntoView({ behavior: 'smooth' })：这是Element对象的一个方法，用于将元素的滚动条滚动到该元素，使其位于可视区域内。behavior属性定义滚动行为。在这个例子中，它被设置为'smooth'，意味着滚动将会是一个平滑的动画，而不是瞬间跳转。这对于提升用户体验非常有帮助，因为它避免了页面内容的突然移动。

21.文字超过两行就显示省略号：

<template><span class="show-item-box-introduction">联想拯救者,几乎全新，因为家里又买了一个多余了，需要出售，可小刀。</span>
</template><style scoped>
.show-item-box-introduction {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;width: 100%; /* 或者设置一个具体的宽度，如200px */line-height: 1.5; /* 可以根据需要调整行高 */max-height: 3em; /* max-height应等于行高乘以行数，这里是1.5em*2=3em */
}
</style>

display: -webkit-box、-webkit-line-clamp: 2和-webkit-box-orient: vertical，它们分别用于设置弹性盒子布局、限制显示的行数和定义盒子的子元素垂直排列。max-height属性被设置为3em，这是基于line-height为1.5和-webkit-line-clamp为2的计算结果。这样可以确保当文本超过两行时，多余的部分会被隐藏，并显示省略号。