前端css常用笔记

文章目录


一、样式

  • 1 文字与图标对不齐的解决方法

    css 复制代码
    /**给icon加上这个样式即可*/
    vertical-align: -10%;
  • 2 让内部元素垂直水平居中
    在父级div加上这个样式

    css 复制代码
    .main{
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center; /**水平居中*/
      align-items: center; /**垂直居中*/
    }
  • 3 禁止换行样式

    • (1) 一行不换行并显示省略号
    css 复制代码
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    • (2)自定义自能显示多少行,溢出使用省略号
    css 复制代码
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /*行数*
  • 4 小程序使图片images设置大小不变形mode='aspectFit(固定宽高)'mode='widthFix'(固定宽度并不变形)

    html 复制代码
    <!-- 固定宽高 -->
    <image src="images/wqs.png"  mode='aspectFit' style="width: 100%;"></image>
    
    <!-- 固定宽度 -->
    <image src="images/wqs.png"  mode='widthFix' style="width: 100%;"></image>
  • 5 元素让内部元素一行显示在要在一行显示的元素加上display: inline-block;样式即可

    html 复制代码
    <!--父级元素-->
    <div>
      <!--子级元素-->
      <div style="display: inline-block;"></div>
      <div style="display: inline-block;"></div>
    </div>
  • 6 img加上让固定宽高图片变形的样式object-fit: cover;

    html 复制代码
    <img class="avatar" src="20210914/07c92ea514be4610930c4da404ee6adb.jpg" style="object-fit: cover;">
  • css使img图片不变形

    css 复制代码
    object-fit: cover;
  • 6 去掉原始input样式

css 复制代码
/* 去掉默认样式 */
input{
  border: none;
  outline: none;
}

/* 去掉取到光标时默认的样式 */
input:focus{
  border: none;
  outline: none;
}
  • 8 原始的单选或者多选时点击文字选择选框
html 复制代码
<!-- 单选框 -->
<label class="choice_label">
    <input type="radio" name="sex" value="男生"> <span>男生</span>
</label>

<!-- 复选框 -->
<label class="choice_label">
    <input type="checkbox" name="vehicle" value="我已知晓"><span>我已知晓</span>
</label>
  • 9 让内容垂直横向居中
css 复制代码
/**父级模块*/
.main{
  width: 100%;
  height: 100vh;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
/**子模块*/
.center{
  width: 500px;
  height: 500px;
  background-color: aqua;
}

二、vue笔记

2.1、组件之间的通信

2.1.1 子组件调用父组件的方法

  • 案例
js 复制代码
// 子组件
export default {
  inject: ['fatherFunction'],
  methods:{
      // 
      testfunc(){
		this.fatherFunction()
      }
  }
}
js 复制代码
// 父组件
export default {
  inject: ['fatherFunction'],
  methods:{
  },
  provide () {
    return {
      fatherFunction: (item) =>{
        console.log('调用了父组件')
      }
    }
  },
}

2.1.2 父组件调用子组件的方法

  • 案例
html 复制代码
<headerChild ref="headerChild"></headerChild>
js 复制代码
this.$refs.headerChild.属性
this.$refs.headerChild.方法

2.1.3 孙组件调用祖父组件方法的实现

  • 在孙组件中使用inject: ['fatherMethod']
  • 在祖父组件中的provide里调方法
  • 例子:
html 复制代码
<!--祖父组件-->
<template>
  <div>
  	祖父组件    
  </div>
</template>
<script>
import ServiceAreaComm from '@/components/serviceAreaComm.vue'
export default {
  name: 'AppraiseVisu',
  components: { ServiceAreaComm },
  data () {
    return {}
  },
  provide () {
    return {
      fatherMethod: (item) => this.areaParentFunc(item)
    }
  },
  mounted () {
  },
  methods: {
    // 祖父级方法
    areaParentFunc (id) {
      console.log('调用到了祖父级的方法areaParentFunc--->' + id)
    }
  }
}
</script>
html 复制代码
<!-- 孙组件 -->
<template>
  <div>
  	<button type="button" @click="fatherMethod">调用方法</button>    
  </div>
</template>
<script>
export default {
  name: 'AreaMenuItem',
  props: {},
  data () {
    return {
    }
  },
  inject: ['fatherMethod'],
  methods: {
  }
}
</script>

2.2、使用若依时,node_nodules越来越大的问题

原因:若依内部加入的打包的问题

解决方法:将compression-webpack-plugin 插件注释掉即可

所在位置:vue.config.js中,

js 复制代码
const CompressionPlugin = require('compression-webpack-plugin')

2.3、echart笔记

  • 1 echarts随着窗口缩放自适应
js 复制代码
option && this.myChart.setOption(option); // 创建好图形
window.onresize = this.myChart.resize; // 使图标自适应窗口
  • 2 销毁图形
js 复制代码
myChart.dispose()
  • 3 创建图形与刷新图形的区别
js 复制代码
myChart.setOption(option, true) // 刷新数据(刷新数据时不需要销毁图形)
myChart.setOption(option) // 创建数据
相关推荐
万少20 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL25 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
future141235 分钟前
每日问题总结
经验分享·笔记
rzl0241 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang42 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css