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即可