HTML5 css 初始化

Posted 2021-04-04 YOURJOY

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放

为什么要清除css的默认样式？

1.首先每个浏览器对html标签都有自己的默认样式，用来保证在没有自定义样式的情况下也能被有据可循的渲染，然而各厂商都有自己的风格，需求也不同，需要自己的样式不被默认样式影响，就要清除加设置默认样式。
2.因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
----------------------------
css重置的优点
1.避免重复定义他们，提高样式代码的重用。
2.设置自己的风格，字体，颜色等。
3.减少代码->减少维护成本
4.可以提供完全空白的画布，然后你就可以自己定义相应的样式了。
5.开发更加有逻辑性：你只是添加样式而不是移除和修改。
6.浏览器的兼容性问题可以降到最小
css重置的缺点
1.增加页面大小
大多数css文件在2kb左右
不同浏览器渲染页面的不确定性，尽量少修改浏览器的东西
3.大多数网站都在用默认css。
-----------------------------

常用css reset 代码如下：

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
	outline: 1;
}

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

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

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

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

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

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}