编写css相关注意事项以及小技巧

一、小技巧

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:;padding:;}
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:;}

上面的红色标记为背景的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%;