一、书写规则
1.css书写顺序
/*1.位置属性*/
(position, top, right, z-index, display, float 等)
/*2.大小*/
(width, height, padding, margin)
/*3.文字系列*/
(font, line-height, letter-spacing, color- text-align 等)
/*4.背景*/
(background, border等)
/*5.其他*/
(animation, transition等)
2.使用CSS缩写属性
属性：padding ／ margin ／ font
.list-box {
padding: 0 1em 2em;
margin: 1em 2em 3em 4em;
font: 100%/1.6 seirf;
}
优点： 精简代码同时又能提高用户的阅读体验
3.去掉小数点前的“0”
.box {
font-size: .8em;
}
4.简写命名
#nav{
}
.author{
}
注：让人看懂你的命名才能简写
5. 16进制颜色代码缩写
.box {
/*color: #eebbcc;*/
color: #ebc;
}
6. 连字符CSS选择器命名规范
-
1.长名称或词组可以使用中横线来为选择器命名。
-
2.不建议使用“_”下划线来命名CSS选择器
浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
/*
error
.maintitle {
}
.main_title {
}
*/
main-title{
}
7. 不要随意使用Id
- id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
/*
error
#info-title {}
*/
.info-title {
}
8.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀
.check{}
.is-check{}
二、重置盒模型
-
1) content-box:
(设置的宽高 不包含padding)宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框 -
2) border-box:
(设置的宽高 包含padding)为元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 -
3) inherit: 规定应从父元素继承 box-sizing 属性的值
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
兼容性：IE8+
三、css reset
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}