每日思考（2019/12/27）

题目概览

• 请描述HTML元素的显示优先级
• 要让Chrome支持小于12px的文字怎么做？
• 写一个验证身份证号的方法

题目解答

请描述HTML元素的显示优先级

• HTML元素的显示优先级
  • 表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则。帧元素总是比其他HTML元素优先，因此也总是显示在最前面，表单元素总是比所有非表单元素优先。HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框(SELECT),文本输入框，密码输入框，单选输入框，复选输入框等等。常见的非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记等等。
  • HTML元素又可以根据其显示要求分成两类，即有窗口的HTML元素(Windowed Element),无窗口的HTML元素（Windowless Element)。有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE5.01以主更早版本中的IFRAME元素。无窗口的元素包括：大多数的普通HTML元素，如链接和TABLE标记，除了SELECT元素之外的大多数表单元素
• 浏览器类型与显示优先级
  • Netscape/Mozilla：在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。
  • Netscape/Mozilla：在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。
  • Opera：在最新的Opera（7.10*）浏览器中，包括SELECT在内的所有表单元素根据z-index属性或它们在HTML页面中的出现次序来确定显示优先级。但是，最新的Opera浏览器不将IFRAME作为无窗口元素显示，IFRAME被看做有窗口元素，在显示次序上要比所有无窗口元素优先。
• CSS的z－index属性
  • CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时，z-index值较大的元素将覆盖z-index值较小的元素
  • 但z-index属性值不是万能的。有窗口的元素总是显示在无窗口元素的前面，z-index属性值只有在同一类元素之间才起决定作用。形象地说，有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上，两类元素分别自成体系，它们的z-index属性也只相对于同一画布上的其他元素起作用

要让Chrome支持小于12px的文字怎么做？

• -webkit-text-size-adjust:none; 这个属性在高版本（27后）的 Chrome 中已经被废除

  #chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

• 使用 transform: scale(0.5, 0.5)，但使用 transform 需要注意下面几点：

  • transform 对行内元素无效，因此要么使用 display: block; 要么使用 display: inline-block;
  • transform 即使进行了缩放，原来元素还是会占据对应的位置。因此需要做调整，最好是在外面再包一层元素，以免影响其他元素

  .px12 {
     font-size: 12px;
  }
  .px9 {
      font-size: 9px;
      display: inline-block;
      -webkit-transform: scale(0.75);        /* 12*0.75=9 */
  }
  .px6 {
      font-size: 6px;
      display: block;
      -webkit-transform: scale(0.5);        /* 12*0.5=9 */
      float: left;
  }

• 将文字做在图片上

写一个验证身份证号的方法

//身份证号码的组成：地址码6位+年份码4位+月份码2位+日期码2位+顺序码3位+校验码1位
function check(val){
    var reg=/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|(10|20|30|31))\d{3}[0-9Xx]$/;
     return reg.test(val);
}
//检测省份码
function checkProvice(val){
    var patten=/^[1-9][0-9]/;
    if(patten.test(val)){
        var prov={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",51:"四川",52:"贵州",53:"云南",54:"西藏",50:"重庆",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",81:"香港",82:"澳门",83:"台湾"};
        if(prov[val]){return true;};
    }
   return false;
}
//检测出生日期
function checkBirthDay(val){
    var patten=/^(19|20)\d{2}((0[1-9])|1[0-2])(([0-2][1-9])|(10|20|30|31))/;
    if(patten.test(val)){
        var year=val.substring(0,4);
        var month=val.substring(4,6);
        var day=val.substring(6,8);
        var date=new Date(year+"-"+month+"-"+day);
        if(date&&date.getMonth()==(parseInt(month)-1)){return true;}
    }
    return false;
}
//检测校验码
function checkVerifyCode(val){
    var patten=/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|(10|20|30|31))\d{3}[0-9X]$/;
    var ratio=[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
    var codeArr=[1,0,"X",9,8,7,6,5,4,3,2];
    var code=val.substring(17);
    if(patten.test(val)){
        var sum=0;
        for(var i=0;i<17;i++){
            sum+=val[i]*ratio[i];
        }
        console.log(sum)
        var remainder=sum%11;
        if(codeArr[remainder]==code){
            return true;
        }
    }
    return false;
}
function checkIndetityCardNo(val){
    var province=val.substring(0,2);
    if(checkProvice(province)){
         var date=val.substring(6,14);
         if(checkBirthDay(date)){ 
             return checkVerifyCode(val);
         }
    }
    return false;
}