绳锯木断，水滴石穿

2021年9月1日：

今天刚开学的第一个晚上，大家都跑去玩了，而我还在上晚自习！

(1):class的几种使用方法

1. 三元表达式  :class="[ isTrue?'class1':'class2' ]"   
2. 数组形式  :class="{'class1':true,'class2':false}"   类名可不加引号“ '' ” 如有连接符号可使用小驼峰命名，

注意：上述两者的括号不能调换，否则报错，vue的语法还是eslint 语法检查的问题未深入了解，个人认为两者括号调换会更符合常规思维

(2) 设置 border-radius 属性后边角被挡住的问题，

在用vant组件时需要更改元样式，用v-deep 不好解决。

参考：CSS设置border圆角却被背景颜色覆盖了，怎么解决？

https://www.cnblogs.com/sanshi/p/9712426.html

border-radius: 16px;
overflow: auto;

关于overflow属性：

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 参考:CSS overflow 属性 (w3school.com.cn)

 

2021年9月2日：

学习的快乐是坚持下去的源泉！

(1) 运行vue serve .\parentComponent.vue 命令时报错 

(上述命令运行单个 .vue文件)

 

 解决方法：

@import './../index.scss';
//改为
@import url('./../index.scss');

上述问题随不报错了，但样式失效待解决

问题原因：（）

 

(2) 使用绝对布局 position:absolute；

　　需要在父节点加上position

CSS 布局 - position 属性 (w3school.com.cn)

 

div 宽度内容变化:

.table {
    display:table;
}

 

 CSS技巧，CSS设置任何元素宽度随内容增加自动变宽 

 

伪元素连用,先伪类再伪元素

.van-collapse-item--border:first-child::after {
    border: none !important;
}

 　　

 

 

 

end