简单需要
经常在做项目时(哪怕是使用一些ui库时)需要快速使用一个cssreset,简单一个*{margin:0;padding:0}太暴力了,从网上找一个吧,有那么几种风格的reset却感觉这里或那里不尽如人意,或说是有的定义的很全很大其实项目中根本没必要,那自己揉了一些网上的东西和自己的一些习惯,粗略参考了浏览器的基本默认和,弄了这么一个简单而又不失基本的reset,备录如下:
- 若过多针对移动端或遵循语义或细微全面,增详请参normalize
- 侧重点:语义和样式的平衡取舍
- 设置后,相当于无语义块元素(像div):h1, h2, h3, h4, h5, h6, p
- 设置后,相当于无语义行内元素(像span):b, strong, i, cite, em, var, address, dfn
====== 一些没有改动的浏览器默认 ======
html, body, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, ol, ul, p, div
noframes, center, dir, hr, menu, pre, address, article, aside, footer, header, hgroup, layer, main, nav, section, figcaption,
figure, dir, legend, xmp, plaintext, listing{display: block }
li { display: list-item}
//table系列对于空间大小影响不多,如:th没有margin,所以保留其中大多数语义功能:加粗|居中。字号方面也没影响
th { font-weight: bolder; text-align: center}
caption{ text-align: center}
//保留table系列的垂直居中
thead, tbody, tfoot { vertical-align: middle}
td, th { vertical-align: inherit }
//待定
pre, tt, code, kbd, samp { font-family: monospace} //end待定
pre{ white-space: pre}
button, textarea, input, object, select { display:inline-block; }
//语义直接部分,且不涉margin等空间大小影响,保留
big { font-size: 1.17em}
small, sub, sup { font-size: .83em}
sub{ vertical-align:sub}
sup { vertical-align: super} //end
s, strike, del { text-decoration: line-through}
u, ins { text-decoration: underline}
Code
1 |
|