初始化CSS样式

为什么需要初始化?

因为浏览器的种类繁多,且各个浏览器对标签的默认值是不同的,所以就造成了同样的代码在各个浏览器上显示效果不一

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','\5b8b\4f53',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初始化方面,我们需要做到的是 用到即申明 而不是 * 搞定一切!

猜你喜欢

转载自www.cnblogs.com/langxiyu/p/11684409.html