CSS 知识总结分享——常用实战笔记

CSS 知识总结分享——常用实战笔记

---

前言

本文主要记录了作者本人在CSS 实战中常用的内容进行总结归纳（若有更优方案可私聊或评论留言）。

---

- 解决图片失真模糊问题：

image-rendering: -webkit-optimize-contrast;

---

- 英文数字换行：

word-break:break-all;

---

- 限制多少行显示，超出“...”

white-space: break-spaces;
word-break:break-all
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;

---

- 移动端关掉区域需要补充样式

scroll-behavior: smooth;

---

- 移动端适配尺寸

- 占位例图：

链接: https://dummyimage.com/230x130/
链接: https://dummyimage.com/750x300/5e73ff/fff
链接: https://dummyimage.com/750x300/9a5cff/fff
链接: https://dummyimage.com/750x300/5ec7ff/fff

---

- 适配设备信息

链接: https://www.mydevice.io/

scroll-behavior: smooth;

---

- 空格符

 

---

- background-size:cover;等同于img标签的

object-fit: cover;

---

- 全国默哀：小程序变黑白

核心代码
打开你的 app.wxss 文件，在第一行加上

page {
  filter: grayscale(100%);
}

---

- 按钮disabled禁用状态样式

.subscribe-mail .subscribe-mail__dialog__confirm-btn[disabled] {
    box-shadow: none;
    cursor: default;
    opacity: .5;
    filter: grayscale(100%);
}

---

- ios移动端100vh

height: calc(100vh - 66rpx);
height: calc(100vh - 66rpx - constant(safe-area-inset-bottom));
height: calc(100vh - 66rpx - env(safe-area-inset-bottom));

---

- css图片背景主色模糊效果

filter: blur(50px);

---

- 图片禁止点击事件&点击穿透

pointer-events: none;

---

- 鼠标移入图片放大动画

&__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s 0s ease-in-out;
}

&__item:hover {
  img {
    transform: scale(1.1);
  }
}

---

- 版权符号©写法

©

↑↑↑↑↑等同于↑↑↑↑↑

©

---

- 文字描边

text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;

---

- background完整写法：

background: url('imgurl.png') no-repeat center/100% 100%;

---

- 奇偶选择器写法

/* 奇数行 */
div:nth-child(odd){}
/* 偶数行 */
div:nth-child(even){}

---

- transform X轴Y轴合并写法

transform: translate(-50%, -50%);

---

- transform 组合写法

transform: translateY(-50%) scale(0.8);

---

- 兄弟（同级）选择器：" ~ "

.p-indec ~ .footer {
    color: #000;
}

---

- 属性选择器：" [ attributeName ] "

属性选择器​分两类：

• 存在和值属性选择器
  1. [attr]: 包含​attr​属性的​所有元素​
  2. [attr=val]：选择属性​attr​被​赋值为val​的​所有元素​
  3. [attr~=vall]:​仅选择​属性​attr​中，属性值​包含val​的所有元素

• 子串值属性选择器
  1. [attr|=val]:选择​attr​属性的值是​val​或值​以val-开头​的元素
  2. [attr^=val]:选择attr属性的值​以val开头(包括val​)的元素
  3. [attr$=val]:选择attr属性的值​以val结尾（包括val）​元素
  4. [attr*=val]:选择attr属性的值中​包含字符串val​的元素

案例：
将选择HTML页面中所有包含了 alt属性​ 的 img元素 并为其设置CSS样式

img[alt] {
    width: 80px;
    height: 90px;
}

---

- 字体边框、字体边线（思路方法：使用字体阴影（备用存在缺角）+‘-webkit-text-stroke-’(存在火狐浏览器的兼容性问题) ）：如案例下

%text-border {
  text-shadow: 0 2px #0d295f, 2px 0 #0d295f, -2px 0 #0d295f, 0 -2px #0d295f;
}

&__tit {
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  ......

  @extend %text-border;

  &--border {
    -webkit-text-stroke: #0d295f 4px;
    position: absolute;
    z-index: 1;
  }

  &--inner {
    position: relative;
    z-index: 2;
  }
}

