【CSS】样式记录

随记

1. html显示空格和\n无效 以及 文本溢出隐藏，以… … 表示
   需求：备注和正文输入框，发的啥格式就得收到啥格式的
   效果：
   数据：调用接口，后端传回来的格式为：
   解决：

<van-row>
  <van-col>拒收原因：</van-col>
  <van-col class="contentStyle ellipsis">
     {{ xxx.reason }}
  </van-col>
</van-row>
// 1. 让空格以及\n在前端页面显示
.cellStyle{
   white-space: pre;  // 文字展示
   white-space: pre-wrap; //文本换行
}
// 2. 文本溢出隐藏
.ellipsis{
   overflow: hidden;  // 超出隐藏
   text-overflow: ellipsis; // ...
   white-space: nowrap; // 不换行
}

        扩展：利用vue的指令 v-html 结合 slot 可以使用（未试验）

2. 除了 … … 之外的元素

.类名:not(:first-child) {
    padding-top: 10px;
    vertical-align: middle;
 }

        扩展：CSS3选择器 :nth-child，父元素下的子元素：

① 标签/.类名:nth-child(2n){ 选取偶数标签 }
② 标签/.类名:last-child{ 选取最后一个标签}
③ 标签/.类名:nth-child(n) {父元素的第 N 个子元素 }

3. 让图片和文字居中

<div>
  <img src=""></img>
  <span>文字</span>
</div>
img,span{
  cursor: pointer; // 小手
}

4. 文字加粗：font-weight:700;
5. 垂直居中：display:flex; align-items:center;
6. 设置按钮/盒子的弧度：border-radius:16px;

        1个值：4角相等

        2个值：左上右下 右上左下

        3个值：左上 右上左下 右下

        4个值左上 右上 右下 左下（顺时针）

7. 深度选择器 deep

        改变原有组件的样式：

           组件标签 /deep/ 要修改的地方{ }

8. 旋转XX度

        旋转90度 transform:rotate(90deg)