小知识

• selcet框内的文字垂直居中，兼容ie8

在对标签进行一些样式设计的同时，会要求选择框内的文字是垂直居中的，之前用height=line-height的方法很好，但是在IE8下不能兼容，今天发现一个方法，就是设置标签的高度，但不设置高度和行高，用padding把文字撑起来，看起来是垂直居中

//一个下拉选择框

  //下拉箭头（ie不支持）
  
  
    ADC
    中单
    上单
  
       
// CSS样式
.select { position: relative; display: inline-block; vertical-align: middle; width: 296px; height: 60px; line-height: 60px; padding: 0; margin-right: 20px; cursor: pointer; overflow: hidden; }
.select .s-down { width: 23px; height: 13px; background: url("../ossweb-img/down.png") no-repeat center; display: block; position: absolute; right: 15px; top: 25px; z-index: 2; cursor: pointer; pointer-events: none; }
.select select { width: 100%; text-indent: 16px; border: 1px solid #655548; background: #23272b; font-size: 14px; text-align: left; position: absolute; box-sizing: border-box; color: #a57d5c; padding： 19px 0 18px 16px; margin: 0; left: 0; top: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.select select option { display: block; text-align: left; width: 353px; height: 60px; font-size: 14px; padding: 20px; }                                                                            

样式

页面

• word-wrap 文字自动换行，有可能会拆分英文单词

word-wrap:break-word;

• text-overflow 文字溢出

div{
  width:200px;
  height:200px;
  overflow:hidden;
  white-space: nowrap;//文本禁止换行
  text-overflow:ellipsis;//溢出的文字用省略号...
  text-overflow:clip;//溢出的文字直接被修剪
}

text-overflow

• @font-face 字体

• 在做移动端页面的时候，有时会遇到让页面横版时适配另一个样式，这是就需要准备两套样式，在第二套样式中写横版的样式
  githubDEMO地址
  https://github.com/Annzmy/autoResize

在页面顶部引入两套样式

• 看腾讯的一个页面，背景有星星移动的效果，觉得很好看。之前在做星之守护者页面的时候，也尝试着用了星光背景位移的效果。还不错。其实实现起来很简单，就是两张星光图片相对位移运动就可以啦
  项目地址：星之守护者-六周年狂欢开幕-全球首发-英雄联盟周边商城
  (http://lolriotmall.qq.com/act/a20170725star/index.html)

/*星光位移*/
@keyframes bg2 {
  0% {transform: translate3d(-1300px, 0, 0);}
  100% {transform: translate3d(0, 0, 0);}
}        
@keyframes bg {
  0%{transform: translate3d(0,0,0);}
  100%{transform: translate3d(-1300px,0,0);}
}
.bg2 { 
  height: 100%;
  left: 0;
  position: absolute;
  top: -10px;
  opacity: 1;
  fill: blur(20px);
  transform: translate3d(0, 0, 0);
  background: url("../ossweb-img/bg2.png") repeat bottom left;
  background-size: 800px auto;
  width: 2400px;
  animation: bg2 90s linear infinite;
 }
 .bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 20px;
  opacity: .6;
  transform: translate3d(0, 0, 0);
  background: url("../ossweb-img/bg.png") repeat bottom left;
  background-size: 800px auto;
  width: 2400px;
  animation: bg 90s linear infinite; 

• 默认的锚点跳转效果是比较生硬的，点击之后直接到锚点所指向的部分，视觉体验来说太僵硬了，
  如果有页面平滑滚动到“目的地”的效果就会好很多
  githubDEMO地址
  https://github.com/Annzmy/some-skills

//PC端的锚点跳转滑动效果
//
$('a[href*=#],area[href*=#]').click(function(){
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
    if ($target.length) {
      var targetOffset = $target.offset().top;
      $('html,body').animate({
        scrollTop: targetOffset
      }, 500);
      return false;
    }
  }
})

//移动端的锚点跳转滑动效果
//点击跳转
$.fn.scrollTo = function(options) {
  var defaults = {
    toT: 0, //滚动目标位置
    durTime: 500, //过渡动画时间
    delay: 30, //定时器时间
    callback: null //回调函数
  };
  var opts = $.extend(defaults, options),
  timer = null,
  _this = this,
  curTop = _this.scrollTop(), //滚动条当前的位置
  subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值
  index = 0,
  dur = Math.round(opts.durTime / opts.delay),
  smoothScroll = function(t) {
    index++;
    var per = Math.round(subTop / dur);
    if (index >= dur) {
      _this.scrollTop(t);
      window.clearInterval(timer);
      if (opts.callback && typeof opts.callback == 'function') {
        opts.callback();
      }
      return;
    }else {
       _this.scrollTop(curTop + index * per);
    }
  };
  timer = window.setInterval(function() {
    smoothScroll(opts.toT);
   }, opts.delay);
  return _this;
};

var annzmy ={
  init: function () {},
  slideTo:function(e){
    var offset = $(e).offset().top;
    $("html,body").scrollTo({
    "toT": offset
    });
   }
 };
 $(function () { annzmy.init(); });

• PC reset

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:none;-webkit-filter: brightness(1.1); filter: brightness(1.1);}
img{border:0}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
ul,ol,dl{list-style:none;}
*{outline:none}
a:focus{outline: none}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}
.fl {float: left}
.fr {float: right}
.hide{display: none}
body{
  line-heihgt:1;
}//这样就不用每个元素再加了，可以继承
//微软雅黑8进制码
font-family: '\5FAE\8F6F\96C5\9ED1';

• 移动端reset

