|
|
|
|
@ -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>
|
