CSS3

``` img { /* 更换src属性值 */ content: url('新的图片链接'); } ```

hover定义 hover用法 1、父元素控制子元素 格式： 示例： 2、控制自身样式 3、控制同级元素样式 hover问题 1、active，visited，hover，link之间的生效顺序的关系

``` 您想要咨询的问题？ 您对所咨询问题的描述： ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cbf54b

场景： 想在CSS中使用JS变量 解决方案： CSS变量 示例： 以在 vue 项目为例： 在行内的 style 属性中定义 CSS 变量 赋值为 JS 变量 在 CSS 中使用行内定义好的 CSS

:hover 选择器 选择鼠标指针浮动在其上的元素，并设置其样式。   问题 如下写法，hover没有效果： 原因 解决 scss中使用hover

对table设置css样式边框，分为几种情况： 1、只对table设置边框 2、对td设置边框 为了便于观察，均设置所有案例表格为1px实线红色边框为例；table宽度为400px;表格为三列三行，对

如果希望某个样式不作用到选择器上，可以使用:not(选择器） 如： 这样写效果如下： 如果希望input[type=“text”]的样式不作用到第三个input上，可以这样写： 则效果如图所示：

说明： 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为

两者均以保持图像宽高比的形式缩放来适合背景容器的大小 区别: 在no-repeat的情况下 cover:图片宽高比不变,铺满整个容器的宽高,图片多出来的部分会裁掉 contain:图片宽高比不变 ,缩

各种常用的边框特效【流动边框】第一种： 第二种 第三种 第四种 第五种 第六种各种常用的边框特效【流动边框】各种常用的边框特效【流动边框】

div中文字自动换行div中文字自动换行div中文字自动换行div中文字自动换行div中文字自动换行

flexbox布局方式 实现原理：首先定义三个区块，分别为左中右，并且统一设置高度为200px，然后在这三个区块的父元素中设置display:flex，设置左边栏和右边栏宽度为200px,中间区块设置

一行的时候设置为1；多行的时候设置为百分比； 举例： 第一种情况，有5个元素，要排成一行，各自占比相同，此时父元素设置为display:flex,子元素设置为flex:1即可； 第二种情况，有10个元

```                                                            左边自适应          flex布局-中间固定宽度部分       

背景图片 背景平铺 背景方位 背景方位应用一（修饰性图片） 背景方位应用二（超大图片） 精确单位 混合单位 背景固定 背景属性复合写法：

flex布局常用样式封装。flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

多套CSS 1. 1200px 或以上被视为笔记本电脑和台式机尺寸。 2. 768px 到 1024px 被认为是平板尺寸。 3. 767px 或以下被视为移动设备尺寸。 PC端          

媒体查询+rem实现元素动态变化媒体查询+rem实现元素动态变化媒体查询+rem实现元素动态变化媒体查询+rem实现元素动态变化

效果图 关键点： 通过仓库中的fold属性来控制图标（展开/收缩）的变换，以及各部分宽度的变换 左边菜单栏部分 右边部分，包括面包屑导航栏和main展示区域 useLayOutSettingStore

通过安装插件： reset-css 初始化浏览器css样式 在终端通过以下命令安装reset-css插件： 安装好后可以在 package.json 中看到安装好的版本： 最后在入口文件（main.j