---

- 滚动条美化

- 滚动条框样式，如下

&::-webkit-scrollbar {
  height: 5px;
  background-color: #aaa;
}

- 滚动条样式，如下

&::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #000;
}

- 滚动条美化案例

&__project-wrap {
  position: relative;
  margin-bottom: 40px;

  &::-webkit-scrollbar {
    height: 5px;
    background-color: #aaa;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #000;
  }
}

---

- 移动端IOS屏幕100vh高度：

height: calc(100vh - 4.4rem);
height: calc(100vh - 4.4rem + constant(safe-area-inset-bottom));
height: calc(100vh - 4.4rem + env(safe-area-inset-bottom));

或者： https://juejin.cn/post/7130808903939391495

---

- 切角（clip-path）

/* 切左对角 */
clip-path: polygon(6px 0%, 100% 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0% calc(100% - 6px), 0% 6px);
/* 切右对角 */
clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px),0 0);

- 斜切对角

background: #2bcfba;
clip-path: polygon(62px 0%, 100% 0%, 100% 30px, 100% calc(100% - 30px), calc(100% - 62px) 100%, 0 100%, 0% calc(100% - 30px), 0% 30px);

- 斜切对角2

clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

效果图：

---

- 移动端横屏适配（媒体查询）

@media (orientation: landscape) {}

---

- 移动端图片大小必须为偶数

---

- 媒体查询常用尺寸

链接: https://juejin.cn/post/6884042902587047943

---

- 移动端ios常用尺寸：

- 移动端矮屏常用区间：

@media screen and (min-aspect-ratio:375/570) {}

---

微信h5小于iphoneX的宽高比的

/* iphoneX尺寸：375*812 */
@media screen and (min-aspect-ratio:375/723) {
    
}

---

- 帧动画写法案例：

@keyframes penguinAnimation {
  0% { background-position-x: 0; }
  5.26% { background-position-x: -18.5rem; }
  10.53% { background-position-x: -37rem; }
  15.79% { background-position-x: -55.5rem; }
  21.05% { background-position-x: -74rem; }
  26.32% { background-position-x: -92.5rem; }
  31.58% { background-position-x: -111rem; }
  36.84% { background-position-x: -129.5rem; }
  42.11% { background-position-x: -148rem; }
  47.37% { background-position-x: -166.5rem; }
  52.63% { background-position-x: -185rem; }
  57.89% { background-position-x: -203.5rem; }
  63.16% { background-position-x: -222rem; }
  68.42% { background-position-x: -240.5rem; }
  73.68% { background-position-x: -259rem; }
  78.95% { background-position-x: -277.5rem; }
  84.21% { background-position-x: -296rem; }
  89.47% { background-position-x: -314.5rem; }
  94.74% { background-position-x: -333rem; }
  100% { background-position-x: 0; }
}

@keyframes penguinAnimation {
  0% { background-position-x: 0; }
  100% { background-position-x: -333rem; }
}


@keyframes penguinAnimation {
  0% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat 0 0/cover; }
  5.26% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -18.5rem 0/cover; }
  10.53% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -37rem 0/cover; }
  15.79% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -55.5rem 0/cover; }
  21.05% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -74rem 0/cover; }
  26.32% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -92.5rem 0/cover; }
  31.58% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -111rem 0/cover; }
  36.84% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -129.5rem 0/cover; }
  42.11% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -148rem 0/cover; }
  47.37% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -166.5rem 0/cover; }
  52.63% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -185rem 0/cover; }
  57.89% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -203.5rem 0/cover; }
  63.16% { bbackground: url("@/assets/images/dr_penguin_sprites.png") no-repeat -222rem 0/cover; }
  68.42% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -240.5rem 0/cover; }
  73.68% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -259rem 0/cover; }
  78.95% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -277.5rem 0/cover; }
  84.21% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -296rem 0/cover; }
  89.47% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -314.5rem 0/cover; }
  94.74% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat -333rem 0/cover; }
  100% { background: url("@/assets/images/dr_penguin_sprites.png") no-repeat 0 0/cover; }
}

---

持续更新中......

updating...

---