CSS全局样式的设置

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标签的留白和字体样式统一。 */
         font-size: 2em;
         margin: 0.67em 0;
}

abbr[title] {
         border-bottom: 1px dotted; /* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */
}

b, strong {
          font-weight: bold; /* 添加加粗样式*/
}

dfn {
        font-size:italic; /* 添加斜体样式 */
}

hr {
        /* 解决其在Firefox中的兼容性问题 */
       -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
}

mark {
       /* 解决样式未定义的问题 */
       background: #ff0;
       color: #000;
}

code, kbd, pre, samp {
           /* 更正关联字体的老式设置 */
         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; /*当img标签中包含a标签时，去除img边框属性。 */
}

svg:not(:root) {
       overflow: hidden;
}

6. 表单文本相关样式

fieldset {
     /* 定义一致的边框、内边距和外边距 */
   border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
       border: 0; 
       padding: 0; /* 去除外边距*/
}

button, input, select, textarea {
      font-family: inherit; /* 更改关联字体属性 */
      font-size: 100%; /* 更改字体大小属性 */
      margin: 0; /* 调整边距设置 */
}

button, input {
     line-height: normal; 
}

button, select {
text-transform: none;
/**
* 调整“button”和“select”的“text-transform”继承不一致性的问题 
*其他表单控件元素不继承“text-transform”属性
 */
}

结尾给大家分享一些CSS相关面试题

1. 页面渲染时，dom 元素所采用的 布局模型,可通过box-sizing进行设置。根据计算宽高的区域可分为：
2. ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法：
3. 几种获得宽高的方式：
4. css reset和normalize.css有什么区别？
5. css优先确定级：
6. 如何清除浮动：
7. 自适应布局：
8. CSS优化：
9. CSS选择器列表优先级及权重：
10. CSS中配置的常用属性有哪些：

还有更多关于前端面试题整理，html、CSS、JavaScript、Vue、ES6等，需要可戳我，免费分享。

前端资料图.PNG