html+css 经验使用总结

2019独角兽企业重金招聘Python工程师标准>>>

 1、设置placeholder的颜色css：
    ::-webkit-input-placeholder { color:#6f6f6f; } 
    :-moz-placeholder {/* Firefox 18- */ color: #6f6f6f; } 
    ::-moz-placeholder{/* Firefox 19+ */ color:#6f6f6f; } 
    :-ms-input-placeholder { color:#6f6f6f; }
    
 2、做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
  css代码:
   .test1 {
          text-align:justify;
          text-justify:distribute-all-lines;/*ie6-8*/
          text-align-last:justify;/* ie9*/
          -moz-text-align-last:justify;/*ff*/
          -webkit-text-align-last:justify;/*chrome 20+*/
      }
      @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
          .test1:after{
              content:".";
              display: inline-block;
              width:100%;
              overflow:hidden;
              height:0;
          }
      } 
      
  3、没有设置高宽水平垂直居中
      .wrapper {
          padding: 20px;
          background:orange;
          color:#fff;
          position:absolute;
          top:50%;
          left:50%;
          border-radius: 5px;
          -webkit-transform:translate(-50%,-50%);
          -moz-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
        }
  4、position:absolute: z-index无依赖
      1.如果只有一个绝对定位元素，自然不需要z-index,自动覆盖普通元素；
      2.如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index；
      3.如果多个绝对定位交错，非常非常少见，z-index:1控制；
      4.如果非弹窗类的绝对定位元素z-index>2,必定z-index冗余，请优化！
  5、css设置div为屏幕高度
      html,body{height:100%; width:100%; overflow:hidden; margin:0;
      padding:0;}
      .main{width:100%; height:100%; overflow:hidden; margin:0;
      padding:0;}
  6、绝对居中
       margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; 
  7、一行字体两端对齐
      text-align-last: justify;
  8、字体设置为不可选中，不可复制
    -moz-user-select: none; -webkit-user-select:none;
  9、调用textarea的类似oninput事件
    $('textarea').bind('input propertychange', function() {
        $('.msg').html($(this).val().length + ' characters');
    });
  10、input框只允许输入数字
 οnkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"
  12、消除display:inline-block元素之间的间隔
     font-size: 0;  -webkit-text-size-adjust:none;
  13、当字母与数字连接无空格不换行时，可使用以下属性强制换行；
      word-wrap:break-word;word-break:break-all;

转载于:https://my.oschina.net/dreambreeze/blog/1046686