1.文字不居中,给一个容器,文本行高 line-height和当前容器或者元素相同高度 文字就会剧中
2.布局小技巧,用父级容器去挤子集容器(块级元素),然后从左往右挤元素(或者从一方向往另一个方向挤)
3.中间有缝隙的div 尽量用 红色框去挤里橙色框,不用magrin固定值去分离 这样分辨力切换,不会换行缩放还是一行三个
问题三的错误效果
4.前端 span 变成行内块元素,例如两个span 后边的span比前边的span 行高高出很多,第一个 span 是标题,需要在上边显示,如下如:
解决办法,把注释打开,就是flex布局的,用某一基线对齐排布
.serveArchivesListItemInfo3 {
margin-bottom: 12px;
font-size: 14px;
color: #555555;
// display: flex;
// align-items:flex-start;
> span:nth-child(1) {
display: inline-block;
width: 48px;
}
> span:nth-child(2) {
display: inline-block;
width: 88%;
}
}
5.vue 视频插件工具
6.vue地图插件
vue-amap
7.其他页面的css样式,影响到了当前页面
1.在style标签中写scoped
2.在style不用写scoped,但是最外层的div的class或者id必须是整个项目来看都是唯一的
注:页面不能进行滚动,屏幕下方还有部分页面未展示,当前遇见的问题某个div容器给了高度(获取其他页面的相同class给了高度)导致无法显示屏幕外的页面并且无法滚动
8.重点!重点!重点!vue 定义的form{} 页面上的 input 输入框为name form 里并未直接定义name
js操作 进行 form.name 赋值,input框里也显示了,但是input框无法操作,无法输入,无法删除,修改了form定义 form{ name:"" },之后 input框就可以修改了,为啥不知道,下班了,
9.前台vue 表单编辑回显后,表单数据修改没有反应
点击编辑按钮后,实现数据回显方法
这里是解决问题的关键!!!
处理方法:将表单中的值先转化为字符串,然后转化为json对象
JSON.stringify():将值转换为 JSON 字符串。
JSON.parse() :将一个 JSON 字符串转换为对象。
editCustomer(index, row, tableData) { this.ruleForm.updateData = JSON.parse(JSON.stringify(this.ruleForm)); }
当一个页面class 多个页面使用
scoped :(1)当前页面起作用、其他页面
(2) 我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>, 这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影 响到子组件的样式。
/deep/ :当你想在父组件修改子组件的样式,就需要使用/deep/
!important :css起作用的做高级别,当其他地方也给了高度,就不起作用了
<style lang="scss" scoped>
/deep/.el-input__inner{
min-height: 44px!important;
}
</style>
使用vite
需要添加样式
npm install vite
npm i less -d --registry=https://registry.npm.taobao.org
等对前端有新的理解在更新