「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

一、fixed超出窗口大小部分无法滚动

问题：

使用fixed固定一个div，当这个div高度大于窗口高度后，超出的内容无法滚动查看。

解决办法：

在设置fixed的div添加样式 height:100%;overflow:auto; 即可。

据说还可以设置样式 max-height:100%;overflow:auto; 即可。

具体还是根据情况设置当前div的宽度，若当前div宽度是个固定值不想设置成百分数，则：

可以在外层包裹一个div设置为position:fixed;height:100%;overflow:auto;当前div就不需要在fixed，正常设置高宽等即可。

二、刷新或者加载出现变量闪烁再显示值的问题

<div id="app" v-cloak></div>
<style>
[v-cloak] {
  display: none !important;
}
</style>

v-cloak：用于解决初始化慢导致页面闪动的问题

三、动画变换效果

问题1：transition有时有效有时无效

.submit:hover {
  color: #E0ECFF;
  transition: 2s all; // 有用！！
}
.submit:active {
  top: 30px;
  /* transition: 2s all; 没点用 */
}

结果：因为top变换没有初始值！！！

思考过程：

hover和active互换没影响、transition:格式更改没变化、color和top互换发现问题top没用。是不是float的原因呢？但是已经是相对定位了应该没有关系。

所以对比两者差距，答案只有一个，top没有给初始值啊！晕。

建议规范的正确写法如下：

.submit {
  color: #ACE2F5;
  top: 0;
}
.submit:hover {
  color: #E0ECFF;
  transition: color 2s;
}
.submit:active {
  top: 30px;
  transition: top .2s;
}

问题2：animation过渡无效

.float-quit-show {
  animation: quitshow 1s forwards; /* 改变过度动画效果 */
}
@keyframes quitshow {
  0% {
    top: 0px;
    opacity: 0;
  }
  100% {
    bottom: 0px;
    opacity: 1;
  }
}

以上代码段，过度动画设置失败，因为从top到bottom是没有过度效果的！

改成如下，才有从上往下飞的效果：

@keyframes quitshow {
  0% {
    bottom: 50%;
    opacity: 0;
  }
  100% {
    bottom: 0px;
    opacity: 1;
  }
}

对于简单的项目很实用，但是在工程化的项目中，项目的HTML文件只有一个空的div元素，剩余内容都是用路由挂在不同组件完成的，所以不需要v-cloak。

四、边界叠加的问题

有时候去掉border:1px solid transparent;div会移动因为边界叠加的问题

还有一种情况设置font-size: 0px;

五、overflow失效

所有的overflow失效，尤其是overflow-x失效，是因为当前层的宽度未设置。

六、容易混淆的样式选择器

.class1 .class2 {
    class1的子元素、孙子元素含有class2的
}
.class1.class2 {
    同时有class1 class2的元素节点
}
.class1 > .class2 {
    class1的子元素含有class2的
}

七、div的层叠关系注意点

1、默认后面的div会覆盖在前面的div上
2、如果1不是那么会事，有可能是div的position不对，父设置为绝对位置，子设置为相对位置，好像不要设置为静态都可以。
3、通过z-index调整，数字越大优先级越高，越在上层

八、内层div位于外层div盒子中心

display: flex;
align-items: center;

九、margin-top设置成百分比之和父级容器宽度有关

margin-top 设置成百分比的时候，只跟父容器【宽度】有关！！！宽度！！！

margin-top和margin-left.jpg

十、scss嵌套样式有时候不生效有时候生效的问题

有如下div

<div class="father">
  <el-card>
    <div class="child">
    </div>
  </el-card>
</div>

直接在style中设置样式如下，有效：

<style lang="scss" scoped>
.father {
  border: 1px solid red;

  .child {
    border: 1px solid red;
  }
}
</style>

但是在.scss文件中设置样式如下，无效：

test.scss
.father {
  border: 1px solid red;

  .child {
    border: 1px solid red;
  }
}

一开始怀疑是el-card的影响，但是去掉也一样；
又怀疑是不是被覆盖了，导致.child的div没有红色边框，但是搜了下并没有；

结果是因为：test.scss我不是直接引入的，是在index.css中引入的！！！

index.css文件：

@import url("./test.scss");

这就有问题了，css引入scss导致层级样式渲染有问题，这就说得通了。

于是将index.css文件改为index.scss，果然可以了！！！

结论：

css引入scss会出现层级样式失效的问题，需要scss引入css\scss。

十一、CSS实现四角边框样式

效果图如下：

之前尝试过很多种解决方法，包括写四个div等，现在找到一个最简洁的方法。

代码如下：

.display-dialog {
  width: 800px;
  // height: 710px;
  background-color: transparent !important;
  background: linear-gradient(#fff, #fff) left top,
    linear-gradient(#fff, #fff) left top,
    linear-gradient(#fff, #fff) right top,
    linear-gradient(#fff, #fff) right top,
    linear-gradient(#fff, #fff) left bottom,
    linear-gradient(#fff, #fff) left bottom,
    linear-gradient(#fff, #fff) right bottom,
    linear-gradient(#fff, #fff) right bottom;
  background-repeat: no-repeat;
  border: 1px solid #1ea8ff;
  box-sizing: border-box;
  box-shadow: none;
  background-size: 2px 26px, 26px 2px;
}

参考文章： blog.csdn.net/qq_53986004…

【css】问题集锦