一、初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,需要对CSS初始化。
CSS初始化是指重设浏览器的样式。(也称CSS reset)
每个网页都必须首先进行CSS初始化才能保证浏览器的兼容性。
以下例子为京东的网页初始化:
/* 把所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li的小圆点 */
li{
list-style: none;
}
img{
/* border: 0; 照顾低版本浏览器,如果图片外面包含了链接会有边框的问题 */
border: 0;
/* vertical-align: middle;取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
button{
/* 鼠标经过button按钮时候鼠标变成小手 */
cursor: pointer;
}
a{
/* 统一所有链接的颜色,取消下划线 */
color: #666;
text-decoration: none;
}
a:hover {
/* 鼠标经过链接变成红色 */
color: red;
}
button,
input {
/* 按优先级默认设置字体风格 \5B8B\4F53 宋体*/
font-family: Microsoft YaHei, Heiti SC , tahoma, arial, Hiragino Snas GB, "\5B8B\4F53";
}
body{
/* 文字放大抗锯齿性 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5, Microsoft YaHei, Heiti SC , tahoma, arial, Hiragino Snas GB, "\5B8B\4F53";
color: #666;
}
/* 隐藏元素 */
.hide,
.none {
display: none;
}
/* 清除浮动 */
.clearfix:after{
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix{
*zoom: 1;
}
二、浏览器的私有前缀
(1)-moz-:代表Firefox浏览器的私有属性
(2)-ms-:代表IE浏览器的私有属性
(3)-webkit-:代表Safari、Chrome私有属性
(4)-o-:代表opera私有属性
border-radius: 10px
-moz-border-radius: 10px
网友评论