一、小技巧
1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯):
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:16px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none;background:none}
textarea{resize:none;}
a{text-decoration:none;}
/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
上面的红色标记为背景的css样式写法,主要是解决在IE6的浏览器中如果input标签的边框没有清掉的话,先清空其一个背景色,然后再把白色的背景色给它加上就可以解决了。
2.写css的时候,尽量把整个网页共同的东西写在上面的重置css里面,如果碰到几个标签有重复的css,可以将重复的css写在他们的父元素css里面,子元素是可以继承的。
3.能相同css尽量写在第一个里面css类名里面,不要用类似于:
.class1 .class1.1{/*css样式*/}
这样浏览器会去寻找两次css类名,降低了反应速度。
4.
二、注意事项
1.让input标签的文字居中,可以通过height+line-height+padding来设置,比如总的input标签的高度为36px,则css如下:
/*通过公式(36-16)/2来计算*/
input{width:100px;height:16px;line-height:16px;padding:10px 0 10px;}
针对IE浏览器对input标签的padding不支持问题(光标不在中间),这样就不用去算了:
input{width:100px;height:35px;line-height:35px\9;/* css hack \9代表所以的ie浏览器*/padding:0 5px;}
2.在写数字的css时候,一般要加上text-align:right;文字右对齐,这样可以在数字位数增多的时候可以往左边递增位数。相反如何想在右边递增可写text-align:left;
3.在IE6中对于百分比的计算不是那么的好,会相对的小一点,所以最好是加上*,比如一般写为width:50%;但是在IE6中得写为*width:49.8%;