js有哪些内置对象类型 摘要本文简要介绍了JavaScript中的几种常见内置对象类型，包括Number、String、Array、Object、Date和Math对象，并提供了每个对象类型中常用方法和属性的示例代码。这些内置对象类型提供了处理不同数据类型和执行特定任务的功能，使得JavaScript在网页开发中能够更便捷地处理数据。一、Number对象Number对象用于处理数字数据类型。它提供了许多有用的方法和属性。例如，toFixed()方法用于将数字四舍五入为指定小数位数的字符串。下面是一个示例：let num = 3.14159; let fixedNum = num.toFixed(2); console.log(fixedNum); // 输出3.14二、String对象String对象用于处理字符串数据类型。它也提供了各种方法和属性。例如，toUpperCase()方法用于将字符串转换为大写。下面是一个示例：let str = "hello world"; let upperStr = str.toUpperCase(); console.log(upperStr); // 输出HELLO WORLD三、Array对象Array对象用于处理数组数据类型。它提供了许多用于操作数组的方法和属性。例如，push()方法用于向数组末尾添加一个或多个元素。下面是一个示例：let arr = [1, 2, 3]; arr.push(4); console.log(arr); // 输出[1, 2, 3, 4]四、Object对象Object对象是JavaScript中最基本的对象类型，也是其他所有对象类型的基础。它提供了许多用于操作对象的方法和属性。例如，keys()方法用于获取对象的所有属性名称。下面是一个示例：let obj = {name: "John", age: 30}; let keys = Object.keys(obj); console.log(keys); // 输出["name", "age"]五、Date对象Date对象用于处理日期和时间。它提供了许多方法和属性，用于获取和设置日期、时间的各个部分。例如，getDate()方法用于获取当前日期的天数。下面是一个示例：let date = new Date(); let day = date.getDate(); console.log(day); // 输出当前日期的天数六、Math对象Math对象用于执行数学运算。它提供了许多用于处理数字的方法和属性。例如，sqrt()方法用于计算一个数的平方根。下面是一个示例：let num = 16; let sqrtNum = Math.sqrt(num); console.log(sqrtNum); // 输出4以上只是JavaScript中一些常见的内置对象类型的示例，实际上JavaScript还有很多其他的内置对象类型，如RegExp、Boolean等。通过使用这些内置对象类型提供的方法和属性，我们可以更方便地处理各种类型的数据，完成各种任务的执行。

