css默认样式初始化实例操作

css 默认样式初始化

1.css reset:这个是我们在做项目时比较常用的一套css初始化样式，在这里就直接给出代码了

html, body, p, 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;
}

/* html5 display-role reset for older browsers */
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;
}
html {
    font-size: 62.5%;
    color: #222;
}

::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
/* ===============
   自定义页面样式
   =============== */
body {
    font:1.2rem "simhei",arial,helvetica,sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover, a:active {
    color: #0ae;
    text-decoration: underline;
}
/*公共类*/
.fl {
    float: left
}
.fr {
    float: right
}
.al {
    text-align: left
}
.ac {
    text-align: center
}
.ar {
    text-align: right
}
.hide {
    display: none
}

在这里推荐一个网址，里面含有好几个初始化css的代码：https://segmentfault.com/a/1190000009369872

2.normalize.css:在这里给出官网，需要的可以去官网了解；https://necolas.github.io/normalize.css/? ；还有一个描述了normalize.css的网址：https://www.jianshu.com/p/3d21d1932aa0

这里也给出官网的代码：

/*! normalize.css v2.1.2 | mit license | git.io/normalize */
/*
/*! 我就是自己看看，然后翻译下下，让大家看看 */

/* ==========================================================================
   html5 display definitions

   html5 新增元素定义

   ========================================================================== */

/**
 * correct `block` display not defined in ie 8/9.
 *
 * 修正ie 8/9 中未定义的块级元素。
 */

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

/**
 * correct `inline-block` display not defined in ie 8/9.
 *
 * 修正在 ie 8/9 中未定义的 'inline-block' 元素。
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * prevent modern browsers from displaying `audio` without controls.
 * remove excess height in ios 5 devices.
 *
 * 阻止现在浏览器显示未定义 control 播放控件的 'audio' 声音元素。
 * 删除 ios 5 设备中显示的多余的高度。
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * address styling not present in ie 8/9.
 *
 * 处理 ie 8/9 中不存在的样式。
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   base

   基本设置
   ========================================================================== */

/**
 * 1. set default font family to sans-serif.
 * 2. prevent ios text size adjust after orientation change, without disabling
 *    user zoom.
 *
 * 1. 设置默认字体类型为 sans-serif.
 * 2. 当用户放大或缩小页面时不改变字体大小。
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * remove default margin.
 *
 * 删除默认边距。
 */

body {
    margin: 0;
}

/* ==========================================================================
   links

   链接
   ========================================================================== */

/**
 * address `outline` inconsistency between chrome and other browsers.
 *
 * 处理 chrome 与其它浏览器中关于 'outline' 的不一致性。
 */

a:focus {
    outline: thin dotted;
}

/**
 * improve readability when focused and also mouse hovered in all browsers.
 *
 * 为所有浏览器改善当激活或悬停在元素上时元素内容的可读性。
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   typography

   排版
   ========================================================================== */

/**
 * address variable `h1` font-size and margin within `section` and `article`
 * contexts in firefox 4+, safari 5, and chrome.
 *
 * 处理多变的 'h1' 字体大小及其在 firefox 4+, safari 5, 及 chrome时浏览器中的 
 * 'section' 与　'article' 元素中的边距。
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * address styling not present in ie 8/9, safari 5, and chrome.
 *
 * 处理在 ie 8/9, safari 5, 及 chrome 没有的样式。
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * address style set to `bolder` in firefox 4+, safari 5, and chrome.
 *
 * 处理 firefox 4+, safari 5, 及 chrome 中默认的 'bolder' 样式为　'bold'.
 */

b,
strong {
    font-weight: bold;
}

/**
 * address styling not present in safari 5 and chrome.
 *
 * 处理在 safari 5 和 chrome 没有的样式。
 */

dfn {
    font-style: italic;
}

/**
 * address differences between firefox and other browsers.
 *
 * 处理　firefox　与其它浏览器的差异。
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * address styling not present in ie 8/9.
 *
 * 处理在 ie 8/9 中没有的样式。
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * correct font family set oddly in safari 5 and chrome.
 *
 * 修正确 safari 5 和 chrome 中古怪的默认字体。
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * improve readability of pre-formatted text in all browsers.
 *
 * 为所有浏览器改善预格式化文本的可读性。
 */

pre {
    white-space: pre-wrap;
}

/**
 * set consistent quote types.
 *
 * 设置一致的引用格式。
 */

q {
    quotes: "\201c" "\201d" "\2018" "\2019";
}

/**
 * address inconsistent and variable font size in all browsers.
 *
 * 处理所有浏览器中字体大小的不一致性[译者注：原文直译为：处理所有
 * 浏览器中的不一致和多变的字体大小]。
 */

small {
    font-size: 80%;
}

/**
 * prevent `sub` and `sup` affecting `line-height` in all browsers.
 *
 * 阻止所有浏览器中 'sub' 和 'sup' 元素影响 'line-height'. 
 * [译者注：就是不让上标与下标影响行高。]
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   embedded content

   嵌入的内容
   ========================================================================== */

/**
 * remove border when inside `a` element in ie 8/9.
 *
 * 删除 ie 8/9 中当内容位于 'a' 中出现的边框。
 */

img {
    border: 0;
}

/**
 * correct overflow displayed oddly in ie 9.
 *
 * 修正 ie 9 中显示古怪的溢出内容。
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   figures

   figure 图像/图表/代码等
   ========================================================================== */

/**
 * address margin not present in ie 8/9 and safari 5.
 *
 * 处理在 ie 8/9 和 safari 5 没有的边距。
 */

figure {
    margin: 0;
}

/* ==========================================================================
   forms
   ========================================================================== */

/**
 * define consistent border, margin, and padding.
 *
 * 定义一致的边框、外边距及内边距。
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. correct `color` not being inherited in ie 8/9.
 * 2. remove padding so people aren't caught out if they zero out fieldsets.
 * 1. 修正在　ie 8/9 中没有继承的 'color'. 
 *
 *    [译者注：说是修正颜色嘛，可下面没有关于颜色的呀，这也行？求大神解释！]
 * 2. 去掉内边距，避免当用户清空表单组时认为出错了。
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. correct font family not being inherited in all browsers.
 * 2. correct font size not being inherited in all browsers.
 * 3. address margins set differently in firefox 4+, safari 5, and chrome.
 *
 * 1. 修正所有浏览器中未被继承的字体类型。
 * 2. 修正所有浏览器中未被继承的字体大小。
 * 3. 处理 firefox 4+, safari 5, 及 chrome 中默认设置不同的外边距。
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * address firefox 4+ setting `line-height` on `input` using `!important` in
 * the ua stylesheet.
 *
 * 处理 firefox 4+ 中的客户端样式表里使用 '!important' 设置的 'line-height'.
 */

button,
input {
    line-height: normal;
}

/**
 * address inconsistent `text-transform` inheritance for `button` and `select`.
 * all other form control elements do not inherit `text-transform` values.
 * correct `button` style inheritance in chrome, safari 5+, and ie 8+.
 * correct `select` style inheritance in firefox 4+ and opera.
 * 
 * 处理 'button' 和 'select' 的 'text-transform' 继承的不一致性。
 * 所有其它表单控件元素不继承 'text-transform' 的值。
 * 修正 chrome, safari 5+, 及 ie 8+ 中 'button' 的继承样式。
 * 修正 firefox 4+ 和 opera 中 'select' 的继承样式。
 */

button,
select {
    text-transform: none;
}

/**
 * 1. avoid the webkit bug in android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. correct inability to style clickable `input` types in ios.
 * 3. improve usability and consistency of cursor style between image-type
 *    `input` and others.
 *
 * 1. 避免 android 4.0.* 中 webkit 的一个bug, 防止 'audio' 与 'video' 的播放控件失效。
 * 2. 修正 ios 中不可点击的 'input' 样式。
 * 3. 改善图片类型的 'input' 等光标样式的可用性与一致性。
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * re-set default cursor for disabled elements.
 * 
 * 重置不可用元素的默认光标样式。
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. address box sizing set to `content-box` in ie 8/9.
 * 2. remove excess padding in ie 8/9.
 *
 * 1. 处理 ie 8/9 中设置为 'content-box' 的盒子模型。
 * 2. 删除 ie 8/9 中多余的内边距。
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. address `appearance` set to `searchfield` in safari 5 and chrome.
 * 2. address `box-sizing` set to `border-box` in safari 5 and chrome
 *    (include `-moz` to future-proof).
 *
 * 1. 处理 safari 5 和 chrome 中默认设置为 'appearance' 的 'searchfield'.
 * 2. 处理 safari 5 和 chrome 中默认设置为 'box-sizing' 的 'border-box'
 *    (包括不会过时的 '-moz').
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * remove inner padding and search cancel button in safari 5 and chrome
 * on os x.
 *
 * 删除 safari 5 和 os x 上的 chrome 中的输入框上的内边距和搜索取消按钮。
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * remove inner padding and border in firefox 4+.
 *
 * 删除 firefox 4+ button 与 input 上的内边距。
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. remove default vertical scrollbar in ie 8/9.
 * 2. improve readability and alignment in all browsers.
 *
 * 1. 删除 ie8/9 中默认的垂直滚动条。
 * 2. 改善所有浏览器中的可读性并使文本垂直对齐。
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   tables

   表格
   ========================================================================== */

/**
 * remove most spacing between table cells.
 *
 * 删除表格里单元格间的间距。
 */

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