zoukankan      html  css  js  c++  java
  • 浏览器初始化样式

    Normalize.css和Reset CSS有什么区别?

    Reset CSS会删除所有内置的浏览器样式。像H1-6,p,strong,em等标准元素看起来完全一样,完全没有装饰。那么你应该自己添加所有的装饰。

    Normalize.css旨在使浏览器内置的浏览器样式保持一致,并修了一些bug。像H1-6这样的元素将会在浏览器中以一致的方式显示为粗体,大小等等。那么你应该只添加你的设计所需的装饰差异。

    为什么不建议使用*{padding:0;margin:0;}进行reset?

    *是通配符,需要把所有的标签都遍历一遍,当网站较大时,样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此一般大型的网站都有分层次的一套初始化样式。

    相关性能规则参考

    雅虎代码初始化

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
    body { background:#fff; color:#555; font-size:14px; font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; }
    td,th,caption { font-size:14px; }
    h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
    a { color:#555; text-decoration:none; }
    a:hover { text-decoration:underline; }
    img { border:none; }
    ol,ul,li { list-style:none; }
    input, textarea, select, button { font:14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif; }
    table { border-collapse:collapse; }
    html {overflow-y: scroll;} 
    
    .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
    .clearfix { *zoom:1; }/*公共类*/
    .fl { float:left}
    .fr {float:right}
    .al {text-align:left}
    .ac {text-align:center}
    .ar {text-align:right}
    .hide {display:none}

     腾讯QQ官网样式初始化

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
    body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
    a{color:#2d374b;text-decoration:none}
    a:hover{color:#cd0200;text-decoration:underline}
    em{font-style:normal}
    li{list-style:none}
    img{border:0;vertical-align:middle}
    table{border-collapse:collapse;border-spacing:0}
    p{word-wrap:break-word}

    淘宝官网样式初始化

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { 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%; }
    table { border-collapse:collapse; border-spacing:0; }
  • 相关阅读:
    [LeetCode] 226. Invert Binary Tree
    [LeetCode] 101. Symmetric Tree
    [LeetCode] 100. Same Tree
    [LeetCode] 104. Maximum Depth of Binary Tree
    [LeetCode] 280. Wiggle Sort
    [LeetCode] 42. Trapping Rain Water
    [LeetCode] 190. Reverse Bits
    [LeetCode] 144. Binary Tree Preorder Traversal
    [Leetcode] 58. Length of Last Word
    [LeetCode] 16. 3Sum Closest
  • 原文地址:https://www.cnblogs.com/94pm/p/9573324.html
Copyright © 2011-2022 走看看