深度选择器（样式穿透）
在 vue 项目的开发过程，会遇到在父组件中想要修改子组件的样式，如：官网地址：Scoped CSS | Vue Loader (vuejs.org)父组件：father.vue<script> import child from "./child.vue" </script> <template> <child cla
CSS中的:和::有什么区别
首先简单介绍一下 : 和 :: ：: 指的是伪类，例如:visited或:hover:: 用于伪元素，例如::first-of-type或::after下面让我们深入研究一些示例。“伪”是什么意思？伪这个词的英文定义是“假的”或“不真实的”。那么伪类和伪元素表示什么意思呢？伪类和伪元素不手动写入HTML，也不会出现在DOM（或文档树）中，而由CSS创建！什么是伪类？伪类允许你根据页面上编写的HTM
原生Js实现轮播图
效果演示HTML代码<div class="container-slider"> <!-- Slider Container with images... --> <div class="slides"></div> <!-- Previous Button
css中grid布局
一、初识Grid布局 网格布局（Grid）是强大的CSS布局方案，它将网页划分为一个个的网格，通过任意组合这些网格来实现不同需求的布局方式。 上图这种布局，Grid可以轻松的实现（代码量少）Grid布局与Flex布局的相似处： 都是容器 + 项目，都是可以指定项目在容器内部的位置。 Grid布局与Flex布局的不同处： Flex布局是轴线布局，只能指定项目针对轴线的位置；Grid布局则是将容器分成
纯css3卡通小火车行驶动画
效果展示HTML代码<div class="center"> <div class="mountains"></div> <div class="train"> <div class="engine-front">
css渐变
background: linear-gradient(blue, red, green); /*线性渐变：background:linear-gradient() 1.支持多颜色渐变 2.支持不同方向 to left 3.支持角度的写法 90deg*/ background: radial-gradient(red, yellow, blue); /*径向渐变：background:rad
flex布局中两端对齐
justify-content: space-between;
flex布局详解
一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{display: flex;}行内元素也可以使用 Flex 布局。.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl
css中sticky定位详解
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。语法：选择器 { position: sticky; top: 10px; }sticky能够形成"动态固定"的效果。比如，百度新闻首页的导航栏，初始加载时在自己的默认位置（relative定位