css 样式开发中遇到的问题

1.文本换行

汉字和英文数字字符适配
word-break: break-all;

word-wrap: break-word;

text-align: left;

2.文本换行以及出现省略号

  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis; // ...展示
  display: -webkit-box; // 弹性伸缩盒盒子模型显示
  -webkit-line-clamp: 2; // 行数
  -webkit-box-orient: vertical; // 从上到下垂直排列子元素

3.文本禁止换行，超出父元素宽度，省略号展示

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;

4.盒子加了padding，盒子会变大

盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）

加上padding后，盒子宽高会加上padding值，这里就要用到 box-sizing: border-box;

padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里

5. 文本反反方向展示

direction: rtl;
unicode-bidi: bidi-override;
text-align: right;

6. 划过文本，实现缩放

在父元素上加入 transition: all 0.5s; 滑动会更加平滑

&:hover {
      transform: scale(1.02); // 缩放比例
      box-shadow: 0px 2px 8px 4px rgba(185, 191, 197, 0.04);
    }

7. 文本垂直显示

  border: 1px solid #ccc;
  writing-mode: vertical-lr; // 垂直展示
  // letter-spacing: 2px; // 字间距
  padding: 20px;
  height: 100px;
  text-align: justify; // 两端对齐

8.实现元素上插入背景图

 .go {
      width: 36px;
      height: 36px;
      background: url('../assets/icon1.png') no-repeat;
      background-position: center;
      background-size: 100%;
      position: absolute;
      top: 50px;
      right: 10px;
      transform: translate(0, -50%); // 移动元素 x轴，y轴
    }

10.实现用前置伪元素插入样式

&::before{
display:inline-block;
width:3px;
height:14px;
background:#104FA7;
content:'';
margin-right:8px;
border-radius:3px;
}

11.用伪元素来定位

     display: block;
      content: ' ';
      position: absolute;
      top: -40rpx;
      left: 50%;
    transform: translate(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center center;


        left: -10rpx;
      width: calc(100% + 20rpx);

12.class上加多了类名 

:class="{'item_img1': index < 2, 'item_img2': index < 2}"

:style="{'color': tabCurrent===1? pageSetting.colors: '#666'}"

:class="[tabCurrent===1?'current':'','on']"

13.列表每一项底部加线，但是不能超过每一项宽度

         position: relative;

        &:first-child {
          &::before {
            display: none;
          }
        }

        &::before {
          display: block;
          position: absolute;
          top: 0rpx;
          left: 20rpx;
          width: calc(100% - 40rpx);
          height: 1rpx;
          background-color: red;
          content: '';
        }

14.图片旋转180度

transform: rotateY(180deg);

15.盒子阴影

.item {
        width: calc(100% / 3 - 40rpx);
        text-align: center;
        background: #484bfc;
        box-shadow: 3px 0 #00e4ff, -3px 0 #d33fee;
        -webkit-box-shadow: 3px 0 0 0 #00e4ff, -3px 0 0 0 #d33fee;
        border-radius: 20rpx;
        view {
          font-size: 28rpx;
        }

        .value {
          color: #fff;
          margin-top: 20rpx;
        }

        .label {
          color: #fff;
          margin-top: 10rpx;
          margin-bottom: 20rpx;
        }
      }

16.内容超出后，自动换行

white-space: normal;

width:100%; 

17.弹性盒后，高度超出，只需要加上height: calc(100% - 50px);就可以解决问题

18.盒子中有一部分是自由上下滑动

height: calc(100% - 240px);

overflow-y: auto;

19.行内动态样式

<li :style="{'padding-left':ind * 10+'px'}">{{item.name}}</li>

ind可以定义成下标，动态改变样式

20.文字颜色动态显示

<el-button :style="{ 'color': computeTextColor }" size="large" type="text" >学不会</el-button> 
computed: {
    computeTextColor () {
      if (this.testResult === '极低危') {
        return 'skyble'
      } else if (this.testResult === '低危') {
        return 'skyble'
      } else if (this.testResult === '中危') {
        return 'orange'
      } else if (this.testResult === '高危') {
        return 'red'
      }
    }
  },

行内颜色判断

:class="[status == 1?'isActive':'']"
.isActive{
Color:red;
}