为什么需要初始化?
因为浏览器的种类繁多,且各个浏览器对标签的默认值是不同的,所以就造成了同样的代码在各个浏览器上显示效果不一
Part.1 如何初始化
最简单的方式:
* { margin: 0; padding: 0 }
但是此方式存在弊端:
就是检索时间,我们都知道 * 为通配符,在这里我们可以把它看作所有标签,可想而知所有标签这个量是庞大的。
电脑并非人脑,它只会一个一个的去匹配,并不会智能去选择,这就造成了如果我们构建大型页面应用时,将付出不必要的时间,这是不可取的!
Part.2 例子
我们参考 https://www.taobao.com/ (淘宝网)
它的 CSS初始化 代码整理如下:
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif} h1,h2,h3,h4,h5,h6{font-size:100%} address,cite,dfn,em,var{font-style:normal} code,kbd,pre,samp{font-family:courier new,courier,monospace} small{font-size:12px} ol,ul{list-style:none} a{text-decoration:none} a:hover{text-decoration:underline} sup{vertical-align:text-top} sub{vertical-align:text-bottom} legend{color:#000} fieldset,img{border:0} button,input,select,textarea{font-size:100%} button{border-radius:0} table{border-collapse:collapse;border-spacing:0}
Part.3 结论
我们参考 淘宝网 的 CSS初始化 代码得出结论: 在我们需要构建大型页面应用或者需要对网站进行 SEO 优化时,在 CSS初始化方面,我们需要做到的是 用到即申明 而不是 * 搞定一切!