套路集合

一、 居中对齐

　　给父节点设置一个position为非static的属性，而后给目标属性设置position为absolutely，top为50%，再设置一个transform：translateY(-50%)

　　div {position: relative；width: 100px；height: 200ox}
　　button{position: absolutely; top: 50%; transform: translateY(-50%)}

二、文字居中对齐

　  目标节点的line-height与父节点的height同样就行，由于值同样以后行间距的中轴线与父节点容器的中线就至关因而重合了，即上下是居中对齐的

 

三、分割线

 

　  能够用加号选择器来制做分割线（匹配同级的下一个元素，仅匹配一个）

　　div + div {border-top: 1px solid red}

　　<div>aaa</div>

　　<div>aaa</div>

　　<div>aaa</div>

 

四、animation动画

　  在制做动画时，若是设置到无限循环动画，为了避免产生闪动的效果，动画播放一次最终状态即100%{ }里面的属性值要与动画播放前状态相同。例如旋转的话最终值就是要回到初始状态，若是跟播放前状态不       同那会出现闪动的状况，即播放一次而后回到初始位置再播放下一次，这样就会出现闪动的状况。若是是平移的动画例如进度条，则元素移动的距离要等于元素的宽的值，就是恰好移动一个元素的宽度，恰好填补前一个元素的位置否则就会出现闪动的状况，至于具体的缘由我还没弄清楚，弄清楚了再来解答

 

五、float跟随

 

　  

      若是对 ".search-area" 加一个左浮动，则后面的submit按钮会立刻跟随在".search-area" div框后面，以下所示：

 　　

　　若是后面不是按钮而是一个文本框或者一个div，则会按照浮动的规律去填充".search-area" 的位置而不是自动跟随，若是须要跟随则须要对该元素也加个左浮动

五、float跟随

　　span加float就能够设置width和height，能够当成block元素，或者加position也行，例如：

　　

　　

　　

 　　　float: 即浮动元素会脱离文档流向左或向右进行浮动，知道碰到父元素或另外一个浮动元素