css样式归纳(二)——之总结

 

 

1、选择器声明
选择器集体声明用逗号隔开（例如：h1,h2,p,#one{}）；全局声明用*；选择器嵌套用空格隔开（例如：p b{}意思是p下的b样式，.mycss li{}意思是class值是mycss下的li，#idcss li{}意思是id的值是idcss里面的li）注意：p.mycss和p mycss的区别，一个是p中class值为mycss，最后的是p包含的元素中class的值为mycss

 

2、CSS继承
CSS一直贯穿整个CSS设计的始终，每个标记都遵守继承

3、段落水平对齐使用text-align(有左对齐，右对齐，两端对齐，居中对齐),垂直对齐使用vertical-align（注意不能对块级元素起作用）；行间距使用line-height，letter-spacing是字间距，图片对齐使用其父元素的对齐方式

4、边框重叠使用border-collapse:collapse；去掉a标签链接的文字下划线使用text-decoration:none；a:link是正常状态a的样式，a:visited是访问过，a:hover是鼠标经过，a:active是单击时（平时不用这个状态）  注释：如果设置了a标签中有display：block那么这样鼠标进入该块的任何区域都可以点击连接

5、项目列表使用ol或者ul，其中list-style-type（可以取值disc实心圆、circle空心圆、square正方形、decimal数字、upper-alpha大写字母、lower-alpha小写字母、upper-roman罗马数字、lower-roman小写罗马数字、none不显示任何符号），可使用list-style-image来设置图片符号（浏览器兼容性有问题，建议使用list-style-type设置为none然后增加li的背景图设置padding-left的值来调整图片和文字的间隔），如果需要li水平显示需要li设置float：left即可。

6、定位
div和span的区别在于div是块级标记可以包含span但是span不可以包含div，span是行内元素
float定位：可以向左靠紧float：left、float：right向右靠紧、float：none默认不浮动，注意子块设置成左浮动那么距离左边的距离就是父块的padding-left+自己的margin-left
position定位：如果需要设置absolute需要设定一个参照物就是把那个块的div设置成relative
z-index：空间定位，z-index值大的在小的上面

7、CSS控制盒子模型
所有的div都可以看成盒子，其中内容（content）、边框（border）、间隙(padding，内容与边框的距离)、间隔（margin块和块的距离）

注意：设置的width和height的大小都指的是width+padding的值，IE不支持border-style，而且设置背景ie影响的是内容和间隙，而有的还带上了边框。注意margin如果设置行内元素就是相加，如果块级元素就是最大值，还有就是子块的margin将以父块的内容做参考就是实际大小就成了父块的padding加上子块的margin。

8、设计和编辑div+CSS心得
根据设计的ps图，先把页面划分成几个板块（越少越好），然后几个板块的关系以及margin和padding和边框都设计好（做到心中有图，胸有成竹），继续写成对的div进行命名和声明和注释（解决div不成对和注释少的问题），确定每个块的名字和样式（精确到大小和颜色），最后写代码调试（每个浏览器的方法不一样编写的css可能有不同的样式，需要进行深入研究）

9、 浏览器兼容问题

　　对于IE6来说，不使用盒模型Hack。如果只针对流行浏览器的话，只需要很少的Hack就能实现同样的效果。

　　我注意了一下网易新版主页的CSS，其中竟然 一个!important或者Hack都没有，可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然，调试的时间会多一些。

　　包含浮动 元素所有在容器 内的内容都应该被设计 为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。

　　理解 Overflow如果页面中有两个浮动元素，在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding 设置混乱了，不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。