CSSreset

/* 
@名称: base 
@功能: 重设浏览器默认样式 
*/ 
/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ 
html { 
color:black; 
background:white; 

/* 内外边距通常让各个浏览器样式的表现位置不同 */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
margin:0; 
padding:0; 

/* 要注意表单元素并不继承父级 font 的问题 */ 
body,button,input,select,textarea { 
font:12px SimSun,tahoma,arial,sans-serif; 

input,select,textarea { 
font-size:100%; 

/* 去掉各Table cell 的边距并让其边重合 */ 
table { 
border-collapse:collapse; 
border-spacing:0; 

/* IE bug fixed: th 不继承 text-align*/ 
th { 
text-align:inherit; 

/* 去除默认边框 */ 
fieldset,img { 
border:none; 

/* ie6 7 8(q) bug 显示为行内表现 */ 
iframe { 
display:block; 

/* 去掉 firefox 下此元素的边框 */ 
abbr,acronym { 
border:none; 
font-variant:normal; 

/* 一致的 del 样式 */ 
del { 
text-decoration:line-through; 

address,caption,cite,code,dfn,em,th,var { 
font-style:normal; 
font-weight:500; 

/* 去掉列表前的标识, li 会继承 */ 
ol,ul { 
list-style:none; 

/* 对齐是排版最重要的因素, 别让什么都居中 */ 
caption,th { 
text-align:left; 

/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ 
h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:500; 

q:before,q:after { 
content:''; 

/* 统一上标和下标 */ 
sub, sup { 
font-size:75%; 
line-height:0; 
position:relative; 
vertical-align:baseline; 

sup { 
top:-0.5em; 

sub { 
bottom:-0.25em; 

/* 让链接在 hover 状态下显示下划线 */ 
a:hover { 
text-decoration:underline; 

/* 默认不显示下划线,保持页面简洁 */ 
ins,a { 
text-decoration:none; 

/* IE6,7焦点点状线去除 */ 
a:focus,*:focus { 
outline:none; 

/* 清除浮动 */ 
.clearfix:before,.clearfix:after { 
content:""; 
display:table; 

.clearfix:after { 
clear:both; 
overflow:hidden; 

.clearfix { 
zoom:1; /* for IE6 IE7 */ 

.clear{ 
clear:both; 
display:block; 
overflow:hidden; 
height:0; 
line-height:0; 
font-size:0; 

/* 设置显示和隐藏, 通常用来与 JS 配合 */ 
.hide { 
display:none !important; 
visibility:hidden; 

.block { 
display:block !important; 

/* 设置内联, 减少浮动带来的bug */ 
.fl { 
float:left; 
display:inline; 

.fr { 
float:right; 
display:inline; 




### CSS Reset 介绍 CSS Reset 即重置 CSS,也就是重置默认样式。不同浏览器对 HTML 元素有不同的默认样式规则,Reset 通过覆盖这些默认值,确保在所有浏览器中起点一致,避免在 CSS 中重复定义元素的默认样式,让开发者可以从一个统一的基础开始设计页面样式 [^1][^2]。 以前常用 `*{margin:0;padding:0}` 来进行样式重置,但这种方式格式化太严重,逐渐被废弃。国内大型门户如 QQ、淘宝等在进行 CSS Reset 时均有 YUI 的影子,业内使用较多的还有 Erik Meyer’s CSS Reset [^1]。 ### CSS Reset 使用 以下为几种常见的使用方式: #### 手动编写简单的 CSS Reset 可以编写一个简单的 CSS 文件,覆盖常见元素的默认样式。例如: ```css 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 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; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ``` 将上述代码保存为 `reset.css` 文件,然后在 HTML 文件或前端框架的入口文件中引入: ```html <link rel="stylesheet" href="reset.css"> ``` 在 UniApp 开发中,可以在 `App.vue` 中引入: ```vue <style> @import './reset.css'; /* 其他样式 */ </style> ``` #### 使用第三方 CSS Reset 库 - **normalize.css**:更温和,会保留一些有用的默认样式。可以通过 npm 安装: ```bash npm install normalize.css ``` 安装完成后,在项目入口文件中引入: ```javascript // 在 JavaScript 入口文件中引入 import 'normalize.css'; ``` 在 UniApp 的 `App.vue` 中引入: ```vue <style> @import 'normalize.css'; /* 其他样式 */ </style> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值