How does vue clear the default style globally

Why would you want to clear CSS's default styles?

  1. First of all, each browser has its own default style for html tags, which is used to ensure that it can be rendered according to evidence without custom styles. However, each manufacturer has its own style and needs are different. If you need your own style not to be affected by the default style, you need to clear and set the default style.

  2. Due to browser compatibility issues, different browsers have different default values ​​for some tags. If the CSS is not initialized, there will often be differences in page display between browsers.

How to clear default styles?

  1. Create reset.css in the public folder, import the reset style sheet, and the style sheet can be modified according to specific needs.

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
    color: #333;
}
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
.clearFix::after{
    content:"";
    display: block;
    clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
 
a:link:hover{
    color : rgb(79, 76, 212) !important;
    text-decoration: underline;
}
 
/* 清除浮动 */
.clearfix::after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    visibility: hidden;
}

2. Just import it in the public index.html page

  <link rel="stylesheet" href="./reset.css">

Guess you like

Origin blog.csdn.net/laya1211/article/details/126719558