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;
        }
      }