1、 居中对齐

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

　　div {position: relative；width: 100px；height: 200ox}

　　button{position: absolutely; top: 50%; transform: translateY(-50%)}

2、文字居中对齐

　  目标节点的line-height与父节点的height一样就行，因为值一样之后行间距的中轴线与父节点容器的中线就相当于是重合了，即上下是居中对齐的

 

3、分割线

 

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

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

　　<div>aaa</div>

　　<div>aaa</div>

　　<div>aaa</div>

 

4、animation动画

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

 

5、float跟随

 

　  

      如果对 ".search-area" 加一个左浮动，则后面的submit按钮会马上跟随在".search-area" div框后面，如下所示：

 　　

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

5、float跟随

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

　　

　　

　　

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