首页 > 其他分享 >清除vue默认样式

清除vue默认样式

时间:2024-04-12 10:47:29浏览次数:22  
标签:none vue sub 样式 默认 sup font border size

1:引入reset.scss

/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */

*,
*:after,
*:before {
  box-sizing: border-box;

  outline: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font: inherit;
  font-size: 100%;

  margin: 0;
  padding: 0;

  vertical-align: baseline;

  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
  &:before,
  &:after {
    content: '';
    content: none;
  }
}

sub,
sup {
  font-size: 75%;
  line-height: 0;

  position: relative;

  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

input,
textarea,
button {
  font-family: inhert;
  font-size: inherit;

  color: inherit;
}

select {
  text-indent: .01px;
  text-overflow: '';

  border: 0;
  border-radius: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
}
select::-ms-expand {
  display: none;
}

code,
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

2:在main.ts中引用,使此项目支持scss。npm install sass --save-dev

 

标签:none,vue,sub,样式,默认,sup,font,border,size
From: https://www.cnblogs.com/2048tw/p/18130666

相关文章

  • vue一键复制
    vue一键复制copyToClipboard(textToCopy){//navigatorclipboard需要https等安全上下文if(navigator.clipboard&&window.isSecureContext){//navigatorclipboard向剪贴板写文本returnnavigator.clipboard.writeText(textToCopy);......
  • 设置vue项目运行后,自行打开浏览器。src起别名
    1:设置vue项目运行后,自行打开浏览器找到package.json配置文件 2:src起别名,这样就可以直接找到文件路径,不需要../../的这些繁琐操作。意思直接使用@符号就代表src目录1):在vite.config.ts修改import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//引入n......
  • 02 Vue3核心语法
    选项式APIOptionsAPI和组合式APICompositionAPIVue2的API设计是Options(配置)风格的,就是选项式APIVue3的API设计是Composition(组合)风格的,就是组合式API选项式API的弊端Options类型的API,数据、方法、计算属性等,是分散在:data、methods、computed中的,若想新增或者修改一个需......
  • npm创建vue项目
    使用npm创建vite项目1:npmcreatevite 2:输入项目名称,例如我的项目名称为:whipip 3:选择你要创建项目的类型,我要创建vue项目,就选择Vue 4:选择你要使用的脚本语言 5,即创建完毕 6:安装相关依赖npmi 7:运行项目:npmrundev 8:查看项目 ......
  • 50 Vue3常用扩展插件
    在setup的script标签中去指定组件名字1.安装npmivite-plugin-vue-setup-extend-D2.配置vue.config.tsimport{defineConfig}from'vite'importVueSetupExtendfrom'vite-plugin-vue-setup-extend'exportdefaultdefineConfig({plugins:[VueSe......
  • Vue卡壳问题汇总
    上传文件问题(特别注意同步和异步请求)-手动构造'数组对象'发送给后端,后端可以正常接收-选取excel文件并读取,构造'数组对象'发送给后端,后端只收到一个空list -原因如下:读取excel函数的逻辑是异步请求,还没等数据处理完,请求就发给后端了,造成以上结果uploadHttpReq......
  • Godot Label样式 Textrue纹理,实现样式修改,背景填充
    目录前言运行环境新建项目Style样式讲解StyleBoxEmpty:普通样式StyleBoxTexture:字体样式StyleBoxFlat:填充样式StyleBoxLine:行样式总结前言在Godot中,直接的BackGroud背景颜色这个属性。Godot中使用的是Textrue纹理这个属性来表示文本的信息运行环境Godot4.2.1Windows10......
  • 01 Vue3简介
    介绍性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking拥抱TypeScriptVue3可以更好的支持TypeScript新的特性1.组合是API(CompositionAPI)setup......
  • vite+xlsx-style表格导出样式设置报错
    项目是vite+vue3,前端表格导出,使用xlsx可以导出基本表格,但是想要设置表格样式,引入xlsx-style,安装依赖,后引入报错引用import { utils } from "xlsx"import { write } from "xlsx-style"Couldnotresolve"./cptable"node_modules/xlsx-style/dist/cpexce......
  • vue新项目初始化
    vue新项目初始化vite构建#创建新项目npmcreatevue@latest#安装依赖npminstall#启动项目npmrundev#网络请求模块npmiaxios#css预处理器sassnpmisass#安装elementUI框架npminstallelement-plus--save#安装normalize.css样式初始化文件......