html
weixin_43795761
这个作者很懒,什么都没留下…
展开
-
前端进阶html+css03----粘性定位
大家都知道position:absoulte/relative/fixed, 今天介绍一个position:sticky(粘性定位)。3.当内容足够多并往下滚动的时候,其它元素变化,但粘性定位的区域会一直固定在你设置的位置不动。2.使用黏性定位必须要有一个“滚动的祖先元素”,没有滚动的时候和relative效果差不多。4.你设置的(top/bottom/right/left)是相对于滚动父元素的。1.粘性定位是相对定位和绝对定位的结合体。top改为20px的时候滚动时效果。原创 2023-02-27 16:28:00 · 597 阅读 · 0 评论 -
前端进阶html+css06---清除浮动
使用display:float;会有高度塌陷的问题(子元素不会再汇报高度给父元素)。所以我们需要清除浮动。clear可以指定一个元素是否移动到之前浮动元素的下面。原创 2023-02-25 15:03:14 · 49 阅读 · 0 评论 -
前端进阶html+css05---justify-content: space-between对齐方式的问题(最后一行元素不够)
注:需要添加n-2个span,n为一行小方块的数量,因为当最后一行只有一个小方块的时候,默认放在最左边,不需要添加额外的小方块。只有当最后一行有两个及以上的小方块才需要填充。正常情况下10应该在6的下面。但是justify-content: space-between会导致下面这种情况。添加额外的span, 让span的宽高和粉色小方块的宽一样,高为0。原创 2023-02-24 22:36:51 · 1656 阅读 · 0 评论 -
一种常用的布局(header和footer固定, 中间一层可以滚动)
一直以为想要footer固定在最下面的效果应该很难(以为需要定位什么的),其实只要给中间部分一个固定的高,然后做成滚动效果就可以轻松实现。原创 2023-02-24 22:00:49 · 163 阅读 · 0 评论 -
如何有滚动效果,但隐藏滚动条(移动端)
【代码】如何有滚动效果,但隐藏滚动条(移动端)原创 2023-02-24 21:28:34 · 252 阅读 · 0 评论 -
前端进阶html+css02----精灵图的使用(雪碧图)
精灵图(css sprites)也叫雪碧图,就是把许多图片制作成一图片。通过设置位置来显示你需要的图片。介绍一个获取精灵图位置的小工具。原创 2023-02-13 22:49:58 · 412 阅读 · 0 评论 -
前端进阶html+css01----伪元素::after和::before
我们常用::after和::before配合content:"来给元素的前后添加元素,一般用来添加icon.原创 2023-02-09 21:51:11 · 159 阅读 · 0 评论