# 全局reset

# 简介

全局reset用于消除各个浏览器之间默认样式差异，同时覆盖部分浏览器老旧的默认样式。社区较为普遍的实现方式为reset.css，这里我们采用极为简单的方式实现reset.css。

# reset覆盖标签

# 所有标签

所有标签盒子计算方式采用 border-box，这样做是为了让盒子模型更符合人类认知。

* {
    box-sizing: border-box;
}

1
2
3

# html标签

重置全局字体大小和默认字体样式，14像素字体感觉会好看一点。

html {
    font-size: 14px;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

1
2
3
4

# body标签

清除掉了浏览器默认 margin 和 padding值
禁止页面宽度超出浏览器宽度，这样会更加美观，同时修复部分页面出现滚动条导致页面抖动。
覆盖默认字体颜色(纯黑字体不好看)

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    color: $gray-700;
}

1
2
3
4
5
6
7
8

# ul标签

去除小圆点和默认边距

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

1
2
3
4
5

# a标签

让颜色继承父元素颜色，大部分情况下会更加方便，同时清除 a标签 默认下划线

a {
    color: inherit;
    text-decoration: none;
}

1
2
3
4

# input，button，textarea标签

去除表单相关元素点击边框效果

button,
input,
textarea {
    outline: none;
    padding: 0;
}

1
2
3
4
5
6

# pre标签

让代码显示更加好看，风格参照 bootstrap

pre {
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid #d1d5da;
    border-radius: .4rem;
    background-color: #f0f0f0;
    white-space: pre-wrap;
    display: block;
    font-size: 87.5%;
    color: #212529;
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}

1
2
3
4
5
6
7
8
9
10
11
12

pre标签风格 pre处理后风格

# 覆盖ui库样式

由于采用ElementUi作为开发组件库，部分样式无法满足相关需求，需要自定义覆盖部分样式。

# el-divider__text

覆盖 el-divider 文字颜色使其更美观

#app .el-divider__text {
    color: $cyan;
}

1
2
3

# el-input__inner

修复表单size="mini"高度无法改变

.el-input--mini .el-input__inner {
    height: 28px !important; 
}

1
2
3

全局方法 →