![](https://img-blog.csdnimg.cn/20210322094552381.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 94
关于CSS的一些知识点
鹏多多.
接受失败,但绝不选择放弃!
展开
-
原生css实现fullPage的整屏滚动贴合
目录1,前言2,效果展示3,属性说明3.1 scroll-snap-type3.2,scroll-snap-align4,实际使用4.1,兼容性1,前言今天摸鱼的时候,发现一个很有意思的css属性scroll-snap-type,属性的解释是:定义在滚动容器中的一个临时点如何被严格的执行。听起来有点模糊,大致意思就是可以设置滚动容器中子元素的滚动动作,查看了一下MDN文档,我制作了一个简单的仿fullPage整屏滚动的deme,纯css实现。2,效果展示完整代码如下:<!DOCTYPE原创 2021-11-08 10:03:23 · 897 阅读 · 0 评论 -
学会这些CSS技巧让你写样式更加丝滑
目录1,前言1,calc()2,min()3,max()4,clamp()5,gap6,writing-mode1,前言记录一些很好用的css属性1,calc()calc()函数用于动态计算长度值,任何长度值都可以使用calc()函数进行计算,需要注意的是,运算符前后都需要保留一个空格,例如:.box{ width: calc(100% - 10px) height: calc(100% - 2rem)}2,min()min()函数允许你从逗号分隔符表达式中选择一个最小值作为cs原创 2021-07-12 09:33:21 · 176 阅读 · 0 评论