重置 CSS – 复位样式表

旨在解决不同浏览器间的不一致性,通过重置(清空) CSS 中的一些默认值,来达到一致性。在实现优秀的响应式布局中,这是挺有用的。例如 normalize.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, 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%;
    vertical-align: baseline;
    outline: 0 none;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

q, blockquote {
    quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none;
}

a img {
    border: none;
}

/* 让这些 HTML5 的属性在一些渣的浏览器中以 DIV 的形式跑起来 */

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, main {
    display: block;
}

img {
    height: auto;
}

img, object, embed, video, iframe {
    max-width: 100%;
}

sub {
    top: 6px;
    vertical-align: bottom;
}

sup {
    top: -6px;
    vertical-align: top;
}

small {
    font-size: smaller;
}

q {
    quotes: "“" "”" "‘" "’";
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

html {
    box-sizing: border-box;
}

* , * :before, * :after {
    box-sizing: inherit;
}

如果根元素body的line-height重置为1,就当于把所有元素行高中的leading重置为0。

body {
	line-height: 1;
}

发表评论或回复

*选项为必填项,您的电子邮件地址不会被公开。

*
*