云起css笔记

• 限制text长度，省略号（设置宽度）
  

.nowrap1{
	overflow: hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.nowrap2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

• class不生效的情况（优先级的原因）

text:nth-child(2).discount {
   color:rgba(255,87,87,1);
}

• 不规则圆角

-webkit-border-radius: 0 0 100% 100% / 0 0 10% 10%;
border-radius: 0 0 100% 100% / 0 0 10% 10%;

• 两个行内元素在一个容器内垂直排版（父元素设置）

flex-direction:column;

• 弹性布局，最后一个元素居右
  

flex
margin-left：auto;

• 弹性布局，最后一个元素居右（设置倒数第二个元素flex:1,占满剩余空间）
• 居中

position: absolute;
bottom: 80upx;
left: 0;
right: 0;
margin: auto;

• div的高度与span高度不同 （div设置font-size为0）
  
• 段落缩进两个字

text-indent: 2em;

• 评论数量

.tips {
            position: absolute;
            top: -38upx;
            left: 85upx;
            border:2upx solid rgba(255,87,87,1);
            color:rgba(255,87,87,1);
            font-size:22upx;
            padding: 7upx 11upx;
            border-radius: 100upx;
            background: #fff;
          }

• 块下面划线

  .header{    position: relative;    padding: 33upx 0 23upx 30upx;    // height: 85upx;    font-size:30upx;    font-weight:bold;    color:rgba(51,51,51,1);    line-height: 1;  }  .header::after{    position: absolute;    content: '';    left: 30upx;    right: 0;    bottom: 0;    height:1upx;    background:rgba(239,239,239,1);   }