![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Css/Css3
文章平均质量分 83
Css/Css3
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
分享10 个功能强大的单行 CSS 布局技巧
对于下一个布局,这里主要要注意的是 justify-content: space- Between ,它将第一个和最后一个子元素放置在其边界框的边缘,剩余空间均匀分布在元素之间。这些子元素的基本最小尺寸是 150px,最大尺寸是 1fr,这意味着在较小的屏幕上它们将占据整个 1fr 宽度,当它们达到 150px 宽度时,它们将开始流到同一行。1fr页眉和页脚内容设置为自动采用其子级的大小并将剩余空间(1fr)应用于主区域,而自动调整大小的行将采用其子级最小内容的大小,以便内容大小增加,行自身会调整。转载 2024-06-06 10:48:39 · 23 阅读 · 0 评论 -
父元素设置display:flex后,子级元素高会跟随其他元素自动撑开问题
子级元素增加:align-self:baseline。转载 2024-06-05 09:22:57 · 76 阅读 · 0 评论 -
100 个鲜为人知的 CSS 技巧汇总整理合集
font-feature-settings 允许您启用或禁用字体中的 OpenType 功能,例如,连字、字距调整和样式替代。text-decoration-style 指定用于文本装饰的线条样式,允许您选择不同的线条样式,例如实线、双线、点线或虚线。text-decoration-skip-ink 控制文本装饰是否应跳过上升部分和下降部分,从而改善下划线和穿线的外观。text-align-last 确定块元素中最后一行文本的对齐方式,从而提供对多行块中文本对齐的精确控制。使用字体显示:交换;转载 2024-06-05 08:41:09 · 10 阅读 · 0 评论 -
纯 CSS 实现标签自动显示超出数量
以上就是本文的全部内容了,不知道你学会了吗?下面总结一下实现重点:很多时候,CSS并没有直接的实现方式,需要“绕”点弯路CSS计数器可以实现数字累加CSS滚动驱动动画可以检测元素是否在可视范围之内CSS滚动驱动动画还能检测元素是否内容超出计数累加器可以放在滚动驱动动画中,这样在动画触发时也就相当于计数器生效了,这样就能统计可视区的标签数量了样式查询只能匹配到子元素,但是用子元素会受到mask遮罩的影响负margin可以借助前一个元素来隐藏后一个元素。转载 2024-06-04 08:45:38 · 12 阅读 · 0 评论 -
CSS数学函数:calc、min、max、clamp
介绍了一些最受欢迎的CSS数学函数。讨论CSS数学函数的话题,以实现各种布局结果。例如,如何使用几行CSS创建响应式容器,如何添加自适应填充,以及如何使侧边栏真正像侧边栏一样运作。转载 2024-06-04 08:41:55 · 12 阅读 · 0 评论 -
Vue深度选择器 ::v-deep、 :deep()
deep()是一个伪类,它可以使处在scoped样式中的选择器影响到子组件。使用scoped后,父组件的样式将不会渗透到子组件。不过,子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发,调整其子节点根元素的样式。转载 2024-06-04 08:41:33 · 246 阅读 · 0 评论 -
纯 CSS 检测文本是否溢出
CSS 就是这么神奇,将两个几乎不相关的特性组合起来,就能实现完全不一样的功能,这可是在其他语言中做不到的,简单回顾一下CSS检测代码.content{/*注意溢出方向*/from,to {/*滚动驱动动画*//*查询溢出状态*/是不是非常容易,几乎是无侵入式的,下面总结一下本文重点要实现文本溢出检测,需要用到两个新特性,CSS滚动驱动动画和CSS样式查询CSS滚动驱动动画可以检测出容器是否可滚动,也就是溢出,即使是在超出隐藏的情况下。转载 2024-06-04 08:41:01 · 41 阅读 · 0 评论 -
CSS 实现从上到下从左到右的列表布局
一个非常实用的布局小技巧,你学到了吗?下面总结一下正常网页中的列表都是从左到右,从上到下的,但有时候也会碰到从上到下,从左到右的grid布局可以实现m*n的网格布局grid布局可以通过,改变网格的排列方式grid布局无法自动改变纵向的数量,让整个表格尽可能等分,需要借助一点点JScolumns布局可以直接实现从上到下,从左到右的布局布局还是尽量通过CSS实现比较好。转载 2024-06-04 08:40:27 · 82 阅读 · 0 评论 -
【动画进阶】CSS 也能实现完美的文字轮播与图片轮播效果
OK,本文到此结束,希望本文对你有所帮助 :)如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。转载 2024-06-03 08:37:43 · 9 阅读 · 0 评论 -
分享15个高级前端开发小技巧
当我们学习完了这 15 种不需要 JavaScript 的高级 Web 开发技术时,很明显 你的HTML 和 CSS 的力量得到了充分的展示。关注我们,一起揭开现代 Web 开发的秘密,一次一种无 JavaScript 的技术。随着CSS中column属性的出现,我们无需编写脚本即可实现复杂的多列布局。使用 Flexbox 实现等高列:告别用于均衡列高的 JavaScript,拥抱 CSS Flexbox 的强大功能,实现灵活且统一的布局。通过CSS中的Flexbox布局,我们可以毫不费力地实现等高的列。转载 2024-05-31 09:00:18 · 47 阅读 · 0 评论 -
两行 CSS 轻松实现明暗模式
在 Web 开发中,为了根据用户的偏好模式(明暗模式)调整网页颜色,我们以前可能会使用媒体查询(函数。此函数能够根据当前颜色方案自动选择两种颜色中的一种进行输出,从而实现颜色的自适应显示。转载 2024-05-30 09:00:29 · 10 阅读 · 0 评论 -
66 个 CSS 函数,一网打尽!
随着技术的不断进步,CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力,还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数,逐一剖析它们的功能和用法,一起进入这个充满魔力的 CSS 函数世界!转载 2024-05-30 08:59:32 · 9 阅读 · 0 评论 -
2024 年每位前端开发者都应知道的 5 个 CSS 代码段
每个前端开发者都应该知道,:has() 不仅仅是一个“父级选择器”,subgrid 的方式和原因,如何使用内置 CSS 语法进行嵌套,如何让浏览器在标题文本换行之间取得平衡,以及如何使用容器查询单元。转载 2024-05-30 08:53:10 · 10 阅读 · 0 评论 -
水波纹加载动画
知识点:① 伪元素的灵活使用② 多个animation动画的配合使用思路: 先画一个带背景的圆形,然后利用伪元素创建两个不同圆角矩形,放在圆形上层,遮挡圆形背景,然后加上旋转以及上移动画就可以了。核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。转载 2024-05-30 08:52:05 · 11 阅读 · 0 评论 -
现代 CSS 解决方案:文字颜色自动适配背景色!
到今天,我们可以利用 CSS 提供的各类颜色函数,对颜色有了更为强大的掌控力。很多交互效果,不借助 JavaScript 的运算,也能计算出我们想要的最终颜色值。本文简单的借助:使用 CSS 相对颜色,实现统一按钮点击背景切换使用 CSS 相对颜色,实现文字颜色自适应背景两个案例,介绍了 CSS 相对颜色的功能。但它其实还有更为广阔的应用场景,完整的教程,你可以看这里 -- Chrome for Developers- CSS 相对颜色语法[30]。转载 2024-05-29 09:12:26 · 78 阅读 · 1 评论 -
细数那些惊艳一时的 CSS 属性
以前确实是这样的,直到后来。一般用做边距,让两个元素隔开一点距离,但是对于一些场景下,我们很难通过计算得到一个除的尽的值,比如 100px 我要让 3 个元素等分,且每个元素隔开 10px,这就很尴尬了。用来做带背景的文字效果,相信大家平时浏览一些网站的时候都会看到类似的实现,实际上通过 CSS 我们也能做到这种效果,可不要傻傻的以为都是用制图工具做的。网页和 APP 有个不同点是,网页上的字是可以通过光标选中的,而 APP 的不行。属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。转载 2024-05-23 09:22:10 · 8 阅读 · 0 评论 -
14 个你需要知道的实用 CSS 技巧
Glass.CSS(地址:https://css.glass/) 是目前最流行的玻璃形态生成器,我们可以利用它为我们的项目创建 CSS 玻璃效果。Clippy-CSS 剪辑路径生成器是一种通过将元素剪辑为基本形状(圆形、椭圆形、多边形或插图)或 SVG 源来在 CSS 中创建复杂形状的快速简便的方法。下面示例中的实际 div 是紫色的,盒子阴影是天蓝色的,并且设置为向右和底部 10 个像素。我们可以使用此属性截断溢出的文本。使用 clip-path 属性,您可以只显示元素的一部分,同时隐藏其余部分。转载 2024-05-23 09:14:32 · 11 阅读 · 0 评论 -
前端 ”一键换肤“ 技术方案
1、建一个存放公共css变量的js文件,将需要定义的css变量存放到该js文件,通过css-vars-ponyfill 插件换肤。提供多种样式,给不同的主题定义一个对应的 CSS 选择器。在组件中保留不变的样式,将需要变化的样式进行抽离。3、安装css-vars-ponyfill 插件。根据不同主题通过切换CSS选择器设置不同的样式。提取公共CSS样式, 通过变量的形式切换主题。5、main.js中调用theme.js。选择器的方式实现主题样式的切换.2、页面中使用css变量。4、封装切换主题的js。转载 2024-05-22 09:13:19 · 15 阅读 · 0 评论 -
70 道高级 CSS 面试题及其答案与代码示例(上篇)
您可以使用 Flexbox 创建粘性页脚,方法是将容器的高度设置为 100vh(视口高度)并将 flex-grow: 1 应用于内容容器。特异性是根据选择器的组合计算的,例如,元素类型、类、ID 和内联样式。CSS 网格是一个功能强大的布局系统,使您能够创建复杂且响应灵敏的基于网格的布局。通过将过渡应用到下拉容器的 max-height 或 opacity 属性,您可以创建无缝的打开和关闭效果。要创建淡入效果,您可以定义一个动画,在指定的持续时间内将元素的不透明度逐渐从 0 更改为 1。转载 2024-05-21 09:08:01 · 11 阅读 · 0 评论 -
9 个你不知道的 CSS 伪元素
类似于 ::first-letter,::first-line 伪元素以文本或块级元素的第一行为目标。::marker 伪元素以列表项的标记为目标,例如无序列表中的项目符号点或有序列表中的数字。在上面的代码中,段落中的语法错误将以划线文本修饰和红色显示,而拼写错误将以下划线和蓝色显示。在上面的代码中,当一个视频元素处于全屏模式时,它后面的背景将有一个灰色的背景色。在上面的代码片段中,每个段落的第一个字母将以更大的字体显示并显示为红色。在上面的代码中,视频元素中的提示文本将具有白色文本颜色和黑色背景。转载 2024-04-29 13:28:26 · 6 阅读 · 0 评论 -
css文字自适应铺满一行
css文字自适应铺满一行原创 2024-04-07 16:13:29 · 227 阅读 · 0 评论 -
css中的网格布局
网格是由一系列水平及垂直的线构成的一种布局模式。根据网格,我们能够将设计元素进行排列,帮助我们设计一系列具有固定位置以及宽度的元素的页面,使我们的网站页面更加统一。一个网格通常具有许多的列(column)与行(row),以及行与行、列与列之间的间隙,这个间隙一般被称为沟槽(gutter)。也就是下面这张图:我们一般会根据我们的设计图来决定网格的布局长什么样子。接下来我们从一个基础的网格系统开始学起来。转载 2023-09-14 16:49:25 · 218 阅读 · 0 评论 -
12 个实用的高级前端 CSS 技巧
当你遇到类似的问题时,可以使用flex来实现智能布局!当输入框被选中时,默认会有一条蓝色状态线,可以使用outline:none将其删除。除了最后一个元素之外的所有元素都需要一些样式,这可以使用 not 选择器轻松实现。当前,前端中CSS的单位为vh,元素高度样式设置为height:100vh。方案三:在img的样式中添加vertical-align:bottom。方案四:增加父元素的样式为line-height:5px。方案二:在img的样式中添加display:block。有时需要修改光标的颜色。转载 2024-05-20 10:02:03 · 2 阅读 · 0 评论 -
DOM 操作成本到底高在哪儿?
Document Object Model 文档对象模型什么是DOM?可能很多人第一反应就是div、p、span等html标签(至少我是),但要知道,DOM是Model,是Object Model,对象模型,是为HTML(and XML)提供的API。HTML(Hyper Text Markup Language)是一种标记语言,HTML在DOM的模型标准中被视为对象,DOM只提供编程接口,却无法实际操作HTML里面的内容。转载 2023-08-18 15:21:48 · 52 阅读 · 0 评论 -
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
其实这一点,刚才的例子已经说明了,如果 CSS 不会阻塞页面阻塞渲染,那么 CSS 文件下载之前,浏览器就会渲染出一个浅绿色的 div,之后再变成浅蓝色。这就证明了 CSS 是不会阻塞 DOM 的解析的,尽管 CSS 下载需要 3s,但这个过程中,浏览器不会傻等着 CSS 下载完,而是会解析 DOM 的。仔细思考一下,其实这样做是有道理的,如果脚本的内容是获取元素的样式,宽高等 CSS 控制的属性,浏览器是需要计算的,也就是依赖于 CSS。然而,其中其实还是有一点细节可以考究一下的,我们一起来好好看看。转载 2023-08-18 15:26:22 · 196 阅读 · 0 评论 -
深入了解Flex布局:构建灵活响应式布局的利器
Flex布局是一种CSS布局模型,它的目标是为了解决传统布局方式在构建复杂布局时的限制和不足。Flex布局的优势在于它提供了强大的自适应能力和灵活性,使得开发人员能够更轻松地实现水平居中、垂直居中、等高列布局等复杂布局效果。转载 2023-09-14 16:47:52 · 90 阅读 · 0 评论 -
Vue3 中css渗透:deep()无效解析
由上可知,:deep() 要生效必须在当前组件某节点下挂载情况下才生效。初步断定,:deep() 的作用是当前组件向下渗透,只要你在这个组件节点下面衍生,那么就会生效;当你垮出了对应的节点,自然就会失效(样式写在父组件:deep,子组件写弹框,只要挂载在父组件衍生到子组件的所有节点皆可生效)。其实可以通过来辨别,相信大家都知道这个是什么意思:这是在标记 vue 文件中 css 时使用scoped标记产生的,因为要保证各文件中的 css 不相互影响,给每个component。转载 2023-08-03 09:41:40 · 3261 阅读 · 0 评论 -
Chrome 112 :CSS 支持嵌套语法、document.domain 正式禁用
上实现平滑的过渡效果是一个非常复杂的任务,我们往往会借助一些三方的动画库去实现,这些库的兼容性和性能往往是比较困扰我们的事情。版本中正式支持了,支持嵌套的样式规则允许我们将规则嵌套在父选择器中,而不需要重复写父选择器,这样就可以极大简化。嵌套语法可以帮助开发者减少选择器的重复编写,同时将相关元素的样式规则放置到一起,也可以更快速的匹配到这些样式的。这个元素,我们就不需要在样式文件里去搜索所有和它相关的选择器的实例了,只需要把这个样式组删除了就可以。) 提供支持,其他的渲染模式的支持也正在施工中 ~转载 2023-04-07 09:43:11 · 255 阅读 · 0 评论 -
2023年CSS自适应正方形必须拿下
在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景,自适应正方形布局是必须要掌握的;接下来采黎带大家揭开css自适应正方形神秘的面纱~转载 2023-04-06 09:23:23 · 186 阅读 · 0 评论 -
除了 filter 还有什么置灰网站的方式?
这里,再简单总结一下。如果你需要全站置灰,使用 CSS 的对于一些低版本的浏览器,使用 SVG 滤镜通过filter引入对于仅仅需要首屏置灰的,可以使用配合对于需要更好兼容性的,使用混合模式的也都是非常好的方式有个小技巧,在 CSS 的世界中,但凡和颜色打交道的事情,你都应该想起filter和。转载 2023-04-06 09:21:35 · 52 阅读 · 0 评论 -
几个有用的 CSS 技巧提供工作效率
我们可以通 CSS 中的cursorbody{除此之外,cursor。转载 2023-04-04 09:48:03 · 45 阅读 · 0 评论 -
48张小图带你领略flex布局之美
最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢?👇48张图带你从0到1掌握flex布局方式。flex布局在某种程度上,简便我们布局的一个难题,接下来的篇幅将介绍它的使用👇需要本文的Xmind导图的话,移步公众号--前端UpUp,回复flex关键字即可。这个时候,是不是需要总结一下呢👇先看看子容器属性👇再看看父容器属性👇。转载 2023-03-30 10:17:59 · 312 阅读 · 0 评论 -
最强大的 CSS 布局 —— Grid 布局
Grid布局相关的属性以及值众多,需要记忆的不少,建议可以跟demo一起结合起来,边敲代码边理解,再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候,做个小demo演示,建议大家可以自己修改看看效果加深记忆Grid布局属性可以分为两大类,一类是容器属性,一类是项目属性。我们先来看容器属性演示地址可以指定网格项目所在的四个边框,分别定位在哪根网格线,从而指定项目的位置grid-column-start 属性:左边框所在的垂直网格线grid-column-end 属性:右边框所在的垂直网格线。转载 2023-03-30 10:18:57 · 1007 阅读 · 0 评论 -
2023很有用的 CSS 技巧属性
我们可以通 CSS 中的cursorbody{除此之外,cursor。转载 2023-03-10 11:12:34 · 317 阅读 · 0 评论 -
2022年我的面试万字总结(CSS篇)
对于选择器的优先级:注意事项:无继承性的属性:1.display:规定元素应该生成的框的类型2.文本属性:3.盒子模型的属性:width、height、margin、border、padding4.背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment5.定位属性:float、clear、position、top、right、bottom、lef转载 2023-02-24 10:23:02 · 188 阅读 · 0 评论 -
原生 CSS Custom Highlight 终于来了
最后,将定义的高亮名称结合,这样就可以自定义选中样式了web 中的“光标”和“选区”,下面用一张图总结一下原理就是这样,下面看一些实例以上就是关于的使用方式以及应用示例了,下面再来回顾一下使用步骤:创建选区,new Range创建高亮,注册高亮,自定义样式,相比传统使用标签的方式而已,有很多优点使用场景更广泛,很多情况下不能修改dom或者成本极大性能更高,避免了操作dom带来的额外开销,在dom较多情况下性能差异至少100倍几乎没有副作用,能有效减少dom。转载 2023-03-01 09:54:11 · 2613 阅读 · 0 评论 -
前端进阶高薪必看-CSS之手写篇
父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。,设置四个方向的值都为 0,并将 margin 设置为 auto,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。,将父级元素设置为相对定位。转载 2023-03-02 11:21:14 · 212 阅读 · 0 评论 -
总结了 42 种前端常用布局方案
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了。本篇文章总结了四十二种CSS的常见布局,这四十二种布局可以细分为如下几类:水平居中垂直居中水平垂直居中两列布局三列布局等分布局Sticky Footer布局全屏布局这些内容也正是本篇文章的目录。转载 2023-02-21 09:55:36 · 149 阅读 · 0 评论 -
CSS预处理器,你还是只会嵌套么
div {复制代码。转载 2023-02-20 10:13:42 · 59 阅读 · 0 评论 -
Vue3组件库工程化实战 --Element3
随着对前端功能和性能的不断提高,前端早就不是一段内嵌于页面的一段JS代码了。已经进化为一个系统复杂的工程了。下面我就结合element3组件库的搭建经验。带大家搭建一个mini版组件库。转载 2023-02-14 11:03:45 · 508 阅读 · 0 评论