天机算法---关于布局细节的调整

1.margin

  1>在我们使用margin top/bottom 会有加在父元素,导致父元素的背景margin的部分加不上

  2>margin:0 auto这个命令经常使用,使div居中,但是有个前提条件,width宽度必须已知。如果这个div的子元素有明确的width可以撑开他,那么没有父元素没有写width也是可以的

2.动画

  1>css3动画是我们经常用到的,我们会经常用到hover之后有动画,但是hover移入之后立即把鼠标移出,动画会立即结束,这个闪动的效果体验不是很好,在写动画的时候要注意,css3动画在移动端使用的效果比较好

  2>tranfrom 有很多的动画效果,有很多会被用到,translate/scale/rotateX,这里面rotate进行3d变换的时候,rotateX(30deg) 和 rotateX(-30deg)是一样的,使用rotate3d(x,y,z,a)其中x,y,z,是三个环绕轴上的矢量值,a是每个方向上的单位常量。在js中我们这样写 bg.style.transform = 'rotate3d(1,1,0,'+mid+'deg)';

  3>关于js动画,我们一般用requestAnimationFrame()来代替setInterval这个会在后续的文章中继续提到(链接https://segmentfault.com/a/1190000004039023)

3.css

  1.在文字比较多的情况下,我们可以先找到文字共同的特点,写成基础类,对于各自不同的差异,写不同的类,最后文字的类有两个,一个是基础类(相当于封装),另一个是单独的类

  2.语义化,我们在写一些文章类的网页,使用标题和文章的语义化标签

  3.快速生成雪碧图(https://www.toptal.com/developers/css/sprite-generator)

原文地址:https://www.cnblogs.com/czy960731/p/9488182.html