css常用布局样式记录

自适应布局

1. 动态生成，每4个元素在每行平均分布

.box{
	display: flex;
	flex-wrap: wrap;
	padding:30rpx;
}
.item{
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	width: calc((100% - 60rpx)/4);
	line-height: 60rpx;
	height: 60rpx;
	text-align: center;
	border-radius: 4rpx;
	border: 2rpx solid #D8D8D8;
	&:nth-child(4n) {
		margin-right: 0
	} 
}
//每行最后元素显示短横线
//.box .item:not(:nth-child(4n)):not(:last-child):after

或者10个元素也要一行4个的时候，可以如下：

.box{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

2.固定几行几列，每4个元素在每行平均分布

.box{
	display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(3, 150rpx);
}

3.点击元素显示底部短横线/右边短横线

.box{
 	position:relative;
}
.active-border:after {
	position: absolute;
	left: 45%;
	bottom: -16rpx;
	width: 36rpx;
	height: 6rpx;
	background: #044FA2;
	content: '';
}

4.css3底部弧形

.box{
	clip-path: ellipse(130px 140px at 50% 20%);
}

5.两行省略号

.line-clamp2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden ;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

6.水平垂直居中

.parent {
    display: grid;
    place-items: center;
  }

7.必填红色星号

.required:before {
    content: '* ';
    color: red;
}

8.单行省略

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

9.多行省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;