CSS全局样式的设置

野性酷女 2022-12-28 01:46 436阅读 0赞

  1. 默认字体设置，边距设置

    html {

    1. font-family: sans-serif; /* 默认字体 */
    2. font-size: 100%; /* 调整字体大小 */
    3. -ms-text-size-adjust: 100%; /* IE浏览器 */

    -webkit-text-size-adjust: 100%; / FireFox浏览器 /
    }

  2. 去除默认边距

    body{

    1.   margin: 0; /* 外边距 */
    2.   padding: 0; /* 内边距 */
    3.   border: 0; /* 边框 */

    }

  3. 链接相关样式

    a {

    1. text-decoration: none; /* 去除默认下划线 */

    }

    a:focus {

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

    }

    a:active, a:hover {

    1.   outline: 0;

    }

  4. 排版相关样式

    h1 {

    1.      /* 使h1标签在section标签和article标签的留白和字体样式统一。 */
    2.      font-size: 2em;
    3.      margin: 0.67em 0;

    }

    abbr[title] {

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

    }

    b, strong {

    1.       font-weight: bold; /* 添加加粗样式*/

    }

    dfn {

    1.     font-size:italic; /* 添加斜体样式 */

    }

    hr {

    1.     /* 解决其在Firefox中的兼容性问题 */
    2.    -moz-box-sizing: content-box;
    3.     box-sizing: content-box;
    4.     height: 0;

    }

    mark {

    1.    /* 解决样式未定义的问题 */
    2.    background: #ff0;
    3.    color: #000;

    }

    code, kbd, pre, samp {

    1.        /* 更正关联字体的老式设置 */
    2.      font-family: monospace, serif;
    3.      font-size: 1em;

    }

    pre {

    1.           /* 提高pre标签格式化文本的可读性 */
    2.           white-space: pre-wrap;

    } 

  1. q {
  2.            /* 设置相一致的引号类型 */
  3.            quotes: "\201C" "\201D" "\2018" "\2019";
  4. }
  6. small {
  7.             /* 统一所有字体大小 */
  8.             font-size: 80%;
  9. }  
  11. sub, sup {
  12.               /* 防止“sub”和“sup”标签影响“line-height”属性 */
  13.               font-size: 75%;
  14.               line-height: 0;
  15.               position: relative;
  16.               vertical-align: baseline;
  17. }
  19. sup {
  20.        top: -0.5em;
  21.  }
  23. sub {
  24.      bottom: -0.25em;
  25. }

  1. 内嵌文本相关样式

    img {

    1. border: 0; /*当img标签中包含a标签时，去除img边框属性。 */

    }

    svg:not(:root) {

    1.    overflow: hidden;

    }

  2. 表单文本相关样式

    fieldset {

    1.  /* 定义一致的边框、内边距和外边距 */

    border: 1px solid #c0c0c0;

    1. margin: 0 2px;
    2. padding: 0.35em 0.625em 0.75em;

    }

    legend {

    1.    border: 0; 
    2.    padding: 0; /* 去除外边距*/

    }

    button, input, select, textarea {

    1.   font-family: inherit; /* 更改关联字体属性 */
    2.   font-size: 100%; /* 更改字体大小属性 */
    3.   margin: 0; /* 调整边距设置 */

    }

    button, input {

    1.  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

发表评论

表情：
评论列表 （有 0 条评论，436人围观）

还没有评论，来说两句吧...

相关阅读