这几个月一直在录制前端的课程,每天关在小小的录播室里面对着话筒,对着屏幕录课,刚开始感觉挺心无旁骛,没有任何杂事影响我,可以专心的打磨课程。可是连续几个月的闭关,没有和周围的同事有什么交流,唯一沟通的就是负责视频剪辑的小妹,几个月后,感觉人越来越抑郁,关键是才录制完第一阶段,我就有种要憋疯的节奏。也...
2020年06月30日 3349
最近更新
杂谈
transform:translate(-50%,-50%)到底和margin-left:负的宽度的一半有什么区别?
今天在腾讯课堂上公开直播课的时候,遇到一个问题没有解决,特尴尬,左右排查代码已经是没有问题了,下课后,再仔细把代码改了改,突然发现原来是绝对定位后要居中对齐,我用了一种更新的方法导致的。就是下面这个效果,当把变色龙那个舞台居中对齐的时候,我用的是transform:translate(-50%,-5...
2020年02月19日 4629
CSS教程
flex布局space-between最后一行左对齐的方法
当用flex布局的时候,大部分的分布都会使用space-between的方式,但是当最后一行的个数和上面行的个数不一样的时候,最后一行的分布就显得尴尬。比如我们想要这样的效果:但是却出现这样的效果:如果每一行列数不确定,宽度不确定,间隔不确定的情况下,最好的方法就是为最后一个元素设置margin-r...
2020年02月04日 5575
CSS教程
利用CSS中display:table/table-cell可以解决大部分垂直居中、多列等高、自适应布局
尽管flex布局已经是大势所趋,但是IE11的支持都还不是很友好,在要兼容IE9的PC端,浮动、定位布局等老方法还是依然使用。特别是IE8+开始支持的display:table和display:table-cell,在一些特殊布局方面提供了很好的帮助,还是需要掌握。翻了很多文章,终于看到一篇介绍详细...
2019年12月11日 5461
CSS教程
这是我看到深入解释vertical-align最好的文章!
最近在备CSS基础的课程,以为很简单的事情,结果却在一些基本的概念上翻了车,有时候你以为简单的事情,其实你并不理解它的原理。在百度上翻了一下午,终于找到了一篇好文章,是翻译自国外的,很有意义,所以转载到自己博客上。这是中文的链接:你所不知道的vertical-align这是英文的链接:Vertica...
2019年12月02日 4673
JavaScript教程
DOM基础10:两个矩形的碰撞
学习了拖拽后,那么碰撞就是拖拽一个对象去碰另一个对象,检测是否碰上了。这里的碰撞是两个矩形对象的碰撞,如果是圆形或者不规则形状,方法又不一样了。这个小案例是拖动老鼠去碰撞灯,老鼠只能在可视区内移动,碰上了灯,灯变亮了。具体效果点击查看知识点:1、利用getBoundingClientRect( )方...
2019年09月17日 5166