【CSS】样式记录

如果你不相信努力和时光,那么成果就会是第一个选择辜负你的。不要去否定你自己的过去,也不要用你的过去牵扯你现在的努力和对未来的展望。不是因为拥有希望你才去努力,而是去努力了,你才有可能看到希望的光芒。【CSS】样式记录,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

随记

  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 可以使用(未试验)

  1. 除了 … … 之外的元素
.类名:not(:first-child) {
    padding-top: 10px;
    vertical-align: middle;
 }

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

① 标签/.类名:nth-child(2n){ 选取偶数标签 }
② 标签/.类名:last-child{ 选取最后一个标签}
③ 标签/.类名:nth-child(n) {父元素的第 N 个子元素 }
  1. 让图片和文字居中
<div>
  <img src=""></img>
  <span>文字</span>
</div>
img,span{
  cursor: pointer; // 小手
}
  1. 文字加粗:font-weight:700;
  2. 垂直居中:display:flex; align-items:center;
  3. 设置按钮/盒子的弧度:border-radius:16px;

        1个值:4角相等

        2个值:左上右下 右上左下

        3个值:左上 右上左下 右下

        4个值左上 右上 右下 左下(顺时针)

  1. 深度选择器 deep

        改变原有组件的样式:

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

  1. 旋转XX度

        旋转90度 transform:rotate(90deg)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/195009.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!