可能导致CSS加载失败的原因有哪些？ 摘要本文探讨了CSS加载失败的原因，包括路径错误、文件名错误、服务器问题、语法错误以及媒体查询错误，并为每种原因提供了可能的代码示例和解决方法。文章强调了仔细检查和调试CSS代码的重要性，以确保网页能够正确加载和显示样式，提供良好的用户体验。CSS（层叠样式表）是用于控制网页布局和样式的标记语言，它能够将内容与表现分离，并使网站具有更好的可维护性和可扩展性。然而，在实际开发中，我们有时会遇到CSS加载失败的问题，这可能导致网页样式错乱或无法显示。本文将分析CSS加载失败的原因，并提供具体的代码示例。路径错误：当引用CSS文件时，如果给出的路径错误或文件不存在，CSS加载将会失败。常见的路径错误包括相对路径和绝对路径错误。下面是一个相对路径错误的代码示例：<link rel="stylesheet" href="styles/style.css">如果styles文件夹与当前HTML文件不在同一目录下，那么CSS加载将会失败。可以通过使用相对或绝对路径来解决这个问题。文件名错误：如果CSS文件名与实际文件名不一致，或者文件扩展名错误，CSS加载也会失败。下面是一个文件名错误的代码示例：<link rel="stylesheet" href="styles/main.css">如果实际的CSS文件名为style.css，那么CSS加载将会失败。需要确保文件名的拼写和大小写与实际情况一致。服务器问题：有时CSS文件可能存在服务器问题，导致无法加载。这可能是由于服务器故障、网络连接问题或服务器设置错误引起的。在这种情况下，我们需要检查服务器的状态，并确保它正常工作。语法错误：如果CSS文件中存在语法错误，浏览器将无法正确解析CSS代码，并会停止加载。常见的语法错误包括拼写错误、缺少分号、括号不匹配等。下面是一个语法错误的代码示例：h1 { color: red; font-size: 18px; background-color: #f00; padding: 10px }上述代码中的padding属性缺少分号，这将导致整个CSS加载失败。为了避免这个问题，我们需要仔细检查CSS代码，确保语法正确。媒体查询错误：媒体查询是一种用于根据不同的设备或媒体类型应用不同CSS样式的方法。在媒体查询中，如果使用的CSS样式有错误，浏览器将无法正确解析，并可能导致CSS加载失败。下面是一个媒体查询错误的代码示例：@media screen and (max-width: 768px) { h1 { font-size: 24px; } }如果媒体查询条件错误或CSS样式错误，CSS加载将会失败。需要确保媒体查询条件和CSS样式是正确的。总结CSS加载失败的原因及示例：路径错误：原因：引用CSS文件时给出的路径错误或文件不存在。示例：相对路径错误导致CSS无法加载。解决方法：使用正确的相对或绝对路径。文件名错误：原因：CSS文件名与实际文件名不一致，或文件扩展名错误。示例：文件名不匹配导致CSS加载失败。解决方法：确保文件名的拼写和大小写与实际情况一致。服务器问题：原因：服务器故障、网络连接问题或服务器设置错误导致CSS文件无法加载。解决方法：检查服务器的状态并确保其正常工作。语法错误：原因：CSS文件中存在拼写错误、缺少分号、括号不匹配等语法问题。示例：CSS属性缺少分号导致加载失败。解决方法：仔细检查CSS代码，确保语法正确。媒体查询错误：原因：媒体查询条件错误或CSS样式错误导致浏览器无法正确解析。示例：媒体查询错误导致CSS加载失败。解决方法：确保媒体查询条件和CSS样式正确无误。

用JS实现二维码生成 二维码也是比较常用的一个工具了，通过二维码我们可以实现网页内容的推广、分享，以及实现用户信息的校验认证，今天这篇文章主要介绍前端如何生成二维码的。我们可以采用现有的生成库来生成二维码，本文以 qrcode.min.js和awesome-qr.js来介绍二维码的生成。qrcode.min.jsqrcode.min.js可以指定将需要生成的二维码加载到对应的元素上，其支持功能如下：width：二维码宽度height：二维码高度colorDark：二维码颜色colorLight：二维码前景色correctLevel：二维码精度text：需要生成二维码的文本/** * 生成二维码 * @param {*} text */ function createQrCode(text) { const elements = document.getElementsByClassName('qrcode'); const len = elements.length; if (len) { for (let i = 0; i < len; i++) { const ele = elements[i]; new QRCode(ele, { width: 101, height: 101, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H, text, }); } } }awesome-qr.jsawesome-qr.js可以实现指定的文本生成对应的二维码base64文件，可以通过设置img的src地址实现二维码的加载。支持设置参数：text：字符串文本size：二维码大小margin：二维码白边colorDark：二维码颜色，默认黑色colorLight：二维码亮色backgroundImage：二维码背景色logoImage：二维码中间iconlogoScale：二维码中间logo的scale大小logoCornerRadius：二维码logo的圆角大小createQrCode = function({ text, logo, bgColor, codeColor, margin }) { // 二维码生成参数 var text = text; var size = 256; var colorDark = codeColor || "#000000"; var background = bgColor || "#ffffff"; var logo = logo || ""; $("#qrcodeimg").css({ width: size + "px", height: size + "px" }) new AwesomeQR.AwesomeQR({ text: text, // 内容 size: size, // 二维码大小 margin: margin || 9, // 二维码白边大小 colorDark: colorDark, // 二维码颜色 colorLight: background, // 二维码颜色 logoImage: logo, // 二维码中间logo logoScale: 0.3, // 二维码中间logo大小 logoCornerRadius: 0, // 二维码中间logo圆角 }).draw() .then((dataURL) => { $("#qrcode").attr("src", dataURL); // 通过设置img的src来加载二维码图片 }) .catch((err) => { console.error(err); }); }

在CSS样式中用关键帧规则实现动画效果 @keyframes关键帧规则要想让网页上的元素根据某个关键帧规则来执行动画效果，我们需要先用如下格式来定义对应的关键帧规则。@keyframes 自定义的动画名称 { /* 样式规则 */ }首先我们要为这个关键帧规则自定义一个名字，将来网页上的元素可以通过指定这个名字来执行对应的动画效果。在样式规则中我们可以用名为from的关键帧选择器设定动画开始时的各个样式属性的值，用名为to的选择器设定动画结束时各个属性到达的值。在视频课程中旋转头像图标的方式就是用了from和to关键字来定义的。另外还可以将from和to替换为0%和100%，并可以通过设定在0-100之间的百分比来定义样式变更过程中的时间点百分比。视频课程中变换置顶图标背景色时用到了百分比形式的关键帧选择器。@keyframes spinning { from{ transform:rotate(0); } to{ transform: rotate(360deg); } } @keyframes colors { 0%{ background-color: chocolate; } 25%{ background-color: aqua; } 50%{ background-color: yellow; } 75%{ background-color: violet; } 100%{ background-color: chocolate; } }如果不同的百分比中样式的设定相同，我们也可以将其合并为一个，用逗号来分隔不同的百分比，例如视频例子中的0%和100%的样式一样，我们可以进行如下改写：@keyframes colors { 0%, 100%{ background-color: chocolate; } 25%{ background-color: aqua; } 50%{ background-color: yellow; } 75%{ background-color: violet; } }animation相关属性利用@keyframes定义了关键帧规则后如何来调用它呢，这时就需要用到animation相关的属性了。animation是通过元素的样式改变，补足在变化过程中的帧而产生动画效果，它与transition的不同的是，animation可以不需要事件触发，而且通过@keyframes的设定，变化过程中的样式可以通过添加不同时间点或称为路径点上的关键帧来定义。为一个网页中的元素添加用@keyframes定义的动画效果，我们需要在这个元素对应的样式表选择器中指定所要用到的动画名称animation-name，这个名字也就是我们在定义@keyframes时自定义的名字；animation-duration设定了播放1次所需的时间；animation-iteration-count给出了播放次数；如果需要延时播放，可用属性animation-delay设定；如果要控制动画的播放或暂停，可用属性animation-play-state；另外还可以用属性animation-direction、animation-timing-function、animation-fill-mode来改变播放效果。我们设定了所用动画名称为colors，一次动画的时常为5秒，循环播放：.backtotop:hover{ transform: translateY(-10px); /* background-color: lightblue; */ opacity: 1; animation-name: colors; animation-duration: 5s; animation-iteration-count: infinite; }另外也可以将animation属性简化来书写：backtotop:hover{ transform: translateY(-10px); /* background-color: lightblue; */ opacity: 1; /* animation-name: colors; animation-duration: 5s; animation-iteration-count: infinite; */ animation: 5s infinite colors; }

适合收藏，一些CSS优化技巧！ 当各种框架以及复杂的 JS 知识开始充斥着我们的工作环境时。谁还能够记得，以 CSS 来构建更加良好的用户体验，也是前端的一个重要组成部分。所以说，今天咱们就来看看 css 的优化方案-终极合集。一共一百条，有点多，适合收藏1.text-justifytext-justify属性指定如何分配额外的空间，以便充分利用容器的宽度。p { text-align: justify; text-justify: inter-word; }2.line-breakline-break属性控制文本换行行为，确保在指定的断点处进行断行。p { line-break: anywhere; }3.hanging-punctuationhanging-punctuation属性控制标点符号是否在行框之外悬挂，以提高排版的美观度和可读性。p { hanging-punctuation: last allow-end; }4.counter-setcounter-set属性在使用counter-reset创建的计数器值基础上，显式设置一个新的值。ol { counter-set: section 1; }5.background-originbackground-origin属性确定背景图片的起始位置，影响背景图片与边框的相对位置。.element { background-image: url('image.jpg'); background-origin: content-box; }6.text-orientationtext-orientation属性控制文本的方向，适用于纵向文本和日文排版等情况。.vertical-text { text-orientation: sideways-right; }7.text-emphasistext-emphasis属性为文本设置强调标志，用于提高关键字的可读性。em { text-emphasis: filled circle; }8.text-decoration-linetext-decoration-line属性指定要绘制的装饰线的类型，可用于单独控制上划线、下划线、删除线等。a { text-decoration-line: underline overline; }9.line-gapline-gap属性定义了元素的行间距，可以为文字和其他行内元素提供更大的空间。p { line-gap: 1.5; }10.contain-intrinsic-sizecontain-intrinsic-size属性定义了内联大小计算函数的大小，实现更精确的布局控制。img { contain-intrinsic-size: 200px 300px; }11.启动平滑滚动添加scroll-behavior：smooth到元素中 <html> ，使整个页面能够平滑滚动。html{ scroll-behavior: smooth; }12.链接的属性选择器此选择器以href属性以“https”开头的链接为目标。a[href^="https"] { color: blue; }13. ~用于合并节点选择作为 <h2> 同级元素的所有 <p> 元素。h2 ~ p { color: blue; }14. :not()伪类此选择器将样式应用于不具有类“Special”的 li。li:not(.special) { font-style: italic; }15. 响应式排版的视窗单位 vw使用视区单位(vw, vh, vmin, vmax)可以使字体大小与视区大小相对应。h1 { font-size: 5vw; }:empty 对于空元素此选择器以空的 <p> 元素为目标并隐藏它们。p:empty { display: none; }17. 自定义特性(变量)可以定义和使用自定义特性，以便更轻松地创建主题和进行维护。:root { --main-color: #3498db; } h1 { color: var(--main-color); }18. Object-fit 图像控件的适配性object-fit 控制替换元素(如 <img> )的内容应该如何调整大小。img { width: 100px; height: 100px; object-fit: cover; }19. 简化布局的网格Css网格提供了一种功能强大的方式来以更直接的方式创建布局。.container { display: grid; grid-template-columns: 1fr 2fr 1fr; }20. :focus-within 伪类如果一个元素包含任何带有:focus的子元素，则:focus-Win会选择该元素。form:focus-within { box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }21. 使用Flexbox垂直居中使用FlexBox可轻松地将内容在容器中水平和垂直居中。.container { display: flex; align-items: center; justify-content: center; }22. 自定义选定内容的突出显示颜色自定义在网页上选择文本时的突出显示颜色。::selection { background-color: #ffcc00; color: #333; }.23. 设置占位符文本的样式设置输入字段内占位符文本的样式。::placeholder { color: #999; font-style: italic; }24. 渐变边界使用Backback-Clip属性创建渐变边框。.element { border: 2px solid transparent; background-clip: padding-box; background-image: linear-gradient(to right, red, blue); }25. 使用vw实现可变字体大小根据视口宽度调整字体大小，实现更加响应式的排版。body { font-size: calc(16px + 1vw); }26. 使用锥形渐变创建多彩元素利用锥形渐变创建丰富多彩且动态的背景。.element { background: conic-gradient(#ff5733, #33ff57, #5733ff); }27. 使用clamp()函数实现响应式文本使用clamp()函数设置字体大小的范围，确保在不同屏幕尺寸下的可读性。.text { font-size: clamp(16px, 4vw, 24px); }28. 使用font-display: swap;优化字体加载使用font-display: swap;属性提高网页字体性能，让自定义字体加载时显示备用字体。@font-face { font-family: 'YourFont'; src: url('your-font.woff2') format('woff2'); font-display: swap; }29. 自定义滚动吸附点为了实现更顺畅的滚动体验，特别是在图库或滑块中，实现自定义滚动吸附点。.scroll-container { scroll-snap-type: y mandatory; } .scroll-item { scroll-snap-align: start; }30. 使用字体变体设置进行可变字体样式利用可变字体和font-variation-settings属性对字体的粗细、样式等进行精细调节。.text { font-family: 'YourVariableFont', sans-serif; font-variation-settings: 'wght' 500, 'ital' 1; }31. 自定义下划线样式使用border-bottom和text-decoration的组合来自定义链接的下划线样式。a { text-decoration: none; border-bottom: 1px solid #3498db; }32. 隐藏无障碍文本使用class sr-only来在视觉上隐藏元素，但保持其对屏幕阅读器的可访问性。.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }33. 保持元素纵横比通过使用padding来保持元素（如图片或视频）的纵横比。.aspect-ratio-box { position: relative; width: 100%; padding-bottom: 75%; /* 根据需要调整 */ } .aspect-ratio-box > iframe { position: absolute; width: 100%; height: 100%; }34. 选择偶数和奇数元素使用:nth-child伪类来为交替元素设置样式。li:nth-child(even) { background-color: #f2f2f2; } li:nth-child(odd) { background-color: #e6e6e6; }35. CSS计数器使用counter-reset和counter-increment属性在列表中创建自动编号。ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counter(item) ". "; }36. 多重背景图片使用不同属性为元素应用多个背景图片。.bg { background-image: url('image1.jpg'), url('image2.jpg'); background-position: top left, bottom right; background-repeat: no-repeat, repeat-x; }37. 优化文本流畅性的连字符通过使用hyphens属性允许自动连字符以提高文本的可读性。p { hyphens: auto; }38. 使用CSS变量进行动态样式利用CSS变量创建动态且可重用的样式。:root { --main-color: #3498db; } .element { color: var(--main-color); }39. 键盘导航的焦点样式改善焦点样式以提高键盘导航和可访问性。:focus { outline: 2px solid #27ae60; }40. 平滑渐变过渡为渐变背景应用平滑过渡效果，增强视觉效果。.gradient-box { background: linear-gradient(45deg, #3498db, #2ecc71); transition: background 0.5s ease; } .gradient-box:hover { background: linear-gradient(45deg, #e74c3c, #f39c12); }41. 文本描边效果为文本添加描边，产生独特的视觉效果。h1 { color: #3498db; -webkit-text-stroke: 2px #2c3e50; }42. 纯CSS汉堡菜单创建一个简单的汉堡菜单，无需使用JavaScript。.menu-toggle { display: none; } .menu-toggle:checked + nav { display: block; } /* 在这里添加汉堡菜单图标和菜单样式 */43. CSS :is()选择器使用:is()伪类简化复杂的选择器。:is(h1, h2, h3) { color: blue; }44. CSS变量中的计算在CSS变量中进行计算，实现动态样式。:root { --base-size: 16px; --header-size: calc(var(--base-size) * 2); } h1 { font-size: var(--header-size); }45. attr()函数用于内容使用attr()函数检索和显示属性值。div::before { content: attr(data-custom-content); }46. CSS遮罩效果为图像应用遮罩，创造出独特的效果。.masked-image { mask: url(mask.svg); mask-size: cover; }47. 混合模式尝试使用混合模式创建有趣的色彩效果。.blend-mode { background: url(image.jpg); mix-blend-mode: screen; }48. 纵横比属性使用纵横比属性简化纵横比盒子的创建。.aspect-ratio-box { aspect-ratio: 16/9; }49. shape-outside实现文本环绕使用shape-outside属性使文本围绕指定形状，实现更动态的布局。.shape-wrap { float: left; width: 150px; height: 150px; shape-outside: circle(50%); }50. ch单位用于一致的尺寸ch单位表示所选字体中字符“0”的宽度，可用于创建一致且响应式的布局。h1 { font-size: 2ch; }51. ::marker伪元素使用::marker伪元素为列表项标记设置样式。li::marker { color: blue; }52. element()函数用于背景使用element()函数动态引用元素作为背景。.background { background: element(#targetElement); }53. Flexbox实现粘性底部使用Flexbox创建粘性底部布局。body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; }54. scroll-padding实现平滑滚动通过调整scroll padding来改善滚动行为。html { scroll-padding: 20px; }55. 交互式高亮效果使用CSS变量创建交互式高亮效果。.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. 自定义单选框和复选框样式无需图像，样式化单选框和复选框。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的调整大小行为。textarea { resize: vertical; }文本渐变效果使用background-clip和text-fill-color属性为文本创建渐变效果。.gradient-text { background-image: linear-gradient(45deg, #3498db, #2ecc71); background-clip: text; color: transparent; }对长单词使用word-break属性使用word-break属性控制长单词或没有空格的字符串的断行和换行。.long-words { word-break: break-all; }60. font-variation-settings用于可变字体使用font-variation-settings属性微调可变字体样式。.custom-font { font-family: 'MyVariableFont'; font-variation-settings: 'wght' 600, 'ital' 1; }61. 混合模式用于创意叠加效果使用混合模式为元素应用叠加效果，创造出有趣的视觉效果。.overlay { mix-blend-mode: overlay; }62. 为损坏的图像应用样式使用:broken伪类为损坏的图像应用样式。img:broken { filter: grayscale(100%); }63. CSS形状使用CSS形状为设计创建有趣的效果。.shape { shape-outside: circle(50%); }64. 属性选择器用于子字符串匹配使用*=操作符的属性选择器进行子字符串匹配。[data-attribute*="value"] { /* 样式 */ }65. backdrop-filter用于模糊背景使用backdrop-filter为背景应用模糊效果，实现毛玻璃效果。.element { backdrop-filter: blur(10px); }66. CSS环境变量使用env()函数在CSS中访问环境变量。.element { margin-top: env(safe-area-inset-top); }67. CSS属性计数器使用:nth-child选择器计算特定属性值的出现次数。[data-category="example"]:nth-child(3) { /* 第三次出现的样式 */ }68. CSS形状实现文本环绕使用shape-outside结合polygon()函数精确地控制文本围绕不规则形状的布局。.text-wrap { shape-outside: polygon(0 0, 100% 0, 100% 100%); }69. 自定义鼠标样式使用cursor属性更改鼠标样式。.custom-cursor { cursor: pointer; }70. HSLA用于透明颜色使用HSLA值表示透明颜色，对alpha通道进行更精细的控制。.transparent-bg { background-color: hsla(120, 100%, 50%, 0.5); }71. text-orientation实现纵向文本使用text-orientation属性将文本垂直旋转。.vertical-text { text-orientation: upright; }72. font-variant用于小型大写字母使用font-variant属性应用小型大写字母样式。.small-caps { font-variant: small-caps; }73. box-decoration-break用于背景分割使用box-decoration-break属性控制跨多行断开的元素的背景，实现更灵活的文本环绕。.split-background { box-decoration-break: clone; }74. :focus-visible用于特定焦点样式仅在元素处于焦点且焦点不是由鼠标单击提供时应用样式。input:focus-visible { outline: 2px solid blue; }75. text-rendering实现最佳字体呈现通过text-rendering属性改善文本呈现效果。.optimized-text { text-rendering: optimizeLegibility; }76. initial-letter用于大写字母使用initial-letter为块级元素的第一个字母应用样式。p::first-letter { font-size: 2em; }77. overscroll-behavior用于滚动过度控制用户滚动超出滚动容器边界时的行为。.scroll-container { overscroll-behavior: contain; }78. writing-mode实现纵向布局使用writing-mode属性创建纵向布局。.vertical-layout { writing-mode: vertical-rl; }79. ::cue用于HTML5标题样式使用::cue伪元素为HTML5字幕文本应用样式。::cue { color: blue; }80. line-clamp截断多行文本使用line-clamp属性限制元素中显示的行数。.truncated-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }81. scroll-snap-alignscroll-snap-align属性控制滚动容器内滚动捕捉点的对齐方式，确保对滚动行为进行精确控制，提升用户体验。.container { scroll-snap-type: x mandatory; } .item { scroll-snap-align: center; }82. overscroll-behavioroverscroll-behavior使您可以定义浏览器在滚动超出范围时的处理方式，从而避免不必要的滚动效果，提升整体滚动体验。.scrollable { overscroll-behavior: contain; }83. font-kerningfont-kerning允许对字符间距进行微调，通过调整文本元素中字符之间的间距，确保最佳的可读性。p { font-kerning: auto; }84. shape-margin与CSS形状一起使用时，shape-margin指定浮动元素形状周围的边距，可以更精确地控制文本环绕和布局。.shape { shape-margin: 20px; }85. scroll-marginscroll-margin设置滚动容器边缘与滚动内容开始之间的边距，提升用户体验，为滚动提供缓冲空间。.container { scroll-margin-top: 100px; }86. tab-sizetab-size属性控制文本区域中制表符的宽度，确保在不同用户代理中一致的显示。pre { tab-size: 4; }87. text-align-lasttext-align-last决定块级元素中最后一行文本的对齐方式，为多行块文本提供对齐控制。p { text-align-last: justify; }88. text-justify此属性控制文本两端对齐的行为，指定是使用单词间还是字符间距进行文本对齐。p { text-align: justify; text-justify: inter-word; }89. column-fillcolumn-fill决定如何在多列布局中分配内容，允许内容依次或平衡分布在列中。.container { column-count: 3; column-fill: auto; }90. outline-offsetoutline-offset调整轮廓与元素边缘之间的空间，不影响布局，为轮廓的外观提供更细致的控制。button { outline: 2px solid blue; outline-offset: 4px; }91. font-variant-numeric此属性允许精细控制数字字体渲染，启用特性如数字大小写和分数、序数指示器等。p { font-variant-numeric: lining-nums; }92. font-optical-sizing启用或禁用字体光学大小调整，以调整字符的间距和比例，实现在不同字体大小下更好的视觉和谐。p { font-optical-sizing: auto; }93. text-decoration-thickness精确控制文本装饰（如下划线、上划线和删除线）的粗细，实现精细化定制。p { text-decoration-thickness: 2px; }94. text-decoration-skip-inktext-decoration-skip-ink属性控制文本装饰（如下划线）在被墨水遮挡的情况下是否继续绘制，提升可读性。a { text-decoration-skip-ink: auto; }95. word-spacingword-spacing属性控制字词间距，调整文本的紧凑度和可读性。p { word-spacing: 2px; }96. hyphenation通过调整断字点和断字行为，提高文本在窄列中的美观度和可读性。p { hyphens: auto; }97. background-blend-modebackground-blend-mode属性允许背景图像与其下方的背景颜色进行混合，产生出独特的视觉效果。.element { background-image: url('image.jpg'); background-color: #3498db; background-blend-mode: multiply; }98. text-decoration-colortext-decoration-color属性控制文本装饰的颜色，为链接和装饰文本提供更灵活的样式。a { text-decoration: underline; text-decoration-color: red; }99. overflow-anchoroverflow-anchor属性指定了在容器的滚动范围内滚动时哪些内容应保持可见，提升用户体验。.container { overflow-anchor: none; }