前端-CSS
前端-CSS
REX_PERSIST
这个作者很懒,什么都没留下…
展开
-
css开发技巧(部分结合sass使用)
css开发技巧原创 2023-02-09 19:01:28 · 11033 阅读 · 0 评论 -
grid布局
但 flex 布局和 Grid 布局有实质的区别,那就是 flex 布局是一维布局,Grid 布局是二维布局。Grid 布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。似乎一切进行得很顺利,但是某天 UI 来说,每个网格元素的长度可能不相同,这也简单,通过 span 关键字进行设置网格项目的跨度,grid-column-start: span 3,表示这个网格项目跨度为 3。利用这个特性,我们能够轻易实现一个等分响应式。原创 2022-11-30 15:41:24 · 506 阅读 · 0 评论 -
卡片鼠标移入移出放大缩小并修改图片
卡片鼠标移入移出放大缩小并修改图片原创 2022-09-20 16:07:41 · 202 阅读 · 0 评论 -
抽屉动画实现
抽屉动画原创 2022-09-20 14:08:45 · 675 阅读 · 0 评论 -
文字翻转效果
文字翻转效果原创 2022-09-14 16:38:35 · 389 阅读 · 0 评论 -
css3实现彩色渐变文字
css3实现彩色渐变文字原创 2022-09-13 17:29:31 · 629 阅读 · 0 评论 -
浏览器自定义滚动条样式
浏览器自定义滚动条样式原创 2022-09-13 16:48:12 · 1764 阅读 · 0 评论 -
css实现卡片展开效果
css实现卡片展开效果原创 2022-09-13 15:54:32 · 775 阅读 · 0 评论 -
css实现hover边框动画
css实现hover边框动画原创 2022-09-13 15:48:09 · 531 阅读 · 0 评论 -
CSS样式整理
(1)百分比布局,要结合min-width使用,使用定宽的话会出现文字脱离盒子的情况(2)no选择器使用 div:not(:last-child){}(3)div默认一行的情况下,div默认跟随父级结构宽度,如果div暴露在最外层的div中,那么默认就是100%,在此情况下设置宽度跟随文字自适应,设置width:fit-content;但是一般情况下,一行有多个div或者其他元素情况下,宽度是自动自适应的(4)修改滚动条样式/*修改滚动条样式*/div::-webkit-scrollbar{原创 2022-03-30 14:26:47 · 74 阅读 · 0 评论 -
position:sticky失效问题剖析
sticky失效原因position:sticky生效的原理position:sticky生效的原理在 W3 官方文档中的定义是:Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.通俗来说就是,Sticky 定位类似于相对定位relative,(当它表现为 fixed 定位原创 2022-03-10 16:17:48 · 10139 阅读 · 1 评论