css
文章平均质量分 80
庇耳拉海莱
这个作者很懒,什么都没留下…
展开
-
CSS overflow-anchor
为了认识这个属性, 我们需要先看一种常见的现象. 即在网页加载中, 图片常常比文字加载更慢, 这样图片加载完成后可能会将文字向下顶. 比如下图演示原创 2023-12-23 11:27:03 · 955 阅读 · 0 评论 -
CSS margin-trim
TOC/TOC。原创 2023-12-16 09:48:41 · 1139 阅读 · 0 评论 -
CSS 滚动捕获 scroll-margin
TOC/TOC。原创 2023-12-02 11:03:58 · 1273 阅读 · 0 评论 -
CSS 滚动捕获 scroll-padding
TOC/TOC。原创 2023-12-02 10:53:03 · 283 阅读 · 0 评论 -
CSS滚动捕获 scroll-snap-align
看到align, 就条件反射想到对齐方式, 嗯猜对了. 不过要先看一下若干指定了盒子的, 即盒子snap area和滚动容器的snapport的对齐方式.这个属性是定义在滚动元素上, 而不是滚动容器上。原创 2023-11-18 10:02:24 · 886 阅读 · 0 评论 -
CSS 滚动捕获 scroll-snap-type
CSS 滚动捕获 scroll-padding原创 2023-11-13 09:09:01 · 1112 阅读 · 0 评论 -
CSS 滚动捕获 Scroll Snap
CSS滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图A或者图B, 而不能停在A和B的中间.比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为CSS。原创 2023-11-06 09:05:00 · 736 阅读 · 0 评论 -
CSS 滚动驱动动画与 @keyframes 新语法
keyframes。原创 2023-10-28 09:17:40 · 574 阅读 · 0 评论 -
CSS 滚动驱动动画 timeline-scope
TOC/TOC。原创 2023-10-21 08:09:44 · 555 阅读 · 0 评论 -
CSS 滚动驱动动画 animation-range
TOC/TOC这个属性可同时对和这两种不同时间线驱动的动画起效果!还记得之前在中看到的例子吗,是以元素开始出现为0%, 完全离开滚动容器后为100%. 实际上我们可能需要更多类型的进度, 比如开始出现(0%)和完全出现(100%), 或准备离开(0%)和完全离开(100%). 如下这个时候就需要大放异彩了, 因为它改变的就是动画范围.原创 2023-10-14 09:21:27 · 769 阅读 · 0 评论 -
CSS 滚动驱动动画 view-timeline-inset
TOC/TOC。原创 2023-09-30 16:13:29 · 612 阅读 · 0 评论 -
CSS 滚动驱动动画 view-timeline (view-timeline-name ❤️ view-timeline-axis )
我们之前在中提到了一个因为绝对定位导致滚动无效的问题, 并使用成功解决了这个问题, 而起到的作用就是指定到底是哪个元素提供与此相似,定义了一个具名的, 通过滚动容器(scroller)中的某个元素(subject)可见性的改变来推动这个时间线. 而就定义在subject上.默认情况, 当subject将要出现在滚动容器时, 时间线进度是0%;当subject刚刚完全离开滚动容器时, 时间线进度是100%原创 2023-09-24 14:57:48 · 324 阅读 · 0 评论 -
CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )
TOC/TOC。原创 2023-09-16 11:14:34 · 810 阅读 · 0 评论 -
CSS 滚动驱动动画 view()
TOC/TOC。原创 2023-09-09 09:57:59 · 819 阅读 · 0 评论 -
CSS 滚动驱动动画 scroll()
通过scroll()指定可滚动元素与滚动轴来为容器动画提供一个匿名的通过元素在顶部和底部(或左边和右边)的滚动推进. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为0%, 滚动结束被转化为100%如果scroll()指定的滚动轴不包含滚动条, 也就是元素在滚动轴的方向不可滚动, 那么timeline的进度为0%原创 2023-09-03 22:27:23 · 1909 阅读 · 0 评论 -
响应式图片与 CSS image-set
TOC/TOC。原创 2023-08-30 09:11:15 · 874 阅读 · 0 评论 -
CSS :nth-child
nth-child 伪类根据元素在同级元素中的位置来匹配元素.TOC/TOC很简单的例子, 来直觉上理解这个伪类的意思原创 2023-07-22 10:23:25 · 969 阅读 · 0 评论 -
CSS list-style-position
元素的第一个子元素是块元素, 那么不同的浏览器会有不同的渲染结果.元素渲染在同一行, 但是我实测不是这样, 如下图, 在。这个属性是可以继承的, 所以上面的代码中将其应用到。伪元素不见得都有效, 除非该元素的。的父元素上, 从而使得所有。可以取值如下, 效果如上图。除此之外, 给任意元素添加。版本下, 块元素渲染在。原创 2023-05-27 09:50:31 · 303 阅读 · 0 评论 -
导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 backdrop-filter
宽高的背景「有一定距离」. 实际上这些每个小背景之间是互相紧密排列的没法强行增加间隔. 所以我们使用径向渐变, 从透明色渐变为白色, 这样不同背景都是以白色互相连接而透明部分互相隔离, 看起来就是点阵式了. 下图是灵魂画手的简笔画说明😅。允许开发者将模糊或色彩偏离等图形效果应用到元素背后的区域. 因为它应用于元素背后所有内容, 因此如果你想要看到效果必须将元素的背景设置部分透明.看完上面代码, 会让人有一点疑惑, 好像很多滤镜都生效了, 但是有两个就是没有生效, 分别是。是添加到前面的元素的。原创 2023-05-07 16:27:52 · 563 阅读 · 1 评论 -
与其焦虑被 AI 取代或猜测前端是否已死, 不如看看 vertical-align 扎实你的基础!!!
设置display值为inline和table-cell的元素竖直对齐方式.原创 2023-05-01 15:33:52 · 602 阅读 · 0 评论 -
CSS :autofill 如何覆盖浏览器自动填充表单的样式
autofill伪类匹配浏览器自动填充值的input元素. 如果用户继续编辑这个元素内容就会停止匹配.原创 2023-04-18 09:08:06 · 926 阅读 · 0 评论 -
CSS prefers-color-scheme 与 matchMedia() 深浅色模式
我们只需要写好媒体查询, 然后修改系统的颜色主题, 浏览器的页面就会自动响应变化, 不需要人工干预哦~变量, 不然一个颜色如果在很多地方都用到就需要写很多次修改起来也很麻烦。的设置-通用中, 可以选择设置系统的主题为浅色, 深色或自动。当然, 如果想要想要同时对多个媒体查询的结果匹配, 可以使用。首先来看一个例子. 首先我们获得匹配结果, 然后通过注册。对这个媒体查询的匹配结果, 进而做出一些处理.是否匹配对应的媒体查询并返回一个。对象. 通过返回对象, 可以检测。欢迎进群讨论前端工作与生活。原创 2023-04-08 09:44:19 · 869 阅读 · 0 评论 -
CSS 重新认识 !important 肯定有你不知道的
如果将!important添加到CSS变量声明中, 只有赋值时!important才起作用. 也就是将pink复制给变量时起了作用, 因为如果没有!important的值应该是skyblue赋值之后!important就从自定义属性上「脱落」了, 使用var()函数时并不会传递!important.box8 {从下图就可以看出,.box8的背景色是red, 因为关于背景色的两条CSS声明都是一般声明.原创 2023-02-11 11:12:17 · 11412 阅读 · 0 评论 -
CSS @layer 新规则 超爱的
layerCSS规则用来声明一个级联层(), 并且在多个级联层的情况下定义优先级.原创 2023-02-03 09:27:38 · 796 阅读 · 1 评论 -
图文排版 之 line-height
设置. 结果就是百分数乘以元素自身计算出来的字体大小, 百分比也可能带来意想不到的效果., 这样可以提高用户在低可视条件下的阅读体验, 同时帮助有阅读困难的用户.3️⃣想要实现类似圆形文字头像的效果, 如果想要通过设置四边相等的。有多少取决于浏览器的实现, 包括火狐浏览器在内的桌面浏览器使用。糟糕的事情出现了, 文字挤在了一起, 这是因为子元素设置的。的高度默认是由其子元素撑起的, 但是负责撑起的却不是。制定了行盒子的最小高度. 对于非替换的内联元素,的方式, 可以避免因为继承而出现的奇怪结果.原创 2022-12-17 21:07:46 · 528 阅读 · 0 评论 -
CSS-TRICKS 中标题 hover 看到的问题的注意
CSS-TRICKS。原创 2022-12-10 09:14:47 · 173 阅读 · 0 评论 -
文本的换行与包裹 之我都忘了我写过 break-word
从图片中可以看出, 两个属性对中文没有影响, 表现一致. 只有英文时, 首先。这个已被弃用的属性吧. 前面说过这个属性的效果与。时考虑到了软换行机会所以任何地方都可以换行, 而。如果在新的一行显示完全不用换行, 但是。就算放在新的一行显示还是会断行, 但是。的值是什么. 有趣的在后半句, 因为。时不考虑软换行, 因此表现与预期相似。共同作用效果相同, 而不论。还是在原行显示. 其次,其实上面总结一下就是,还是将其放在新的一行.指定如何在单词内断行。原创 2022-10-27 21:36:17 · 288 阅读 · 0 评论 -
文本的换行与包裹 之很懒不想更新的 overflow-wrap
当一个不可分割的字符串太长要溢出其行盒子时, 这个属性设置是否允许在字符串中换行。时考虑软换行的意思就是每个中文、每个英文字母、每个标点符号能断就断, 而。从上图还是可以比较清楚地看出, 两者的不同是处理在标点符号左右的软换行.和我们认知的计算规则比较相似, 而且像逗号(📕原本这个属性是一个非标准的微软私有属性叫。不会在表达符号左右的软换行处换行, 而。生效的前提是浏览器允许换行, 如果使用。)这样的避首标点也没有出现在一行的开头.原创 2022-10-16 22:43:41 · 399 阅读 · 0 评论 -
文本的换行与包裹 之 自定义连字符 hyphenate-character
所有自动添加连字符和软换行机会可以添加的连字符的地方都会根据。首先就要说兼容性的问题, 目前(2022年10月)设置的字符串很长浏览器回如何处理. 首先。这个属性设置在一行结尾断行处的连字字符。浏览器作为实验性特性支持这个。浏览器支持, 但是都需要添加。从下面图中可以看出来, 首先。浏览器会在字符串很长时调整。这样强制换行的地方, 如。浏览器没有任何处理😅。原创 2022-10-12 08:58:47 · 250 阅读 · 0 评论 -
文本的换行与包裹 之 真的很少使用的 hyphens?
再者, 连字符仅仅是一种渲染结果, 其不会影响文档真实的内容, 不会影响文本选择也不会影响搜索。可以完全不使用连字符, 可以让浏览器决定什么时候连字符, 可以也可以手动控制什么时候使用.处), 但是如果软换行处所在的单词会换行, 那么就会在软换行处换行并插入换行连字符(规范中并没有定义如何使用连字符, 因此具体的连字可能浏览器与浏览器不同。元素导致换行时, 不会添加连字符的. 从截图中可以看出, 如果是。处). 如果是软换行, 如果软换行处不会换行, 也不会插入连字符(告诉浏览器在换行时如何使用连字符.原创 2022-10-06 09:26:44 · 720 阅读 · 0 评论 -
文本的换行与包裹 之可能是全网最详细的 line-break 中文介绍
line-break设置如何处理带有标点和符号的中文、韩文和日文() 的换行这个属性有五个关键词的值autoloosenormalstrictanywhereCSSHTML保留的空白字符anywhere下面的内容是从学到的, 不过是英文的, 有兴趣的可以看, 关于规则的介绍也会忽略不常见的语种。原创 2022-09-25 16:27:18 · 1155 阅读 · 0 评论 -
文本的换行与包裹 之 简介
介绍在CSS中溢出文本的各种处理方式。原创 2022-09-17 10:28:26 · 274 阅读 · 0 评论 -
CSS scroll-behavior
当滚动通过导航或者CSSOM滚动API触发时的滚动行为只有两个关键字属性值.autosmooth📕注意除了上面两种滚动触发外的任何滚动, 比如用户使用鼠标滚动, 都不会被这个属性影响.当这个属性在定义在标签, 其作用域整个视窗. 如果这个属性定义在将不会作用于视窗.📕浏览器可以忽略这个属性的值😅先看代码...原创 2022-08-31 08:01:33 · 473 阅读 · 0 评论 -
CSS accent-color + 自己封装 radio
它是一种典型的明亮颜色,与配色方案中更实用的背景和前景颜色形成对比.在开发中,伪元素为选中时的填充.当然不要忘记填充默认情况是不显示的,这一点通过。属性来修改黑色圆环的颜色.索性我自己写一个把,参考了。相邻兄弟选择器选中后面的填充让其出现.元素的活动部分的背景颜色就可以用。实现的思路,我写的比较简单.选中时在不同浏览器下的表现.我们可以控制那些元素呢?选中时对号的颜色是会根据。用来改变某些元素的控件的。的元素位置关系,使用。的颜色变化的.如果。为外面的圆环,使用。📕值得注意的一点是,...原创 2022-07-21 10:28:35 · 701 阅读 · 0 评论 -
CSS margin 重叠(margin collapse)
首先有两个地方是我自己以前也没有注意的非替换元素的内联元素(,等),设置上下margin没有用.但是设置左右margin是有效果的.而替换元素(等),设置上下左右四个margin都有效果其次就是只有上下margin会发生重叠(这个说法不严谨,后面会解释).进入正题,上下margin重叠时,谁的值(绝对值)更大最终的margin大小就是谁的值.如果上下margin大小相同也是这样....原创 2022-07-19 09:40:09 · 1774 阅读 · 0 评论 -
CSS 不需要清除浮动的圣杯布局~面试可能会问
网上很多关于圣杯和双飞翼布局的教程, 我看了下实现都是需要中间的三个元素 布局而且需要清除浮动. 但是真的需要三个元素都 吗? 不清除浮动可以吗?先看效果 的结构很清楚, 上中下分别是 , 和 , 和常见圣杯布局的是, 中间区域和两边区域的位置.从下图中可以看出来的是, 中间的 从 的第一个元素变成了最后一个元素. 这样写的目的是什么? 因为我们想要 显示在中间, 如果 前面的元素为 , 那么后面的 自然就会正常显示, 即水平填满父容器宽度且上边界和父元素的上边界重合.但是这样问题又来原创 2022-07-01 19:43:50 · 194 阅读 · 0 评论 -
CSS 计数器之 counters()
有两种形式通常用在伪元素内, 但是也可以用在任何支持 类型的值上. 其返回的字符串包含所有指定名字的计数器的值, 从最外层到最内层, 由 这个参数分隔.如果没有指定计数器的样式, 那么就默认展示十进制数字, 比如 , 这样. 我们也可以通过这个参数让计数器展示中文汉字, 👉详见这里👈计数器本身没有视觉效果, 即我们无法知道当前计数器的值为多少. 只有使用 或 函数才让计数器的值展示出来.📕函数可以和任意 CSS 属性使用, 但是除 属性之外的属性支持仍处在试验阶段通过 和 稍微组织一下...原创 2022-06-26 21:33:10 · 646 阅读 · 0 评论 -
CSS 计数器之 counter()
计数器本身没有视觉效果, 只有通过 或 返回开发者定义的字符串或图片才能是计数器发挥作用. 表示 , 因此下面的语法都是合法的先看一个案例 用来标识计数器的名字, 大小写敏感. 👉官方文档在这里👈.这是一个 类型的数据. 可以包含一个或多个如下字符一些其他规则可以是 list-type-name, @counter-style, 或者 symbols(), 其作用简单来说就是设置计数器的值如何展现. 默认为十进制数字.下面看几个在实际开发中会用到的例子, , 等...原创 2022-06-23 12:57:36 · 750 阅读 · 0 评论 -
CSS 计数器之 counter-increment 和 counter-set
表示 的属性值可以是 或者 前面的部分, 互斥关系. 其中 是默认值. 中的 表示前面中括号的内容是. 表示 . 所以下面的这些表达式都是合法的.他们的意思分别为一个简单的案例原创 2022-06-11 09:27:02 · 665 阅读 · 0 评论 -
CSS 计数器之 counter-reset
如果之前没有了解过 计数器, 我们首先看一个案例, 弄清楚关于计数器的 属性都是干什么的, 之后逐个了解这些属性.原创 2022-06-09 14:38:48 · 2306 阅读 · 0 评论