小程序上的知识点记录

1. text标签的单行溢出限制:

一定要设定宽度，才会有效果; 当一行文字超过了限定范围，就会出现换行等现象，这就叫文本溢出;  
超出会引用 ... 
      wxss文件设置text属性: 
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;

2. text多行溢出(限制2行显示等 限制多行显示)

     wxss文件设置text属性: 
          display: -webkit-box !important;
          -webkit-line-clamp:2;  // 限制显示2行
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          word-break: break-all;
          -webkit-box-orient: vertical;

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 

3. 清除button标签的默认属性:

      .button::after {
          content: '';
          border: none;
          border-radius: 0;
      }

4. CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中: {text-align:center} /*DIV内的行内元素均会水平居中*/ 

CSS设置行内元素的垂直居中: div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ 

CSS行内元素既要水平居中又要垂直居中 :div{text-align:center; height:30px; line-height:30px} 

CSS设置块级元素的水平居中: div{margin:0 auto;}

CSS 用 position: absolute 与 transform 来居中块级元素:  
  {/* 利用绝对定位设置的左上角重叠于父容器标签的中心点 子绝父相 父元素需要设置 position: relative;*/
    position: absolute;
    top: 50%;
    left: 50%;
    /* 平移 会以自身为参考, (-50%, -50%)向水平x左移, 垂直y上移  */
    transform: translate(-50%, -50%);
  }

5. 元素水平垂直居中

• 水平居中

  1. 行内元素
     只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

     .parent {
         text-align: center;
     }
     

  2. 块状元素

     .item {
         /* 这里可以设置顶端外边距 */
         margin: 10px auto;
     }  
     

  3. 多个块状元素
     将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:

     .parent {
         text-align:center;
     }
     

  • 垂直居中

  1. 单行的行内元素

     .parent {
        background: #222;
        height: 200px;
     }
     /* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
     .a {
        height: 200px;
        line-height:200px;
        color: #FFF;
     }
     

  2. 多行的行内元素
     组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

     .parent {
        background: #222;
        width: 300px;
        height: 300px;
        /* 以下属性垂直居中 */
        display: table-cell;
        vertical-align: middle;
     }
     

  3. 定宽高水平垂直居中

      .item {
         position:absolute;
         width:200px;
         height:200px;
         top: 50%;
         left:50%;
         margin-top: -100px;  /* margin-top值为自身高度的一半 */
         margin-left: -100px;
         padding:0;
     }
     如果这里margin-left使用百分比的话，它的值是父元素宽度*百分比(200 * 0.5)
     

  4. 未知高度和宽度元素
     使用css3的transform来实现

      .item {
         /* 利用绝对定位设置 item的左上角重叠于父容器标签的中心点 子绝父相(父类需设置position: relative;) */
         position: absolute;
         top: 50%;
         left: 50%;
         /* 使用css3的transform来实现, 平移item 会以item自身为参考, (-50%, -50%)向水平x左移, 垂直y上移 */
         transform: translate(-50%, -50%);  
     }
     

  5. 使用flex布局实现

     .parent {
        display: flex;
        justify-content:center;
        align-items: center;
        /* 注意这里需要设置高度来查看垂直居中效果 */
        background: #AAA;
        height: 300px;
     }