Global 全局样式基本设置
1. 默认字体设置，边距设置
html {
font-family: sans-serif; /* 默认字体 */
font-size: 100%; /* 在用户调整窗口大小时，字体大小做相应调整。 */
-ms-text-size-adjust: 100%; /* IE浏览器 */
-webkit-text-size-adjust: 100%; /* FireFox浏览器 */
}
2. 去除默认边距
body{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
border: 0; /* 边框 */
}
3. 链接相关样式
a {
text-decoration: none; /* 去除默认下划线 */
}
a:focus {
outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */
}
a:active, a:hover {
outline: 0;
}
4. 排版相关样式
h1 {
/* 使h1标签在section标签和article标签的留白和字体样式统一。可同时兼容Firefox 4+、Safari 5和Chrome等不同的浏览器 */
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted; /* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */
}
b, strong {
font-weight: bold; /* 添加加粗样式，应用于Firefox 4+、Safari 5和Chrome */
}
dfn {
font-size:italic; /* 添加斜体样式，应用于Safari 5和chrome */
}
hr {
/* 解决其在Firefox中的兼容性问题 */
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
/* 解决其在IE8/9中样式未定义的问题 */
background: #ff0;
color: #000;
}
code, kbd, pre, samp {
/* 更正关联字体在Safari 5和Chrome中的老式设置 */
font-family: monospace, serif;
font-size: 1em;
}
pre {
/* 提高pre标签格式化文本在所有浏览器中的可读性 */
white-space: pre-wrap;
}
q {
/* 设置相一致的引号类型 */
quotes: "201C" "201D" "2018" "2019";
}
small {
/* 统一所有浏览器中字体大小不一致的兼容性问题 */
font-size: 80%;
}
sub, sup {
/* 在所有浏览器中，防止“sub”和“sup”标签影响“line-height”属性 */
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
5. 内嵌文本相关样式
img {
border: 0; /* 在IE8/9浏览器中，当img标签中包含a标签时，去除img边框属性。 */
}
svg:not(:root) {
overflow: hidden;
}