沈阳的网站建设,炽乐清网站建设,如何提高网站流量,有网站专门做效果图微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势#xff0c;学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录#xff0c;有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验ChatGpt plus版本的#xff0c;我们出的钱 体验地… 微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验ChatGpt plus版本的我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群一起找bug另外新版作图神器ChatGPT4 已上线 https://cube.waixingyun.cn/home
虽然许多开发人员熟悉常用的CSS属性但也有一些较为陌生的属性可能被忽视了。在本文中我们将探讨10个你可能没有使用过的CSS属性。
1. gap
gap 属性是一种方便的方式用于指定网格或弹性盒子项之间的间距而无需额外的边距或填充属性。它简化了基于网格或弹性盒子的布局的创建通过提供一种设置网格或弹性盒子项在行和列中的间隙的简写方式。
要理解 gap 属性让我们分别看一下它在网格和弹性盒子布局中的用法。
网格布局中的 gap
在网格布局中 gap 属性设置了网格项之间的水平和垂直间距。它允许我们通过一次声明来控制行和列之间的间隔。
设置网格布局中间隙的语法如下
.container {display: grid;gap: row-gap column-gap;
}row-gap 和 column-gap 值分别表示行和列之间的间距。我们可以使用任何有效的CSS长度值或关键字 normal 来定义间隔。如果只指定一个值则应用于行和列。
这是一个示例设置了一个网格容器行之间有20像素的间隔列之间有10像素的间隔
.container {display: grid;gap: 20px 10px;
}使用这个CSS容器内的网格项之间将有指定的行和列之间的间隙从而创建出一个视觉上吸引人的布局。
Flexbox布局中的 gap
在弹性盒子布局中 gap 属性设置了沿着主轴通常是水平方向的弹性项目之间的间距。它简化了创建灵活且均匀间距的布局的过程。
设置flexbox布局中的 gap 的语法如下
.container {display: flex;gap: gap-size;
}gap-size 值表示 flex 项目之间的间距。我们可以使用任何有效的 CSS 长度值或关键字 normal 来定义间隔。
这是一个示例设置了一个弹性容器其中弹性项之间有10px的间隔:
.container {display: flex;gap: 10px;
}使用这个CSS容器内的flex项目之间将有一个10像素的间隔沿着主轴创建一个视觉上令人愉悦且均匀分布的布局。
2. font-display
网页开发中经常被忽视的一个方面是自定义字体的加载和渲染。 font-display 属性允许我们在字体完全加载之前或下载失败的情况下控制可下载字体的渲染方式。
font-face {font-family: MyCustomFont;src: url(myfont.woff2) format(woff2),url(myfont.woff) format(woff);font-display: swap;
}通过在 font-display 声明中使用 font-face 可以通过简单的CSS代码控制字体的显示方式从而避免复杂的JavaScript解决方案。该属性提供了五个可选值
auto 这是默认值它的行为就好像该属性未被使用。浏览器使用自定义字体隐藏文本直到字体加载完成后再显示文本。block 通过这个值浏览器减少了在等待自定义字体加载时隐藏文本的时间使得备用字体能够更快地显示出来。然而浏览器会无限期地等待自定义字体并在其可用时立即切换。swap 这是最常用的值。它在自定义字体加载时立即显示备用文本。一旦自定义字体准备就绪它将替换备用字体。这种行为与过去使用的基于JavaScript的解决方案相一致。fallback 使用这个值当等待自定义字体时会有一个短暂的不可见文本。如果在一定时间内大约100毫秒自定义字体还没有准备好将使用备用字体。然而如果时间过长剩余页面的生命周期将使用备用字体。optional 与 fallback 类似这个值也有一个短暂的不可见文本期然后是备用字体如果自定义字体还没有准备好的话。不同之处在于使用 optional 浏览器可以自由决定是否下载和使用字体。这对于非必要字体或者针对慢速连接的用户非常有用。
3. backdrop-filter
backdrop-filter 属性允许您对元素背后的区域应用图形效果通常称为背景。通过向元素的背景添加模糊、颜色调整和其他滤镜效果它为创建视觉吸引人的设计提供了新的可能性。
backdrop-filter 属性的语法如下
.element {backdrop-filter: filter-effects;
}filter-effects 值表示要应用于背景的特定图形效果。您可以使用各种滤镜函数例如 blur() 、 brightness() 、 saturate() 等来创建不同的视觉效果。
这是一个将模糊效果应用于元素背景的示例
.element {backdrop-filter: blur(10px);
}使用这个CSS元素后面的背景将被模糊10像素创造出一个视觉上吸引人的效果。
4. scroll-snap
scroll-snap 属性旨在通过在滚动后将内容捕捉到特定位置来增强滚动体验。它提供了一种创建平滑且精确的滚动行为的方式特别适用于需要滚动浏览一系列项目或部分的情况。
scroll-snap 属性有多个子属性用于控制滚动行为的不同方面。在这里我们将介绍最常用的两个子属性 scroll-snap-type 和 scroll-snap-align 。
scroll-snap-type
scroll-snap-type 属性设置滚动容器的对齐行为。它决定容器在滚动过程中是否应该对齐到特定位置以及对齐的方向。
scroll-snap-type 属性的语法如下
.container {scroll-snap-type: behavior axes;
}behavior 值指定了捕捉行为并可以设置为以下选项之一
none 不应用任何捕捉行为。mandatory 容器会自动吸附到最近的吸附点确保在滚动过程中始终处于吸附位置。proximity 如果滚动停止在特定的阈值内容器会自动对齐到最近的对齐点。
axes 值定义了应用捕捉行为的滚动轴可以设置为以下选项之一
none 没有应用于任何轴的捕捉行为。both 拍扑行为应用于水平和垂直轴。block 快照行为应用于块轴垂直滚动。inline 快照行为应用于内联轴水平滚动。
这是一个示例它将容器设置为在水平和垂直方向上捕捉到特定位置
.container {scroll-snap-type: mandatory both;
}使用这个CSS容器在滚动时会自动吸附到最近的吸附点确保在两个方向上都能获得流畅而精确的滚动体验。
scroll-snap-align
scroll-snap-align 属性控制滚动容器中捕捉位置的对齐方式。它决定了滚动停止时滚动容器与捕捉点的对齐方式。
scroll-snap-align 属性的语法如下
.element {scroll-snap-align: alignment;
}alignment 值指定对齐行为并可设置为以下选项之一
none 对齐功能不适用于捕捉位置。start 滚动容器将对齐捕捉位置到容器的起始位置。end 滚动容器将对齐位置与容器的末尾对齐。center 滚动容器将对齐位置设置为容器的中心。
这是一个将捕捉位置与滚动容器的起始位置对齐的示例
.container {scroll-snap-align: start;
}使用这个CSS当滚动停止时滚动容器将会将捕捉位置对齐到容器的起始位置。
scroll-snap 属性提供了一种强大的方式来增强滚动体验并通过部分或项目之间的直观导航来创建。
5. contain
contain 属性是优化网页的有价值工具特别是对于具有复杂布局或众多小部件的网页。它允许你将样式、布局和绘制重新计算的范围限制在DOM的特定部分提高性能并最小化不必要的渲染工作。
使用 contain 我们可以指示一个元素及其内容尽可能独立于文档树的其他部分。通过限定浏览器的重新计算范围您可以减少计算并提高性能。这个属性在使用Web组件和React组件时特别有用其中包含性可以帮助隔离变化的影响。它提供了几个取值
none 这是默认值不应用任何约束效果。size启用尺寸约束意味着元素可以在不需要检查其子元素的情况下进行尺寸调整从而优化布局计算。layout通过启用布局包含性指定了元素外部的任何内容都不能影响其内部布局反之亦然。style 此值打开样式包含防止可能对容器之外的元素产生影响的属性影响它。这增强了样式的隔离性。paint启用绘制限制可以确保容器的后代元素不会显示在其边界之外。这对于屏幕外或不可见的元素如移动菜单特别有用。strict 这个值结合了除了 none contain: size layout style paint 之外的所有包含形式提供全面的包含性。content 类似于 strict 但不包括 size 该值将除大小之外的所有其他包含值组合在一起。
这是使用 contain 属性的一个例子
.container {contain: strict;
}需要注意的是对于 contain 的浏览器支持仍然有限并且每个浏览器的实现可能只有部分支持。
6. conic-gradient
conic-gradient 函数是CSS中的一个强大功能它可以轻松创建圆形渐变。它提供了一种定义从中心点向外辐射的圆形或锥形渐变的方式为创建视觉上引人注目的设计打开了新的可能性。
conic-gradient 函数的语法如下
.element {background-image: conic-gradient(angle, color-stop-1, color-stop-2, ...);
}angle 值表示渐变的起始角度以度或弧度为单位。它定义了颜色辐射的方向。 color-stop 值指定了渐变沿着其位置的颜色和位置。
这是一个从顶部开始顺时针旋转的圆锥渐变的示例
.element {background-image: conic-gradient(0deg, red, blue, green);
}使用这个CSS元素将具有一个锥形渐变从顶部开始为红色过渡到蓝色然后是绿色形成一个圆形渐变图案。
还可以使用颜色停止来定义渐变中每个颜色的特定位置。以下是一个使用颜色停止创建圆锥渐变的示例
.element {background-image: conic-gradient(red 0%, blue 50%, green 100%);
}在这种情况下渐变从0%开始为红色过渡到50%时为蓝色最后在100%时为绿色。
通过定义多个颜色停止点并指定不同的角度 conic-gradient 函数可以实现更复杂的渐变图案。尝试不同的角度和颜色组合可以产生令人惊叹的视觉效果。
7. clip-path
clip-path 属性允许我们创建独特的形状并对元素应用裁剪。虽然通常与图像一起使用但它也可以与其他元素创造性地结合使用例如段落以仅显示内容的一部分。通过 clip-path 您可以隐藏元素的特定区域并创建视觉上引人注目的设计。
clip-path 属性的语法如下
.element {clip-path: clip-source | basic-shape | geometry-box | none;
}这些值具有以下含义
clip-source 一个引用内部或外部SVG clipPath 元素的URL。basic-shape 在CSS Shapes规范中定义的基本形状函数。geometry-box 与basic-shape结合使用为基本形状提供参考框。none 未应用任何剪辑。
如果你正在寻找一个互动工具来尝试 clip-path 不妨试试clippy它可以让你玩弄不同的形状并生成相应的CSS代码。
8. writing-mode
writing-mode 属性允许我们控制文本的排列方式无论是水平还是垂直并确定块的进展方向。虽然这不是一个全新的属性但对许多开发人员来说仍然不太熟悉。它值得探索因为它在文本布局方面提供了灵活性特别是在处理需要垂直或侧向书写的语言时。
writing-mode 属性支持以下值
horizontal-tb内容从左到右水平流动从上到下垂直流动。下一行水平线位于上一行的下方。vertical-rl内容从上到下垂直流动从右到左水平流动。下一条垂直线位于上一条线的左侧。vertical-lr内容从上到下垂直流动从左到右水平流动。下一条垂直线位于前一条线的右侧。sideways-rl内容从上到下垂直流动所有字形甚至垂直书写的字形都向左侧倾斜。
目前只有Firefox支持最后两个值。
需要注意的是 writing-mode 的影响在英语等语言中可能不会立即显现但在需要垂直或横向排列的语言中它变得更加重要。为了全面了解这个属性建议尝试使用不同的语言和文本布局。
这里有一个例子来说明 writing-mode 属性的工作原理
.container {writing-mode: vertical-rl;
}通过将 writing-mode: vertical-rl 应用于容器元素该元素内的内容将从上到下垂直流动并且字形将向右侧设置。这个属性在创建独特和视觉上吸引人的设计时非常有用特别是在需要垂直或侧向文本的情况下。
9. aspect-ratio
aspect-ratio 属性是CSS的一个相对较新的添加它允许我们控制元素的宽高比。它提供了一种简单的方法确保元素保持特定的宽高比无论其内容或视口的大小如何。
设置元素的宽高比在处理响应式设计或保持特定视觉比例时非常有用。例如可能希望创建一个容器始终保持16:9的宽高比确保图像无论其原始尺寸如何都能正确显示。
aspect-ratio 属性的语法很简单
.element {aspect-ratio: width / height;
}width 和 height 值表示元素的期望宽高比。可以使用任何有效的CSS长度值来设置宽度和高度。宽高比可以用小数、分数或百分比表示。这是一个将容器设置为16:9宽高比的示例
.container {aspect-ratio: 16 / 9;
}通过应用这个CSS容器将始终保持16:9的宽高比无论其内容或视口大小如何。这在响应式设计中特别有用其中元素需要适应不同的屏幕尺寸同时保持其宽高比。
总结
将这些较少为人所知的CSS属性融入到你的项目中不仅会扩展你的知识还会为你提供额外的工具来创建出色的设计并优化性能。
记住在使用这些属性时考虑浏览器支持和潜在的跨浏览器问题是至关重要的。始终使用“Can I use”等工具检查这些属性的兼容性以确保在不同浏览器上获得一致的体验。
交流 有梦想有干货微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录有一线大厂面试完整考点、资料以及我的系列文章。
