CSS全局样式的设置

·  阅读 107
  1. 默认字体设置,边距设置
html {
    font-family: sans-serif; /* 默认字体 */
    font-size: 100%; /* 调整字体大小 */
    -ms-text-size-adjust: 100%; /* IE浏览器 */
   -webkit-text-size-adjust: 100%; /* FireFox浏览器 */
}
复制代码
  1. 去除默认边距
body{
      margin: 0; /* 外边距 */
      padding: 0; /* 内边距 */
      border: 0; /* 边框 */
}
复制代码
  1. 链接相关样式
a {
    text-decoration: none; /* 去除默认下划线 */
}

a:focus {
     outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */
}

a:active, a:hover {
      outline: 0;
}
复制代码
  1. 排版相关样式
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;
}
复制代码
  1. 内嵌文本相关样式
img {
    border: 0; /*当img标签中包含a标签时,去除img边框属性。 */
}

svg:not(:root) {
       overflow: hidden;
}
复制代码
  1. 表单文本相关样式
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

分类:
前端
标签:
分类:
前端
标签: