小程序笔记

1.<text>七 /n 月</text>

    只有被text标签包含的文字在手机端才能长按选中。/n会解析成换行

2.以iphone6为基本进行图片设置

3.在页面上的Style 样式，用动态样式（根据传参方便修改）

 

1. Pt  我们实际上看到的，长度单位，，视觉单位。屏幕大小（简单理解）
2. Px 像素单位 ，有多少个点组成
3. 水平建议使用rpx。垂直可以使用px。  （水平可能导致换行）
4. Alt+shift+f  格式化代码样式
5. Catchtap会阻止事件冒泡，，，bindtap不会
6. 页面间传递数据的方式：url传递，数据缓存，全局变量。3种变量（angular js发射事什，接收事件的方式？）
7. 框架调用我们的代码，想到监听事件
8. This.data绑定数据在onload函数中不能用，要用this.setData();
9. letter-spacing 设置 内容文字间距：
10. white-space: nowrap 规定段落中的文本不进行换行：
11. text-overflow:ellipsis;  
    overflow: hidden;

    white-space: nowrap;
    文本超出用省略号表示...
12. word-break 在恰当的断字点进行换行：
13. box-sizing:border-box; 设置padding不会超出百分比
14. wx.getSetting({        success(res) {}       

　　　　　　　　　　　　success:function(res){}

　　　　　　　　　　　　success: res => {}      )}    都是一个意思

1. box-shadow: 4px 4px 4px #ccc;   边框阴影
2. Transition：width 2s;  过渡动画
3. Trident内核：主要代表为IE浏览器  前缀-ms

              Gecko内核：主要代表为Firefox 前缀-moz

              Presto内核：主要代表为Opera (改成blink)  前缀-o

              Webkit内核：产要代表为Chrome和Safari  前缀-webkit

1. transform:rotate(7deg);  旋转
2. writing-mode：vertical-lr;垂直方向自右而左的书写方式。
3. Left:50%;top:50%;transform: translate(-50%, 0);  定位居中
4. Bottom:50%; transform:translateY(50%); 定位垂直居中
5. box-shadow： 0px 0px 5px 5px #f6f6f6; 边框阴影
6. width：100%;  height:0;  padding-top:100%;   生成一个宽高相等的容器

7. background-color: transparent;  

   背景色透明
8. calc(25% - 20px);  每一张图片的宽度都被设置为它的父元素宽度的25% 减去20px。

1.动画

@keyframes logo {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    75% {
        /*transform: scale(1,1.5);*/
        /*box-shadow: 0px 0px 20px #87d1d4;*/
    }
    100% {
        transform: scale(1,1);
        box-shadow: none;
    }
}
animation: logo 3s linear 0s 1 normal forwards;

1.

2.

3.

1. 文本显示两行，且第二行结尾处超出部分以省略号显示

word-break:break-all;
text-overflow:ellipsis;//显示为省略号
display:-webkit-box;//对象作为伸缩盒子模型显示
-webkit-box-orient:vertical;//设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp:2;//显示行数## 标题文字 ##
overflow:hidden;