CSS全局样式的设置

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

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等，需要可[戳我][Link 1]，免费分享。

![前端资料图.PNG][.PNG]

[Link 1]: https://jq.qq.com/?_wv=1027&k=MXWrBJ2o
[.PNG]: /images/20221120/03dd79d47821443fb2c5e1a70deae105.png