【css 一些小问题】规范使用占坑，持续更新

最新推荐文章于 2024-08-21 19:57:06 发布

StrongerIrene

最新推荐文章于 2024-08-21 19:57:06 发布

阅读量507

点赞数

分类专栏： # 前端 2020

本文链接：https://blog.csdn.net/StrongerIrene/article/details/103506395

版权

前端 2020 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

要有输入输出，前端这么零散不然不知道的太多了，不然就是在混日子啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

## 主管谈话

vw多用 vh不要怎么用 vw只是来替代100% 这个的

px vw 不要一起用不然会有一些问题 px不是.... 就不行了要一用到底

h1 p 这些有一些默认的样式在的没有清理掉有时候它是什么rem em的就会又有问题 (要清理一下默认的!! 我说为什么会有问题... 垃圾代码qwq)

居中这种的不要用px来确定啊啊啊啊

rem的话那么font-size可以用奇奇怪怪其他的不要用奇奇怪怪就是了

## element-ui

1、修改el-form 里面的标签字体大小无效

可能原因：
1 css的优先级不够，被覆盖了，你需要增加足够多选择器的嵌套（或者使用important），确保css的优先级大于element ui的css
2 vue 组件中使用了<style scoped></style> scoped 属性会限制该组件的style的作用域，无法作用于其他组件

这样就可了

<style rel="stylesheet/scss" lang="scss">
.firm-attest {
  .firm-info {
    .el-form-item__label {
      font-size: 14px;
    }
  }
}
</style>

3 组件里又个tooltip 好棒qwq 就是吧。。。 color和设计图不符我qwq 总是要自己定义接口又留的不好就只能qwq

## 报错信息网上搜不到?

首先看看是不是自己的 data数据放错了。

这边 https://element.eleme.cn/#/zh-CN/component/steps 的demo比之前那个网址好。

============================================
css修养
css真是越写越少越好呜呜呜无误
今天改了组长的发现还是真的写个background cover一下真好啊
那种自己用px 这个那个这个那个的很坏
如果不知道怎么做就直接搜索布局方案自己乱搞真的害人害己不仅是面向浏览器效果实时显示编程而且换个设备真的适配起来乱七八糟.

## icon
果然设置background 然后设置color 这个color就是icon的color了 qwq 呜呜呜

## select 和菜单 drop down 不同恍恍惚惚
还是先参考参考人家适合广泛的基础单选

## 自定义 tooltip

- 要学会搜索... 这样搜
> element-ui 的 el-tooltip 的箭头怎么 css 修改颜色
- 成品大概这样
https://blog.csdn.net/SundayAaron/article/details/81510193
(我是说搜索到的成品.... )
这个还是可以用的。注意样式还是分开写写吧，因为scss不太会，

【放一个codepen真的有用】
【可能很多时候是你自己写错了自己看不出来0.0】

但是还有问题就是很多时候会有延迟
这样对不知道删除了哪个属性才生效的我感觉非常gg
啊好像没问题... 因为少加了一个 !important 这个是什么用呢
【除了ie不能识别之外它也是…… 把优先级提升到最高它就是具有最高优先级的一个东西了】
qwq 这样我发现好像直接就可以用了…… 只要加！important 就可以更改（知道类名是哪个就好）

===========================================
为什么又没用！！！！！
发现原来是right没改掉！！！！！！！
这也太笨了吧我还奇怪为什么复制过来可以自己用就不行了傻傻傻
所以说还是要自己有脑子呜呜呜
而且要两个right都要改 border-.... color
===========================================
然后继续没用!!!
我已经蠢到只能在 https://codepen.io/sundayweb/pen/bjmmew/ 复制好了拿过来了
呜呜呜发现不能用effect(官方提供的主题) 否则箭头没用你再想想都自定义了还要官方的干嘛写了也没用
好的大致就是这样还是直接看人家的代码吧可以跑而且可以直接跑 codepen真是个好东西
==========================================#### 方法
添加自定义类名

  <link rel="stylesheet" href="http://unpkg.com/element-ui@2.4.5/lib/theme-chalk/index.css">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script src="http://unpkg.com/element-ui@2.4.5/lib/index.js"></script>

  <div id="app">
    <el-tooltip content="Top center" placement="bottom" popper-class="test">
      <el-button>Dark</el-button>
    </el-tooltip>
  </div>

  <style>
    .el-tooltip__popper[x-placement^=bottom] .popper__arrow{
      border-bottom-color: #1ab394;
    }
    .el-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
      border-bottom-color: #1ab394;
    }
    .test{
      background: #1ab394 !important;
    }
  </style>
<script>
  new Vue().$mount('#app')
</script>

### svg不生效

<i>有效图片有效就一个绑定的事件

svg不行哭了占坑留着

<el-form-item prop="password">
          <el-input type="password" v-if="passwd_visible" v-model="loginForm.password" placeholder="请输入密码">
           <!-- 无效
            <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
               class="el-input__icon el-icon-view"></i>
          -->
           <img src="./iconimg.png" 
           slot="suffix" title="显示密码" @click="changePass('show')" 
            style="cursor:pointer;"
           />
           <!-- 有效
            <svg-icon icon-class="psw_hide" class="el-input__icon el-icon-view"
            slot="suffix" title="显示密码" @click="changePass('show')" 
            style="cursor:pointer;"
            ></svg-icon>
            -->
          </el-input>
</el...

========================

下面可用

   <el-input type="password" v-if="passwd_visible2"  v-model="a.newpassword"  placeholder="请设置新密码（6-16个字符）">
             <img src="./password_hide.png" 
           slot="suffix" title="显示密码" @click="changePass('show2')" 
            style=" cursor:pointer; width:15px; margin-right:10px;" 
           />
           </el-input>
            <el-input type="text" v-if="!passwd_visible2" v-model="a.newpassword"  placeholder="请设置新密码（6-16个字符）">
            <img src="./password_show.png" 
           slot="suffix" title="显示密码" @click="changePass('hide2')" 
            style="cursor:pointer; width:15px; margin-right:10px;" />
          </el-input>
        </el-form-item>