CSS編程技巧與常用知識點[待續]

1. 隱藏

   overflow:hidden

2. 文本對齊方式

   水平：text-align:left/center/right
   垂直：vertical-align：top/center/middle/bottom
   

圖片在表格中，實現文字垂直居中，只需要在img加上 style=“vertical-align:middle;”

3. 文本縮進

   text-indent

4. li小黑點

   list-style:none;

5. a下劃線

   text-decoration:none;

6. 塊水平居中

   margin:0 auto;

7. 行高

   line-height(將行高設置成與高度相同時就能垂直居中)

8. 層疊

   Z-index 僅能在定位元素上奏效（例如 position:absolute;）

9. 背景圖居中

   background-position：center

10. 行內塊元素共存

    display:inline-block;

11. 按鈕焦點

    <td><input id="btn" type="submit" value="&nbsp;&nbsp;登錄&nbsp;&nbsp;"/><script type="text/javascript"> document.getElementById("btn").focus);</script></td>
    

12. input域輸入時的邊框

    outline:0;

13. 表格間的縫隙

    table{border-collapse:collapse;}
    或

    <table border=0 cellpadding="0" cellspacing="0" >

14. 漸變背景

    background:linear-gradient(90deg,#C6CAB8,#FC5);

15. 單行文字，超出部分省略號

    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

16. 背景輪換

    jquery.backstretch.min.js
    	// HOME BACKGROUND SLIDESHOW
    	$(function(){
      	  jQuery(document).ready(function() {
    		$('body').backstretch([
    	 		 "image/4.jpg", 
    	 		 "image/2.png",
    			 "image/3.png"
    	 			], 	{duration: 10000, fade: 1300});
    		});
    	})
    

17. 邊框圓角

    border-radius：半徑大小(左上 右上 右下 左下)

18. 邊框陰影

    box-shadow:水平偏移 豎直偏移 半徑 顏色

19. 擺動技術

    -webkit-animation:bd 5s ease-in-out;//動畫名稱 時間 運動速度 永遠擺動
    @-webkit-keyframes bd{
        0%{-webkit-transform:rotate(30deg);-webkit-transform-origin:center top;}
        50%{-webkit-transform:rotate(-30deg);-webkit-transform-origin:center top;}
        100%{-webkit-transform:rotate(30deg);-webkit-transform-origin:center top;}
    }
    

20. 透明度

    background:rgba(r,g,b,透明度);

21. 可輸入

    <p contenteditable="true"></p>
    $(p).text();//獲取內容
    

22. 隱藏

    display:none;

23. 浮動時出現空缺，是因爲上一行中出現高度不一致，導致無法進入。只需要設定統一高度height即可