欢迎访问我的博客 https://javascript.shop

随笔分类 -  HTML+CSS

flex space-between最后一行对齐问题的解决方案
摘要：背景 常见的一个图文列表设计，通常是这样的，两端顶着容器，中间的间距平均分，如下图的某东商品列表的设计： 列表是这样自适应的，当视窗足够放多少个商品就放多少个，然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同，因此所看到的间距或者每一行的个数都会不同。 方案 想到这种设计，我们学过fle 阅读全文
posted @ 2020-01-03 01:10 孑孓子 阅读(1581) 评论(4) 推荐(0)
css position:sticky的尝试
摘要：前言 sticky这种设计效果是经常出现的，比如陶宝右侧的工具栏，当我们向下滚动到它的位置时，它就会黏住顶部跟随滚动，类似position: fixed的效果，只不过它的触发条件是当我们滚动到所在位置时，才触发fixed的效果的： 我们经常的做法是用JavaScript去监听滚动事件然后进行处理，比 阅读全文
posted @ 2019-12-08 03:19 孑孓子 阅读(433) 评论(0) 推荐(0)
flex下省略号的问题解决
摘要：最近在搞微信小程序，发现flex下使用省略号是没有效果的，而且还会打乱预期的结构，查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下，依然不行，原来在上层父级就是flex那一级别也需要设置 min-width:0; 就是可以理解为 省略号标签的flex-it 阅读全文
posted @ 2019-09-21 23:33 孑孓子 阅读(937) 评论(0) 推荐(0)
flex三个对齐属性的记忆方式
摘要：今天在群里聊天有人说 flex的那几个居中属性好难记，时不时都要尝试一下，或者查看一下文档，现在我把我自己的记忆方式分享一下。。。 1. flex的居中主要是通过这三个属性来实现的： 2. 总结 3. 记忆方式 原文：https://javascript.shop/2019/08/flex-just 阅读全文
posted @ 2019-08-22 21:43 孑孓子 阅读(1284) 评论(0) 推荐(1)
两栏自适应布局延展到多栏自适应布局
摘要：1、网上很多文章了，为什么还要讲？ 说到两栏自适应布局，估计很多人看到这样类似的文章，我经常也看过，但是那些实现方式跟我所经常使用的两种方法不一样，经常使用的意思是，我一遇到这种布局，立马想到的就是使用这种。就像我们拿东西，我们立马就会想到用手拿，当然还有很多方式可以拿到，比如用嘴刁。 所以，当我们 阅读全文
posted @ 2017-08-12 15:12 孑孓子 阅读(377) 评论(0) 推荐(0)
height百分比以及高度自适应问题
摘要：1. 你曾经是否说想要 高度占页面或者占div百分比无效的问题，相信你也搜索过了，就是说 需要 设置父亲父亲一直到祖宗html都要设置百分比，才有效果。 总之一句话：想用百分比设置他的高度，则它的父亲中至少有一个是固定高度，不然的话 全部父亲直到祖宗html（因为html外面就是浏览器，它是有高度的 阅读全文
posted @ 2017-07-16 15:05 孑孓子 阅读(837) 评论(0) 推荐(0)
clearfix为什么用display:table,而不用display:block
摘要：我们都知道clearfix一般这么写： 但是为嘛用 display：table哪？ 我用display:block好像也是显示很正常，也能清除浮动。 曾经也搜索过这个问题，感觉都讲得糊里糊涂的还是我水平太低了，反正我是看不懂他们想要表达啥意思，也不给例子，好了，废话不多说， 看结果吧： See th 阅读全文
posted @ 2017-07-16 02:44 孑孓子 阅读(3097) 评论(0) 推荐(0)

欢迎访问我的博客 https://javascript.shop