进步的记录

1、::before或者::after ::before选择器在被选元素的内容前面插入内容 ::after选择器在被选元素的内容后面插入内容 以::before为例的两个小例子 //css部分 .result{ position: relative; padding-left:10px; } .result::before{ content:""; //必须得有centent，否则内容无法展示出来 position: absolute; top:0; left:0;

由于scoped属性的样式的隔离，导致无法修改第三方的样式的原因： scoped 属性会自动添加一个唯一的 属性(比如 data-v-21e5b78) 为组件内 CSS 指定 作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover， 使得样式只在这个组件生效，不会导致污染全局样式。 解决方法： 1、如果是css 使用>>> 外层>>> 需要修改的第三方，例如： .

有时候UI没有给到类似上面的三角形图，问他要又很麻烦，所以干脆自己利用css的border属性来实现，通过设置其中一个方向的border有颜色其他为透明色来实现，需要注意的是必须设置width和height为0 // css 部分 .up{ width:0; height:0; border-bottom:100px solid pink; ...

在理解BFC之前，先了解一个margin重叠（合并） margin重叠（合并）： 块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单 个外边距，这样的现象称为“margin 合并”。 发生重叠前提条件： 1、普通文档流中的块级元素（不包括行内、浮动、绝对定位元素） 2、只发生在垂直方向 //css部分 *{ margin:0; ...

CSS实现： 单行实现： // css部分 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; white-space:设置如何处理元素内的空白；值为nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。 效果如下： 多行实现： // css部分 display: -webk...

1、下划线跟随效果 // css部分 ul{ display: flex; flex-direction: row; margin:0; padding:0; } ul li{ list-style: none; color:#249DF7; padding:10px; /* 设置relative,作为伪类::after定位的参照和width的...