*{-webkit-text-size-adjust: none;}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font-size: 24px; line-height:1.5}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:none}
a:focus{outline:none}
*{outline:none}
img{vertical-align:middle;border: 0;padding: 0;margin:0;}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
ul,ol,dl{list-style:none;}
body *{box-sizing: border-box;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}
.fl {float: left}
.fr {float: right}
//手机端苹果版加了 overflow: auto; 的，后面都要加上 -webkit-overflow-scrolling: touch;

• 图片按比例缩放，不超过父元素
  max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

• 水平垂直居中

display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
text-align: center;

• 滚动条

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

.table-box::-webkit-scrollbar{width: 8px;}
.table-box::-webkit-scrollbar-track{background-color: #0f164f;border-radius: 10px;}
.table-box::-webkit-scrollbar-thumb{background-color: #4de0e9;border-radius: 10px;}
.table-box::-webkit-scrollbar-corner{display: none;}

• 文字换行

word-break:break-all;   只对英文起作用，以字母作为换行依据
word-wrap:break-word;   只对英文起作用，以单词作为换行依据
white-space:pre-wrap;  只对中文起作用，强制换行

• 文字描边css

 -webkit-text-shadow:yellow 2px 0 0,red 0 2px 0,green -2px 0 0,blue 0 -2px 0;
  text-shadow:yellow 2px 0 0,red 0 2px 0,green -2px 0 0,blue 0 -2px 0;

image.png

• 文字描边(加粗,描边层级要比文字层级低)

.text-stroke{
  color:#ff0000;
  font-weight: bold;
  position:relative;
  z-index: 0;
  margin:0 auto;
  text-align: center;
  &:before{
    content: attr(data-text);
    -webkit-text-stroke:5px #f0d14d;
    position:absolute;
    z-index: -1;
  }
}

示意图

• 禁止复制、粘贴 默认可以复制、粘贴

* {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input{
    -webkit-user-select: auto;
    user-select: auto;
}

• transform-origin(设置旋转元素的基点位置，x y值) 动画停在最后一帧

transform-origin: 50% 0;   animation-fill-mode: forwards;

• 替换checkbox,radio原有样式

//CSS
.whether input[type="radio"]{display:none;}
.whether input[type="radio"]+span{}
.whether input[type="radio"]:checked+span{}
//HTML

   
   有


   
   无

• tab标签页切换

  

    

    

  



/*tab切换*/
$(".tab>li").click(function(){
  var indexs = $(this).index();
  $(this).addClass("on").siblings().removeClass("on");
  $(".con").eq(indexs).addClass("show").siblings().removeClass("show");
)};

• 边框&背景渐变

border:2px solid transparent;
background-clip:padding-box,border-box; 
background-origin:padding-box,border-box; 
background-image:linear-gradient(#fff,#fff),linear-gradient(#22afc4,#56c6e1);

-背景颜色渐变

background:-webkit-gradient(linear, 0 0, 360 100%, from(#2b3038), to(#7a6649));
background:-moz-linear-gradient(left, #2b3038,#7a6649); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b3038,endColorstr=#7a6649,grandientType=1);
h5页面可用
background: -webkit-linear-gradient(left, #e4e4e4 , #f1f1f1);
background: linear-gradient(to right, #e4e4e4 , #f1f1f1);

• 文字渐变

    background: -webkit-gradient(linear, left top, left bottom, from(#fee9c7), to(#c79d61));
    background: -webkit-linear-gradient(top, #fee9c7, #c79d61);
    background: -o-linear-gradient(top, #fee9c7, #c79d61);
    background: linear-gradient(top, #fee9c7, #c79d61);
    -webkit-background-clip: text;
    color: transparent;

• iOS加了 overflow: auto; 的，后面都要加上 -webkit-overflow-scrolling: touch;

• 按钮变灰加上gray这个class

.gray{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;pointer-events: none;}

• :not(.gray) 设置除了这个class之外的元素样式

例子：
.sign tr td a:not(.gray):hover{-webkit-filter: brightness(1.2); filter: brightness(1.2);}

• a标签为空是要加 兼容IE

background: url(about:blank);

• 变亮

-webkit-filter: brightness(1.2); filter: brightness(1.2);

• 多行超出显示省略号

white-space: normal;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /*需要显示的行数*/

• 单行超出显示省略号

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

• 水平翻转

-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;

• 垂直翻转

-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;

• 垂直居中

.team li p{width: .88rem;height: .88rem;display: table;}
.team li .img-box{vertical-align: middle; display: table-cell; height: .88rem;}

• css修改input、textarea标签placeholder属性默认文字颜色

textarea::-webkit-input-placeholder {color: #429ec5;  }
textarea:-moz-placeholder { color: #429ec5;  }
textarea::-moz-placeholder {color: #429ec5; }
textarea::-ms-input-placeholder {color: #429ec5; }

• input 禁止键盘输入

onmousedown="return false"

• 颜色转换(IE不兼容)

-ms-filter: hue-rotate(0deg); /* 0度则不变，维持原色，可以是任何度数，但每360度完成一次完整变化 */
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);

• 改变元素默认样式

-webkit-appearance: none; 

• display：inline-block兼容ie7

display:inline-block;
*display:block;
*zoom:1;

加上这个属性,安卓可以拍照和选择照片了,如果不加,安卓只能选择照片

• 变灰

//CSS
/*变灰*/
.gray {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray;       
}       
//js

• bootstrap-datetimepicker在火狐下报错的问题

使用bootstrap-datetimepicker这个日期插件来显示日期，但在火狐下报如下错误：
TypeError: (intermediate value).toString(...).split(...)[1] is undefined
将插件中的this.defaultTimeZone=(new Date).toString().split("(")[1].slice(0,-1);
改为this.defaultTimeZone='GMT '+(new Date()).getTimezoneOffset()/60;