2015年7月13日 CSS第三课（Z-INDEX,overflow,浏览器兼容性）

1、z-index=数字

　　z轴的值，当几个div重叠时，z-index数字越大的，越在上面
　　
2、overflow：hidden（超过部分隐藏）/auto（当内容超过时出现滚动框，没有超过则不会显示滚动务）/scroll（不管内容多少都会有滚动条）
　　
3、浏览器兼容性问题：
　　
　　（1）兼容性问题：不同的浏览器基于不同的内核，对一些前端代码支持不一样，导致显示效果不一样
　　
　　（2）测试的各大浏览器：IE7-IE11（可使用IETester,不考虑IE6）、Opera、Safari、Chrome、Firefox
　　
　　（3）关于兼容性非常好的介绍文章：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
　　
4、上下块级元素margin重合：以较大值为准，相当于两者重叠了（左右不受影响）
　　
5、上下块级元素和行内元素margin重合：可在行内元素display设置为block。　{ display:block; }
　　
6、超链接的love hate原则：
　　
　　a:link　　　　平时的链接样式
　　
　　a:visited　　 已访问过的链接样式
　　
　　a:hover　　  鼠标放上去时的样式
　　
　　a:active　　  鼠标点击时的样式
　　
　　必须按照以上顺序放（lvha）才会有正常的效果
　　
7、块级元素不靠边：*{ marin:0px; padding:0px}
　　
8、ul在不同浏览器靠边问题：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding，所以设置时margin和padding都设为0px
　　
9、行内元素的上下margin撑不开自己所在的块级元素的高度：需在行内元素上下各加一个<div style="height:0px;overflow:hidden"></div>辅助撑开

10、IE对3px问题：在DIV的css中加上display:inline-block;

11、网站常见小图标调用方式：

　　将所有小图标做在一张大图上a.png，然后根据横纵轴来调用。

　　background:url("a.png") -23px -70px no-repeat;

12、块级元素居中的常见写法：

　　margin:0px auto;

13、如何让超链接影响到整个块？

　　将行内元素变成块级元素：display:block

 

14、文本框只留下面一条线：

　　{ border-width:0px;  border-bottom:solid 1px #000; }

15、html及css常用易混短语总结：

　　超出部分隐藏：　　　　  overflow：hidden;

　　行级元素变块级：　　　  display:block; 

　　下划线/去掉下划线：      text-decoration：underline/ none;　　　

　　文字居中：                   text-align:center; 

　　边框为实线：　　           border-style:solid;                              

　　边框缝隙合并：　　        border-collapse:collapse;                     

　　背景图片不重复：　　     background-repeat:no-repeat;　　　　 

　　列表前无符号：　        　list-style-type:none;