适合收藏，一些CSS优化技巧！

当各种框架以及复杂的 JS 知识开始充斥着我们的工作环境时。谁还能够记得，以 CSS 来构建更加良好的用户体验，也是前端的一个重要组成部分。所以说，今天咱们就来看看 css 的优化方案-终极合集。一共一百条，有点多，适合收藏

1.text-justify

text-justify属性指定如何分配额外的空间，以便充分利用容器的宽度。

代码语言：javascript复制

p {
    text-align: justify;
    text-justify: inter-word;
}

2.line-break

line-break属性控制文本换行行为，确保在指定的断点处进行断行。

代码语言：javascript复制

p {
    line-break: anywhere;
}

3.hanging-punctuation

hanging-punctuation属性控制标点符号是否在行框之外悬挂，以提高排版的美观度和可读性。

代码语言：javascript复制

p {
    hanging-punctuation: last allow-end;
}

4.counter-set

counter-set属性在使用counter-reset创建的计数器值基础上，显式设置一个新的值。

代码语言：javascript复制

ol {
    counter-set: section 1;
}

5.background-origin

background-origin属性确定背景图片的起始位置，影响背景图片与边框的相对位置。

代码语言：javascript复制

.element {
    background-image: url('image.jpg');
    background-origin: content-box;
}

6.text-orientation

text-orientation属性控制文本的方向，适用于纵向文本和日文排版等情况。

代码语言：javascript复制

.vertical-text {
    text-orientation: sideways-right;
}

7.text-emphasis

text-emphasis属性为文本设置强调标志，用于提高关键字的可读性。

代码语言：javascript复制

em {
    text-emphasis: filled circle;
}

8.text-decoration-line

text-decoration-line属性指定要绘制的装饰线的类型，可用于单独控制上划线、下划线、删除线等。

代码语言：javascript复制

a {
    text-decoration-line: underline overline;
}

9.line-gap

line-gap属性定义了元素的行间距，可以为文字和其他行内元素提供更大的空间。

代码语言：javascript复制

p {
    line-gap: 1.5;
}

10.contain-intrinsic-size

contain-intrinsic-size属性定义了内联大小计算函数的大小，实现更精确的布局控制。

代码语言：javascript复制

img {
    contain-intrinsic-size: 200px 300px;
}

11.启动平滑滚动

添加scroll-behavior：smooth到元素中，使整个页面能够平滑滚动。

代码语言：javascript复制

html{  
    scroll-behavior: smooth;  
  }

12.链接的属性选择器

此选择器以href属性以“https”开头的链接为目标。

代码语言：javascript复制

a[href^="https"] {
    color: blue;
}

13. ~用于合并节点

选择作为

同级元素的所有元素。 h2 ~ p { color: blue; }

14. :not()伪类

此选择器将样式应用于不具有类“Special”的 li。

代码语言：javascript复制

li:not(.special) {
    font-style: italic;
}

15. 响应式排版的视窗单位 vw

使用视区单位(vw, vh, vmin, vmax)可以使字体大小与视区大小相对应。

代码语言：javascript复制

h1 {
    font-size: 5vw;
}

:empty 对于空元素此选择器以空的

元素为目标并隐藏它们。

代码语言：javascript复制

p:empty {
display: none;
}

17. 自定义特性(变量)

可以定义和使用自定义特性，以便更轻松地创建主题和进行维护。

代码语言：javascript复制

:root {
    --main-color: #3498db;
}

h1 {
    color: var(--main-color);
}

18. Object-fit 图像控件的适配性

object-fit 控制替换元素(如 <img> )的内容应该如何调整大小。

代码语言：javascript复制

img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

19. 简化布局的网格

Css网格提供了一种功能强大的方式来以更直接的方式创建布局。

代码语言：javascript复制

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

20. :focus-within 伪类

如果一个元素包含任何带有:focus的子元素，则:focus-Win会选择该元素。

代码语言：javascript复制

