记录一下在开发过程中遇到的css样式问题 #自适应

让td根据文本的长度自适应宽度

.text{
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

父元素不设置宽高，子元素是img，父元素设置border-radius，子元素边框不改变，

父元素设置overflow: hidden;注：父元素不设置padding

富文本内给某个元素设置样式

        方法1：提前知道了要设置标签的calss或id，直接样式穿透;样式穿透的方法很多

.pa 富文本父元素类名
.chil 富文本内要设置的标签类名
.pa >>> .chil{
    width:100px;
    height:100px;
}

        方法2：给富文本的父元素一个类名，然后在<style></style>内;注：这个单独的style要去掉scoped否则无效

.diff .chil{
    width:100px;
    height:100px;
}

或
.diff .p,img......{
    width:100px;
    height:100px;
}

通过transform：translate/translateY/translateX 可以控制元素的移动。

一行固定个数，超出换行，然后从左侧排列

//父元素
.f{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
}
//子元素
.c{
    width: 17%; // 子元素的宽度，依据需求
	margin-right: 10.6%;
}
// 消除每行最后一个元素的margin-right
.c:nth-of-type(4n + 0) {
	margin-right: 0;
}

文本超出指定行数隐藏省略

span{
     text-align: left;
     word-break: break-all;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;//行数
     overflow: hidden;
}

让每个文本像元素一样能够间隔相同距离

                          &-tit{
							font-size: 27rpx;
							font-weight: 400;
							color: #999999;
							width: 115rpx;
							padding-right: 10px;
							margin-right: 10px;
							position: relative;
							text-align-last: justify;
							/*ie文本两端对齐*/
							text-align: justify;
							text-justify: inter-ideograph;
						}
						&-tit::after {
							content: ':';
							display: block;
							position: absolute;
							top: 0;
							right: 0;
						}

介绍felx布局中的是哪个知识点。felx-basis、flex-grow、flex-shrink；这三个属性都是用在felx子项；

felx-basis：在felx布局中使用，主要用于元素的宽度，felx-basis的优先级比width高，也就是说felx-basis会代替width。

felx-grow：在felx布局中使用，父元素宽度大于子元素宽度并且有剩余空间时，在子项上使用会索取剩余空间，为0为不索取，值越高表示索取的越多。

        从下面代码中可以看到子项的felx-grow都为1，那么两项能分配到的空间都是原宽度加50px；

公式为：

grow_width = (par-width - (box1_width + box2_width + ...) / (box1_felx-grow + box2_flex-geow + ...)

子项的最终宽度为：当前子项宽度+boxn_felx-grow * grow_width

      .par {
        display: flex;
        width: 500px;
        height: 200px;
        border: 1px solid black;
      }
      .box1 {
        background-color: orange;
        width: 100px;
        flex-grow: 1;
      }
      .box2 {
        width: 300px;
        background-color: red;
        flex-grow: 1;
      }

flex-shrink：在flex布局中使用，子元素总宽度大于父元素时使用，会使该子项将宽度进行缩小，为0不缩小，值越大缩小的越多。

        flex-shrink的计算方法和flex-grow有点不一样从下面代码中可以看到子元素的总宽度为300px + 200px + 300px；也就是比父元素多出了300px。那么我们先计算它的(flex-shrink)权重：200px * 1 + 300px * 2 = 800px; 
 

        box2权重：200 * 1 / 800px = 0.25

        box3权重：300 * 2 / 800px = 0.75

        下面加粗的300px是子元素比父元素多出的那300px。

        box2最终宽度：200px - 300px * 0.25 = 125px

        box3最终宽度：300px - 300px * 0.75 = 75px

.par {
        width: 500px;
        height: 300px;
        background-color: rgb(24, 27, 40);
        display: flex;
      }
      .child{
        height: 200px;
      }
      .box1 {
        background-color: aqua;
        flex-shrink: 0;
        width: 300px;
      }
      .box2 {
        background-color: brown;
        flex-shrink: 1;
        width: 200px;
      }
      .box3 {
        background-color: rgb(13, 51, 241);
        flex-shrink: 2;
        width: 300px;

      }