• Normalize.css笔记


    每次写PC端的页面,最头疼的就是css兼容了,后来做的多了知道这是因为各浏览器间不一致的css渲染导致。

    记得最开始写的时候(在学校时候)灰常简单粗暴,啊哈哈。直接*{margin:0;padding:0;},但是*是通配符,css所有元素都会用到,有人说属于滥用,后来看到一篇博文http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/感觉确实我那样写不合适,然后实际做页面时候整理了一份css重置代码,不是很规范。

    其实这样看的话,我的代码格式很不规范。嘿嘿,建议大家看看规范这部分的文档。

    昨天很偶然的机会听到了Normalize.css,然后我看了看,以下是个人整理:

      1)应该有默认的字体(有些浏览器默认字体不一样)——html{ font-family:  '微软雅黑'; }

        2)body应该无margin——body{ margin: 0 }

      3)article,aside,details,figure,figcaption,footer,header,hgroup,main,menu,nav,section,smmary这些元素应该渲染为块元素——

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

      4)audio,canvas,progress,video应以内联块和基线对齐——

         audio,canvas,progress,video{ display: inline-block;vertical-align: baseline; }

      5)audio:not([controls]),template,[hidden]不应该展示——

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

              template,[hidden]{ display: none; }

      6)a链接互动时候应该有透明背景,a标签应无默认轮廓线——

              a{ background-color: transparent;  outline:0; }

      7)abbr[title]应该有一个点的底部边界——abbr[title]{ border-bottom: 1px dotted; }

      8)b,strong应该字体加粗——b,strong{ font-weight: bold; }

      9)dfn标签可标记那些对特殊术语或短语的定义,斜体展示——dfn{ font-style: italic; }

      10)h1默认有margin-top和margin-bottom,且h1字体的大小在各浏览器下有所差异——

                h1{ font-size: 20px; margin: 10px 0; }

      11)mark突出显示部分文本,应该有个黄色背景——mark{ background: #ff0; color: #000; }

      12)small呈现小号字体效果——small{ font-size: 80%; }

      13)sub下标文本,sup上标文本。不应该影响线的视觉线高度——

                sub,

                sup {

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

                sup{ top: -0.5em; }       sub{ bottom: -0.25em; }

        14)img应无边框——img{ border: 0; }

      15)svg不应该溢出——svg:not(:root) { overflow: hidden; }

      16)figure用作文档中插图的图像,应该有边框——figure{ margin: 1em 40px; }

      17)hr应该有一个内容框模板——hr{ box-sizing: content-box; height: 0; }

      18)pre标签的一个常见应用就是用来表示计算机的源代码,内容多时候有滚动条——

         pre{ overflow: auto; }

      19)code,kbd,pre,samp字体和大小应统一——

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

      20)button,input,optgroup,select,textarea应该继承父元素的字体颜色、字体,不应该有边框——

                button,input,optgroup,select,textarea{ color: inherit; font:inherit; margin: 0; }

      21)button应该有明显的溢出——button{ overflow: visible; }

      22)button,select不应该继承文本转换——

                button,select{ text-transform: none; }

      23)button和带有button风格的input,应该有指针光标的风格且看上去像个按钮——

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

      24)不可见的button和input,应该有默认的光标样式——

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

      25)button,input在火狐下不应该有额外的内部填充——

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

      26)input不应继承线高度——input { line-height: normal; }

      27)checkbox,radio有边框框模型无内边距——

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

      28)input[type="number"]显示一个默认的光标按钮的点击目标在铬(还不明白)——

                input[type="number"]::-webkit-inner-spin-button,

                input[type="number"]::-webkit-outer-spin-button { height: auto; }

      29)input[type="search"]

                

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

      30)fieldset元素可将表单内的相关元素分组,应具有一致的border、padding和margin——

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

      31)legend 元素为 fieldset 元素定义标题,应继承字体颜色且无间距——

                legend{ border: 0; padding: 0; }

      32)多行文本框不应该有滚动条,除非内容很多——textarea{ overflow: auto;}

      33)表格相关:单元格间不应该有间距——

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

                td,th { padding: 0;}

      34)通过 <optgroup> 标签把相关的选项组合在一起:

                ptgroup { font-weight: bold; }

  • 相关阅读:
    poj2356
    poj2021
    网络直销:贯通式电子商务营销
    网络营销趋同化时代到来
    一个睡五分钟等于六个钟头的方法
    张胜(帮别人名字作诗)
    我在阳光下向你表白
    李建逸(帮别人名字作诗)
    夜深,你的手机为谁而开
    杨英(帮别人名字作诗)
  • 原文地址:https://www.cnblogs.com/RaeLiu/p/5054576.html
Copyright © 2020-2023  润新知