feat: css初始化的一些技巧

src/views/demo/cssInit.vue

@@ -0,0 +1,111 @@
+<template>
+    <base-container>
+        <h1>CSS Init,重置css默认样式，重置css默认浏览器样式等各种场景</h1>
+        <el-card header="initial，将css属性恢复到默认值">
+            <div class="mb-5">
+                <el-button
+                    type="primary"
+                    @click="toggleTextLineHeight('text-line-2')"
+                    >2倍行高</el-button
+                >
+                <el-button
+                    type="primary"
+                    @click="toggleTextLineHeight('text-line-3')"
+                    >3倍行高</el-button
+                >
+                <el-button
+                    type="primary"
+                    @click="toggleTextLineHeight('text-line')"
+                    >默认行高</el-button
+                >
+            </div>
+            <!-- 这是一篇演示文章-->
+            <div :class="textLineHeightClass">
+                余幼时即嗜学。家贫，无从致书以观，每假借于藏书之家，手自笔录，计日以还。天大寒，砚冰坚，手指不可屈伸，弗之怠。录毕，走送之，不敢稍逾约。以是人多以书假余，余因得遍观群书。既加冠，益慕圣贤之道
+                。又患无硕师名人与游，尝趋百里外，从乡之先达执经叩问。先达德隆望尊，门人弟子填其室，未尝稍降辞色。余立侍左右，援疑质理，俯身倾耳以请；或遇其叱咄，色愈恭，礼愈至，不敢出一言以复；俟其欣悦，则又请焉。故余虽愚，卒获有所闻。
+                　　当余之从师也，负箧曳屣行深山巨谷中。穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则缊袍敝衣处其间，略无慕艳意，以中有足乐者，不知口体之奉不若人也。盖余之勤且艰若此。今虽耄老，未有所成，犹幸预君子之列，而承天子之宠光，缀公卿之后，日侍坐备顾问，四海亦谬称其氏名，况才之过于余者乎？
+                　　今诸生学于太学，县官日有廪稍之供，父母岁有裘葛之遗，无冻馁之患矣；坐大厦之下而诵诗书，无奔走之劳矣；有司业、博士为之师，未有问而不告、求而不得者也；凡所宜有之书，皆集于此，不必若余之手录，假诸人而后见也。其业有不精、德有不成者，非天质之卑，则心不若余之专耳，岂他人之过哉！
+                　　东阳马生君则，在太学已二年，流辈甚称其贤。余朝京师，生以乡人子谒余，撰长书以为贽，辞甚畅达。与之论辨，言和而色夷。自谓少时用心于学甚劳，是可谓善学者矣。其将归见其亲也，余故道为学之难以告之。谓余勉乡人以学者，余之志也；诋我夸际遇之盛而骄乡人者，岂知予者哉！
+            </div>
+        </el-card>
+        <el-card header="unset，告诉浏览器，就当我没设置过这个属性，不要恢复默认值">
+            <div class="mb-5">
+                <el-button
+                    type="primary"
+                    @click="toggleListClass('init')"
+                    >ul li初始化样式</el-button
+                >
+                <el-button
+                    type="primary"
+                    @click="toggleListClass('unset')"
+                    >unset 恢复未设置之前样式</el-button
+                >
+            </div>
+            <ul :class="listClass">
+                <li>第一行</li>
+                <li>第二行</li>
+                <li>第三行</li>
+            </ul>
+        </el-card>
+        <el-card header="revert，恢复浏览器默认样式">
+            <div class="mb-5">
+                <el-button type="primary">按钮一</el-button>
+                <el-button type="primary">按钮二</el-button>
+            </div>
+            <div>
+                <el-button
+                    type="primary"
+                    @click="toggleBrowserStyle"
+                    :class="browserStyle"
+                    >切换浏览器中button的默认样式</el-button
+                >
+            </div>
+        </el-card>
+    </base-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const textLineHeightClass = ref('text-line');
+const toggleTextLineHeight = (className) => {
+    textLineHeightClass.value = className;
+};
+
+const listClass = ref('init');
+const toggleListClass = (className) => {
+    listClass.value = className;
+};
+
+const browserStyle = ref('');
+const toggleBrowserStyle = () => {
+    browserStyle.value = browserStyle.value ? '' : 'revert';
+};
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+    height: unset !important;
+}
+.text-line {
+    line-height: initial;
+}
+.text-line-2 {
+    line-height: 200%;
+}
+.text-line-3 {
+    line-height: 300%;
+}
+
+.init {
+    color: red;
+    font-size: 18px;
+}
+.unset {
+    /** 这里的all指应用全部属性 */
+    all: unset;
+}
+.revert {
+    all: revert;
+}
+</style>