简易cssReset

简单需要

经常在做项目时(哪怕是使用一些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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

body {margin: 0;line-height: 1.15}
p, form, dl, dir, menu, dd {margin: 0}
h1, h2, h3, h4, h5, h6 {margin: 0;font-size: 100%;font-weight: 400} /*牺牲语义:粗体|字号*/
b, strong {font-weight: 400} /*牺牲语义:粗体*/
i, cite, em, var, address, dfn {font-style: normal} /*牺牲语义:斜体*/
hr {border: 0;margin-block-start: 0;margin-block-end: 0} /*牺牲语义:线的样式*/ /*使hr只行使block功能,不参与空间大小及样式。(height为0,但display:block生效,像是空的div)*/
ol, ul {margin: 0;list-style: none}
a, ins {text-decoration: none}
a:hover {text-decoration: underline}
img {border: 0 none}
table {border-collapse: collapse;border-spacing: 0}

input, textarea, button, select, optgroup{color: inherit;font-size: 100%;font-family: inherit;line-height: inherit}
optgroup{font-style: normal}
input, textarea {padding: 0}
button {-webkit-appearance: button;cursor: pointer;text-transform: none}
select {text-transform: none}
legend {color: inherit}
[type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;cursor: pointer}
button[disabled], html input[disabled] {cursor: default}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border: 0;padding: 0}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px}
fieldset {margin: 0;border: 0}
blockquote {margin: 0;quotes: none}
q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: '';}

.bold{font-weight: bold}
.italic{font-style: italic}
.clear:before, .clear:after {content: "";display: table}
.clear:after {clear: both}
.elp{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}