form:focus-within {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

21. 使用Flexbox垂直居中

使用FlexBox可轻松地将内容在容器中水平和垂直居中。

代码语言：javascript复制

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

22. 自定义选定内容的突出显示颜色

自定义在网页上选择文本时的突出显示颜色。

代码语言：javascript复制

::selection {
    background-color: #ffcc00;
    color: #333;
}.

23. 设置占位符文本的样式

设置输入字段内占位符文本的样式。

代码语言：javascript复制

::placeholder {
    color: #999;
    font-style: italic;
}

24. 渐变边界

使用Backback-Clip属性创建渐变边框。

代码语言：javascript复制

.element {
    border: 2px solid transparent;
    background-clip: padding-box;
    background-image: linear-gradient(to right, red, blue);
}

25. 使用vw实现可变字体大小

根据视口宽度调整字体大小，实现更加响应式的排版。

代码语言：javascript复制

body {
    font-size: calc(16px   1vw);
}

26. 使用锥形渐变创建多彩元素

利用锥形渐变创建丰富多彩且动态的背景。

代码语言：javascript复制

.element {
    background: conic-gradient(#ff5733, #33ff57, #5733ff);
}

27. 使用clamp()函数实现响应式文本

使用clamp()函数设置字体大小的范围，确保在不同屏幕尺寸下的可读性。

代码语言：javascript复制

.text {
    font-size: clamp(16px, 4vw, 24px);
}

28. 使用font-display: swap;优化字体加载

使用font-display: swap;属性提高网页字体性能，让自定义字体加载时显示备用字体。

代码语言：javascript复制

@font-face {
    font-family: 'YourFont';
    src: url('your-font.woff2') format('woff2');
    font-display: swap;
}

29. 自定义滚动吸附点

为了实现更顺畅的滚动体验，特别是在图库或滑块中，实现自定义滚动吸附点。

代码语言：javascript复制

.scroll-container {
    scroll-snap-type: y mandatory;
}

.scroll-item {
    scroll-snap-align: start;
}

30. 使用字体变体设置进行可变字体样式

利用可变字体和font-variation-settings属性对字体的粗细、样式等进行精细调节。

代码语言：javascript复制

.text {
    font-family: 'YourVariableFont', sans-serif;
    font-variation-settings: 'wght' 500, 'ital' 1;
}

31. 自定义下划线样式

使用border-bottom和text-decoration的组合来自定义链接的下划线样式。

代码语言：javascript复制

a {
    text-decoration: none;
    border-bottom: 1px solid #3498db;
}

32. 隐藏无障碍文本

使用class sr-only来在视觉上隐藏元素，但保持其对屏幕阅读器的可访问性。

代码语言：javascript复制

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

33. 保持元素纵横比

通过使用padding来保持元素（如图片或视频）的纵横比。

代码语言：javascript复制

.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 根据需要调整 */
}

.aspect-ratio-box > iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

34. 选择偶数和奇数元素

使用:nth-child伪类来为交替元素设置样式。

代码语言：javascript复制

li:nth-child(even) {
    background-color: #f2f2f2;
}

li:nth-child(odd) {
    background-color: #e6e6e6;
}

35. CSS计数器

使用counter-reset和counter-increment属性在列表中创建自动编号。

代码语言：javascript复制

ol {
    counter-reset: item;
}

li {
    counter-increment: item;
}

li::before {
    content: counter(item) ". ";
}

36. 多重背景图片

使用不同属性为元素应用多个背景图片。

代码语言：javascript复制

.bg {
    background-image: url('image1.jpg'), url('image2.jpg');
    background-position: top left, bottom right;
    background-repeat: no-repeat, repeat-x;
}

37. 优化文本流畅性的连字符

通过使用hyphens属性允许自动连字符以提高文本的可读性。

代码语言：javascript复制

p {
    hyphens: auto;
}

38. 使用CSS变量进行动态样式

利用CSS变量创建动态且可重用的样式。

代码语言：javascript复制

:root {
    --main-color: #3498db;
}

.element {
    color: var(--main-color);
}

39. 键盘导航的焦点样式

改善焦点样式以提高键盘导航和可访问性。

代码语言：javascript复制

:focus {
    outline: 2px solid #27ae60;
}

40. 平滑渐变过渡

为渐变背景应用平滑过渡效果，增强视觉效果。

代码语言：javascript复制

.gradient-box {
    background: linear-gradient(45deg, #3498db, #2ecc71);
    transition: background 0.5s ease;
}

.gradient-box:hover {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
}

41. 文本描边效果

为文本添加描边，产生独特的视觉效果。

代码语言：javascript复制

h1 {
    color: #3498db;
    -webkit-text-stroke: 2px #2c3e50;
}

42. 纯CSS汉堡菜单

创建一个简单的汉堡菜单，无需使用JavaScript。

代码语言：javascript复制

.menu-toggle {
    display: none;
}

.menu-toggle:checked   nav {
    display: block;
}
/* 在这里添加汉堡菜单图标和菜单样式 */

43. CSS :is()选择器

使用:is()伪类简化复杂的选择器。

代码语言：javascript复制

:is(h1, h2, h3) {
    color: blue;
}

44. CSS变量中的计算

在CSS变量中进行计算，实现动态样式。

代码语言：javascript复制

:root {
    --base-size: 16px;
    --header-size: calc(var(--base-size) * 2);
}

h1 {
    font-size: var(--header-size);
}

45. attr()函数用于内容

使用attr ()函数检索和显示属性值。

代码语言：javascript复制

div::before {
    content: attr(data-custom-content);
}

46. CSS遮罩效果

为图像应用遮罩，创造出独特的效果。

代码语言：javascript复制

.masked-image {
    mask: url(mask.svg);
    mask-size: cover;
}

47. 混合模式

尝试使用混合模式创建有趣的色彩效果。

代码语言：javascript复制

.blend-mode {
    background: url(image.jpg);
    mix-blend-mode: screen;
}

48. 纵横比属性

使用纵横比属性简化纵横比盒子的创建。

代码语言：javascript复制

.aspect-ratio-box {
    aspect-ratio: 16/9;
}

49. shape-outside实现文本环绕

使用shape-outside属性使文本围绕指定形状，实现更动态的布局。

代码语言：javascript复制

.shape-wrap {
    float: left;
    width: 150px;
    height: 150px;
    shape-outside: circle(50%);
}

50. ch单位用于一致的尺寸

ch单位表示所选字体中字符“0”的宽度，可用于创建一致且响应式的布局。

代码语言：javascript复制

h1 {
    font-size: 2ch;
}

51. ::marker伪元素

使用::marker伪元素为列表项标记设置样式。

代码语言：javascript复制

li::marker {
    color: blue;
}

52. element()函数用于背景

使用element()函数动态引用元素作为背景。

代码语言：javascript复制

.background {
    background: element(#targetElement);
}

53. Flexbox实现粘性底部

使用Flexbox创建粘性底部布局。

代码语言：javascript复制

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

54. scroll-padding实现平滑滚动

通过调整scroll padding来改善滚动行为。

代码语言：javascript复制

html {
    scroll-padding: 20px;
}

55. 交互式高亮效果

使用CSS变量创建交互式高亮效果。

代码语言：javascript复制

.highlight {
    --highlight-color: #e74c3c;
    background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
    background-size: 100% 200%;
    transition: background-position 0.3s;
}

.highlight:hover {
    background-position: 0 100%;
}

56. 自定义单选框和复选框样式

无需图像，样式化单选框和复选框。

代码语言：javascript复制

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #3498db;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #e74c3c;
}

57. textarea的resize属性

使用resize属性控制textarea的调整大小行为。

代码语言：javascript复制

textarea {
    resize: vertical;
}

文本渐变效果使用background-clip和text-fill-color属性为文本创建渐变效果。

代码语言：javascript复制

.gradient-text {
background-image: linear-gradient(45deg, #3498db, #2ecc71);
background-clip: text;
color: transparent;
}

对长单词使用word-break属性使用word-break属性控制长单词或没有空格的字符串的断行和换行。

代码语言：javascript复制

.long-words {
word-break: break-all;
}

60. font-variation-settings用于可变字体

使用font-variation-settings属性微调可变字体样式。

代码语言：javascript复制

.custom-font {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 600, 'ital' 1;
}

61. 混合模式用于创意叠加效果

使用混合模式为元素应用叠加效果，创造出有趣的视觉效果。

代码语言：javascript复制

.overlay {
mix-blend-mode: overlay;
}

62. 为损坏的图像应用样式

使用:broken伪类为损坏的图像应用样式。

代码语言：javascript复制

img:broken {
filter: grayscale(100%);
}

63. CSS形状

使用CSS形状为设计创建有趣的效果。

代码语言：javascript复制

.shape {
shape-outside: circle(50%);
}

64. 属性选择器用于子字符串匹配

使用*=操作符的属性选择器进行子字符串匹配。

代码语言：javascript复制

[data-attribute*="value"] {
/* 样式 */
}

65. backdrop-filter用于模糊背景

使用backdrop-filter为背景应用模糊效果，实现毛玻璃效果。

代码语言：javascript复制

.element {
backdrop-filter: blur(10px);
}

66. CSS环境变量

使用env()函数在CSS中访问环境变量。

代码语言：javascript复制

.element {
margin-top: env(safe-area-inset-top);
}

67. CSS属性计数器

使用:nth-child选择器计算特定属性值的出现次数。

代码语言：javascript复制

[data-category="example"]:nth-child(3) {
/* 第三次出现的样式 */
}

68. CSS形状实现文本环绕

使用shape-outside结合polygon()函数精确地控制文本围绕不规则形状的布局。

代码语言：javascript复制

.text-wrap {
shape-outside: polygon(0 0, 100% 0, 100% 100%);
}

69. 自定义鼠标样式

使用cursor属性更改鼠标样式。

代码语言：javascript复制

.custom-cursor {
cursor: pointer;
}

70. HSLA用于透明颜色

使用HSLA值表示透明颜色，对alpha通道进行更精细的控制。

代码语言：javascript复制

.transparent-bg {
background-color: hsla(120, 100%, 50%, 0.5);
}

71. text-orientation实现纵向文本

使用text-orientation属性将文本垂直旋转。

代码语言：javascript复制

.vertical-text {
text-orientation: upright;
}

72. font-variant用于小型大写字母

使用font-variant属性应用小型大写字母样式。

代码语言：javascript复制

.small-caps {
font-variant: small-caps;
}

73. box-decoration-break用于背景分割

使用box-decoration-break属性控制跨多行断开的元素的背景，实现更灵活的文本环绕。

代码语言：javascript复制

.split-background {
box-decoration-break: clone;
}

74. :focus-visible用于特定焦点样式

仅在元素处于焦点且焦点不是由鼠标单击提供时应用样式。

代码语言：javascript复制

input:focus-visible {
outline: 2px solid blue;
}

75. text-rendering实现最佳字体呈现

通过text-rendering属性改善文本呈现效果。

代码语言：javascript复制

.optimized-text {
text-rendering: optimizeLegibility;
}

76. initial-letter用于大写字母

使用initial-letter为块级元素的第一个字母应用样式。

代码语言：javascript复制

p::first-letter {
font-size: 2em;
}

77. overscroll-behavior用于滚动过度

控制用户滚动超出滚动容器边界时的行为。

代码语言：javascript复制

.scroll-container {
overscroll-behavior: contain;
}

78. writing-mode实现纵向布局

使用writing-mode属性创建纵向布局。

代码语言：javascript复制

.vertical-layout {
writing-mode: vertical-rl;
}

79. ::cue用于HTML5标题样式

使用::cue伪元素为HTML5字幕文本应用样式。

代码语言：javascript复制

::cue {
color: blue;
}

80. line-clamp截断多行文本

使用line-clamp属性限制元素中显示的行数。

代码语言：javascript复制

.truncated-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

81. scroll-snap-align

scroll-snap-align属性控制滚动容器内滚动捕捉点的对齐方式，确保对滚动行为进行精确控制，提升用户体验。

代码语言：javascript复制

.container {
scroll-snap-type: x mandatory;
}

.item {
scroll-snap-align: center;
}

82. overscroll-behavior

overscroll-behavior使您可以定义浏览器在滚动超出范围时的处理方式，从而避免不必要的滚动效果，提升整体滚动体验。

代码语言：javascript复制

.scrollable {
overscroll-behavior: contain;
}

83. font-kerning

font-kerning允许对字符间距进行微调，通过调整文本元素中字符之间的间距，确保最佳的可读性。

代码语言：javascript复制

p {
font-kerning: auto;
}

84. shape-margin

与CSS形状一起使用时，shape-margin指定浮动元素形状周围的边距，可以更精确地控制文本环绕和布局。

代码语言：javascript复制

.shape {
shape-margin: 20px;
}

85. scroll-margin

scroll-margin设置滚动容器边缘与滚动内容开始之间的边距，提升用户体验，为滚动提供缓冲空间。

代码语言：javascript复制

.container {
scroll-margin-top: 100px;
}

86. tab-size

tab-size属性控制文本区域中制表符的宽度，确保在不同用户代理中一致的显示。

代码语言：javascript复制

pre {
tab-size: 4;
}

87. text-align-last

text-align-last决定块级元素中最后一行文本的对齐方式，为多行块文本提供对齐控制。

代码语言：javascript复制

p {
text-align-last: justify;
}

88. text-justify

此属性控制文本两端对齐的行为，指定是使用单词间还是字符间距进行文本对齐。

代码语言：javascript复制

p {
text-align: justify;
text-justify: inter-word;
}

89. column-fill

column-fill决定如何在多列布局中分配内容，允许内容依次或平衡分布在列中。

代码语言：javascript复制

.container {
column-count: 3;
column-fill: auto;
}

90. outline-offset

outline-offset调整轮廓与元素边缘之间的空间，不影响布局，为轮廓的外观提供更细致的控制。

代码语言：javascript复制

button {
outline: 2px solid blue;
outline-offset: 4px;
}

91. font-variant-numeric

此属性允许精细控制数字字体渲染，启用特性如数字大小写和分数、序数指示器等。

代码语言：javascript复制

p {
font-variant-numeric: lining-nums;
}

92. font-optical-sizing

启用或禁用字体光学大小调整，以调整字符的间距和比例，实现在不同字体大小下更好的视觉和谐。

代码语言：javascript复制

p {
font-optical-sizing: auto;
}

93. text-decoration-thickness

精确控制文本装饰（如下划线、上划线和删除线）的粗细，实现精细化定制。

代码语言：javascript复制

p {
text-decoration-thickness: 2px;
}

94. text-decoration-skip-ink

text-decoration-skip-ink属性控制文本装饰（如下划线）在被墨水遮挡的情况下是否继续绘制，提升可读性。

代码语言：javascript复制

a {
text-decoration-skip-ink: auto;
}

95. word-spacing

word-spacing属性控制字词间距，调整文本的紧凑度和可读性。

代码语言：javascript复制

p {
word-spacing: 2px;
}

96. hyphenation

通过调整断字点和断字行为，提高文本在窄列中的美观度和可读性。

代码语言：javascript复制

p {
hyphens: auto;
}

97. background-blend-mode

background-blend-mode属性允许背景图像与其下方的背景颜色进行混合，产生出独特的视觉效果。

代码语言：javascript复制

.element {
background-image: url('image.jpg');
background-color: #3498db;
background-blend-mode: multiply;
}

98. text-decoration-color

text-decoration-color属性控制文本装饰的颜色，为链接和装饰文本提供更灵活的样式。

代码语言：javascript复制

a {
text-decoration: underline;
text-decoration-color: red;
}

99. overflow-anchor

overflow-anchor属性指定了在容器的滚动范围内滚动时哪些内容应保持可见，提升用户体验。

代码语言：javascript复制

.container {
overflow-anchor: none;
}

本文共 2721 个字数,平均阅读时长 ≈ 7分钟

css 布局函数技巧优化

0 人点赞

适合收藏，一些CSS优化技巧！

1.text-justify

2.line-break

3.hanging-punctuation

4.counter-set

5.background-origin

6.text-orientation

7.text-emphasis

8.text-decoration-line

9.line-gap

10.contain-intrinsic-size

11.启动平滑滚动

12.链接的属性选择器

13. ~用于合并节点

同级元素的所有 元素。 h2 ~ p { color: blue; }

14. :not()伪类

15. 响应式排版的视窗单位 vw

17. 自定义特性(变量)

18. Object-fit 图像控件的适配性

19. 简化布局的网格

20. :focus-within 伪类

21. 使用Flexbox垂直居中

22. 自定义选定内容的突出显示颜色

23. 设置占位符文本的样式

24. 渐变边界

25. 使用vw实现可变字体大小

26. 使用锥形渐变创建多彩元素

27. 使用clamp()函数实现响应式文本

28. 使用font-display: swap;优化字体加载

29. 自定义滚动吸附点

30. 使用字体变体设置进行可变字体样式

31. 自定义下划线样式

32. 隐藏无障碍文本

33. 保持元素纵横比

34. 选择偶数和奇数元素

35. CSS计数器

36. 多重背景图片

37. 优化文本流畅性的连字符

38. 使用CSS变量进行动态样式

39. 键盘导航的焦点样式

40. 平滑渐变过渡

41. 文本描边效果

42. 纯CSS汉堡菜单

43. CSS :is()选择器

44. CSS变量中的计算

45. attr()函数用于内容

46. CSS遮罩效果

47. 混合模式

48. 纵横比属性

49. shape-outside实现文本环绕

50. ch单位用于一致的尺寸

51. ::marker伪元素

52. element()函数用于背景

53. Flexbox实现粘性底部

54. scroll-padding实现平滑滚动

55. 交互式高亮效果

56. 自定义单选框和复选框样式

57. textarea的resize属性

60. font-variation-settings用于可变字体

61. 混合模式用于创意叠加效果

62. 为损坏的图像应用样式

63. CSS形状

64. 属性选择器用于子字符串匹配

65. backdrop-filter用于模糊背景

66. CSS环境变量

67. CSS属性计数器

68. CSS形状实现文本环绕

69. 自定义鼠标样式

70. HSLA用于透明颜色

71. text-orientation实现纵向文本

72. font-variant用于小型大写字母

73. box-decoration-break用于背景分割

74. :focus-visible用于特定焦点样式

75. text-rendering实现最佳字体呈现

76. initial-letter用于大写字母

77. overscroll-behavior用于滚动过度

78. writing-mode实现纵向布局

79. ::cue用于HTML5标题样式

80. line-clamp截断多行文本

81. scroll-snap-align

同级元素的所有元素。 h2 ~ p { color: blue; }