套路集合

一、 居中對齊

　　給父節點設置一個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: 即浮動元素會脫離文檔流向左或向右進行浮動，知道碰到父元素或另外一個浮動元素