随便写写

1.checkbox样式

.shopping-cart .card-header input[type='checkbox']{
    width: 1rem;
    height: 1rem;
    -webkit-appearance:none;
    backgroundr: #eeeeee;
    border: solid 1px #cccccc;
    border-radius: 50px;
    outline: none;
}
.shopping-cart .card-header input[type=checkbox]:checked{
    background: url('../image/checkbox_checked.png')no-repeat center;
    background-size: contain;
    border: none;
    -webkit-appearance: none;
}

2.空格符  &nbsp

3、div内显示一行，超出部分用省略号显示

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

4、div内显示两行或三行，超出部分用省略号显示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 

text-decoration下划线CSS单词值参数：
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线

text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式

5、字间距

text-indent设置抬头距离css缩进

letter-spacing字与字间距。

6、css图片宽度设置百分比，高度同宽度相同

这里通过 css 来达到我们想要的效果：

<div class='box'>
    <img src="...">
</div>

需要添加一个父元素来达到我们的目的。

.box {
    position: relative;
    width: 50%;
}
.box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

或者:

.box{
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}

我们在这里定义了一个伪元素并且将其 padding-top 设置为 100%，因为这里的 padding-top 是相对于元素的 width 的。

现在我们定义了一个 .box 元素，它的长和宽是相等的，现在我们只需要设置 img 的 CSS 即可:

.box img {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 7、微信小程序 页面跳转navigator与传递参数

页面之间跳转使用 navigator标签，wx.navigateTo ，wx.redirectTo

1、URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数。
navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数。

如果需要传多个参数, 用 & 链接即可

<navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>    
<navigator url="../redirect/redirect?title=我是redirect" open-type="redirect">在当前页打开</navigator> 

或者

// 跳转到新页面
wx.navigateTo({
      url: "../navigator/navigator?title=我是navigate"
})
// 在当前页打开
wx.redirectTo({ 
　　　　url: ../redirect/redirect?title=我是redirect"
})

2、在跳转的js代码可以获取到title参数

Page({   
  data:{
    title: "", 
  }, 
  onLoad: function(options) {    
    this.setData({    
      title: options.title    
    })    
  }    
}) 

 8、强制换行css

word-break: break-all;

 

9、jq点击事件

//静态元素能触发回调函数。

$('.name').click(function() { alert("name"); });

//动态创建的元素能触发回调函数。

$(document).on("click", ".name", function() { alert("name"); });

//$(document).click() 在iphone上不触发事件解决办法

$(document).on(“click touchstart”, “.name”, function() { 
alert(“name”); 
});

 

10.JS 捕获 input 中 键盘按键 的事件

    $("input").on("keydown", function (e) {
        if (e.keyCode == 13) {
            //to-do when click Enter Key
        }
    });

11.移动端长按事件

var startY,endY;

$("body").on("touchstart", touchStartRecord)
             .on("touchmove", touchMoveHide)
            .on("touchcancel touchend", touchEndShow);

function touchStartRecord(event){
        var touch = event.touches[0];
         startY = touch.pageY;
 };

function touchMoveHide(event){
        var touch = event.touches[0];
        endY = touch.pageY; 
          if (Math.abs(endY - startY) >= 5) {
            //此处省略隐藏按钮的操作
         }
 };

function touchEndShow(event){
          //此处省略重新展现按钮的操作
 };

　10.使用css禁用a标签的点击，跳转事件

　　pointer-events: none;

11.input placeholder 样式修改

.form-control::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(255, 255, 255, .5) !important;
opacity: 1;
}

.form-control:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, .5) !important;
opacity: 1;
}

.form-control::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, .5) !important;
opacity: 1;
}

.form-control:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba(255, 255, 255, .5) !important;
opacity: 1;
}

.form-control::-ms-input-placeholder {
/* Microsoft Edge */
color: rgba(255, 255, 255, .5) !important;
opacity: 1;
}

　　12.修改svg 颜色

fill：currentColor
color:#dddddd