21.CSS初始化

为了保证兼容性，也为了方便开发，所以我们需要进行CSS初始化

比如将所有元素的内外边距清零，并且令盒子尺寸包含边框与内边距

如果使用通配符选择器渲染速度会慢一些，因为浏览器会把所有元素进行渲染，如果想让速度快一些，有些网站是这样做的

这样虽然写着麻烦，但是速度会快一些

常用的还有下面这些

• 倾斜标签不倾斜

• li取消前面的点儿

• 图像取消边框且垂直居中

• 按钮鼠标样式为手型

• 设置链接颜色并清除下划线

• 链接hover的文字颜色

• 按钮与文本框字体

• body的一些设置

-webkit-font-smoothing 是抗锯齿性，当我们这样设置后，将文字放大，文字不会变得很模糊

• 常用的类，比如说hide，后面我们给元素一个hide的类，元素就会被隐藏起来

• 消除浮动影响类 clearfix

上面提到的是京东初始化的css，每一个网站初始化方式略有不同，感兴趣的话可以通过chrome的调试工具自己看一下

目录

1  PC端初始化

2  移动端初始化

3  使用方式

---

1  PC端初始化

常用的类我没有放到下面，自己有需要的时候再加

* {
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}

em,i {font-style:normal;}

li {
    list-style:none;
}

img {
    border:0;
    vertical-align:middle;
}

button {cursor:pointer}

a {
    color:#666;
    text-decoration:none;
}

a:hover {color:#c81623}

button,input {
    font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragin San GB;
}

body {
    -webkit-font-smoothing:antialiased;
    background-color:#fff;
    font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragin San GB;
    color:#666;
}

.clearfix:after {
    visibility:hidden;
    clear:both;
    display:block;
    content:"";
    height:0;
}
.clearfix {*zoom:1;}

2  移动端初始化

移动端初始化可以参考这个项目，项目地址 Normalize.css: Make browsers render all elements more consistently.

上面只是一个模板，你可以参考一下，如果自己实际开发还是建议使用自己写的，因为自己写的好调整，我依然使用PC端的一些属性并且会再加上一些

* {
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}

em,i {font-style:normal;}

li {list-style:none;}

img {
    border:0;
    vertical-align:middle;
}

button {cursor:pointer;}

a {
    color:#666;
    text-decoration:none;
}

a:hover {color:#c81623}

button,input {
    font-family: Microsoft YaHei, Heiti SC ,tahoma,arial,Hiragin Sans GB;
}

body {
    min-width:320px;
    max-width:640px;
    -webkit-font-smoothing:antialiased;

    -webkit-tap-hightlight-color:transparent;
    -webkit-appearance:none;
    -webkit-touch-callout:none;

    background-color:#fff;
    font:12px/1.5 Microsoft YaHei, Heiti SC ,tahoma,arial,Hiragin Sans GB;
    color:#666;
    margin:0 auto;
}

.hide {display:none;}

.clearfix:after {
    visibility:hidden;
    clear:both;
    display:block;
    content:"";
    height:0;
}
.clearfix {*zoom:1;}

在body中我加入了三行，他们各自的意思是

• -webkit-tap-hightlight-color:transparent; 消除点击高亮(移动端点击链接后默认背景会变为蓝色，我们不想要这个蓝色)
• -webkit-appearance:none; 去除ios原有的外观
• -webkit-touch-callout:none; 禁用ios系统长按页面时弹出的菜单

移动端开发不要忘记加视口

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

3  使用方式

我们一般将初始化CSS从外部进行引入，我们在html文件中一般会这样写

此处css文件名最好不要为汉字