天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...语言扩大 /// inset 内部阴影 ---- 隐藏元素（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示...） visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置 display：none 隐藏元素本身，隐藏后的元素不占有位置 ---- 垂直方向居中： 第一种：...text-overflow: ellipsis;（规定当文本溢出时，显示省略号来代表被修剪的文本） ---- 边框圆角：border-radius 让盒子四个角变圆润 数字+px 、百分比 （从上、右、...： contain cover 溢出隐藏： auto scroll visible 元素整体透明： opacity 焦点伪类选择器： focus 表格边框合并： collapse 链接伪类选择器： link
然而，我觉得有些用例并不是所有开发人员都完全了解的。我写下这篇文章是为了阐明它们，以便它们能被更多地使用。 父子元素悬停特效 由于伪元素属于其父元素，因此存在一些不寻常的用例。...注意，我使用了currentColor作为伪元素背景色。如果你不知道这个关键字，它表示继承其父元素的color值。所以在任何时候，我想要改变链接的颜色，只改变一次是很容易的。 ?...叠加层 假设有一个带有背景图像的元素，并且设计中有一个渐变叠加层，并且混合模式设置为color，伪元素可以帮到你。 ?...对于其中之一，X应该为负数以实现所需的效果。 ? 接下来，我将向每个伪元素添加z-index：-1，以将其移到其父元素的后面。...1. after 元素 在这种情况下，标题将显示在伪元素叠加图的下方，如下所示： ? 解决方案是在卡片标题中添加z-index。 即使这是一个简单快速的解决方案，也不是正确的做法。
语法 说明 E[attribute] 用于选取带有指定属性的元素 E[attribute=value] 用于选取带有指定属性和指定值的元素 E[attribute~=value] 用于选取属性值包含指定值的元素...css中常用的伪类如下表所示： 伪类名 说明 :active 向被激活的元素添加样式 :focus 向拥有输入焦点的元素添加样式 :hover 向鼠标悬停在上方的元素添加样式 :link 向未被访问的链接添加样式...:visited 向已被访问的链接添加样式 :first-child 向元素添加样式，且该元素是它的父元素的第一个子元素 :lang 向带有指定lang属性的元素添加样式 伪元素选择器 css中常用的伪元素如下表所示...颜色取值3种如：颜色名，十六进制颜色，rgb函数。 background-image用于设置元素的背景图片，默认值为 none。...，relative相对 top 元素上外边距 right 元素右外边距 bottom 元素下外边距 left 元素的左外边距 z-index 元素的堆叠顺序 z-index用于设置目标对象的定位层序
/ #i1~p { border: 2px solid royalblue; } 3、属性选择器 /*用于选取带有指定属性的元素。...1.4 文本颜色 颜色属性被用来设置文字的颜色。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...opacity和rgba()的区别: 1. opacity改变元素\子元素的透明度效果 2. rgba()只改变背景颜色的透明度效果 六、综合示例 1、顶部导航菜单 <!
/*用于选取带有指定属性的元素。...文本颜色 颜色属性被用来设置文字的颜色。.../*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):背景图片平铺排满整个网页...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
) 这里设置一个空的伪元素设置阴影透明度为0隐藏，再通过鼠标悬停恢复它的透明度，下面是传统和伪类实现的代码对比 1>Before1>...青铜-4、伪类after实现的三角箭头 实现原理：三边设置边框，箭头指向的那个方向的border不用设置，位于箭头两边的边框颜色为透明（transparent），对边为主体边框颜色（较大的）/主体背景颜色...（较小的），因为我们要有边框颜色的三角箭头，当第一个箭头（较大的）被第二个箭头（较小的）通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了，其颜色就是较大的那个三角箭头的颜色，可调。...王者-3、CSS3 伪元素构建的文章水印背景 h1 { position: relative; margin: 0; font-weight: bold; letter-spacing...特性兼容性问题的JS库 最后 CSS的世界很美好，每个知识点都可以值得深入研究和实践，对于伪类、伪元素也有很多土味特效可以写出来，比如说图片遮罩、图片背景模糊，更多高级的鼠标经过事件特效等等，上边的10
伪类样式 选择器权重 块元素和行内元素 HTML标签主要分为块标签和行内标签两种类型，也称为块元素和行内元素 块元素 快元素会独占一行，例如：、1>、 等。...display:none --> 隐藏元素 字体图标和背景颜色 字体图标 进入阿里图标库：https://www.iconfont.cn/ span标签引入字体图标 背景颜色 background-color...: 预定义/十六进制颜色/rgb(0,0,0) 背景图 background-image: url(路径) 背景图平铺 background-repeat 可选值：repeat、no-repeat、repeat-x...)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置 如果父元素没有定位，则找父级的父级，..…. 。...: 0; left: 0; background-color: green; z-index: 1; } .two { position: fixed; top:
1个带有溢出的容器：隐藏时，隐藏栏内的内部块，当它归零时 这总共有5个div。...挑战2 - 图表持有者 图表持有人应该 用三维轴和三面（背景，底部，左） 独立于后台 适应条数及其属性（高度，宽度等） 从外面有X和Y轴标签 我们需要什么： 1个无序列表 X轴标签的每个列表项中的1个元素...当然，您可以在演示的CSS文件中找到它们。 挑战＃1 - 一个可移动的内部块的酒吧 50 让我们再次回顾一下每个元素的目的： 酒吧包装 - 隐藏。...我们使用：before伪类生成这个元素; 我们将在本教程中使用：之前和之后：伪类很多。...标记相对干净 ：nth-last-child（）和：不是用于定位特定列表项的伪类，并避免向标记中添加额外的类/ ID 线性渐变连同background-position一起部分填充背景元素 rgba（）
半透明图像、背景图像、或者border-image 元素设置了点状、虚线或半透明的边框，但没有背景（或者background-clip不是border-box时） 元素内部有小角是用伪元素生成 通过clip-path...基本background-blend-mode实现，作用：实现背景颜色与背景图片、背景图片与图片的混合 三种情况的示例代码： .wrap1{ width: 200px;...注意blur不能应用在底层背景，也不能应用在元素的背景上（这样会地元素本身应用blur模糊，会导致文本看不见），只能就用在伪元素上。...: -1; margin: -30px; } 代码说明： body与wrap伪元素都应用相同的背景图片 wrap的background-attachment设置为fixed，让背景图不要跟随滚动一起动...wrap伪元素设置为绝对定位，且z-index层级只高于背景 利用blur设定wrap伪元素的模糊尺寸 用margin负值增加宽度，父元素用overflow:hidden隐藏溢出，让模糊背景更加真实。
width: 200px; height: 200px; background: #b0f4ff; border-radius: 50%; } 效果图如下： 步骤3 利用.circle::befor伪元素...: 2; } 效果图如下： 步骤4 利用.circle::after伪元素 设置为 绝对定位（bottom: 0; ） 宽度：100% 高度：25% 背景颜色为渐变色 linear-gradient(...： 步骤5 为.circle::after伪元素添加动画 使其随时间其高度逐渐增大 只需要明确两个关键帧 初始位置：height: 25% 结束位置：height: 100% .circle::after...overflow: hidden; */ } .circle::after { /* animation: loadingRun 5s linear infinite; */ } 然后我们使用wave的两个伪元素...1 背景色：#85f7fb border-radius: 52% 25% 62% 69%/25% 38%; 重点 .wave::before { content: ''; position: absolute
起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。...z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。 transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。...权重 从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0 优先级 权重相同，写在后面的覆盖前面的 使用...何时使用padding： 需要在border内侧添加空白 空白处需要背景颜色 上下相连的两个盒子的空白，希望为两者之和。...rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度， 而 rgba() 只作用于元素的颜色或其背景色。
设置a标签链接背景颜色 的区别 visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 Example1 opcity属性 用来定义透明效果,取值范围是0-1,0是完全透明,1是完全不透明 和rgba区别 # rgba是针对背景颜色或者字体颜色单独的透明度 # opacity是针对整个标签透明度 Example1
属性选择器 /*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。...; background-color: #eee; #框里面的背景色} 伪元素选择器 （通过css来造标签，不推荐使用） first-letter 常用的给首字母设置特殊样式： #将p标签中的文本的第一个字变颜色变大小...文本颜色 颜色属性被用来设置文字的颜色。 ...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
1.2.4文本的颜色 方法1：color用于修改文本的颜色，color直接选取对应的颜色单词。...使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素的特点 display的none和visibility的hidden的区别：两者都可以隐藏元素，但是display将元素隐藏之后...，元素所占用的位置也会被其他元素占用，而visibility的hidden只隐藏了元素，元素的位置还是存在的。...主要有三种方式： 固定高度（给父标签加固定高度） 伪元素清除法（clearfix） overflow:hidden 伪元素清除法（使用较多）： .clearfix:after { content:...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
none; background-color: #eee; #框里面的背景色 } 12，伪元素选择器 #将p标签中的文本的第一个字变颜色变大小 p:first-letter { font-size...color，text—，font-，line-，cursor可以被继承的 例外： a标签不继承颜色 h标签不继承font-size，font-weight 2,选择器的优先级：继承隐藏的元素仍然占据空间，该元素虽然被隐藏了，但仍然会影响布局 display：none隐藏的某个元素不会占据空间，不会影响布局 七、font相关属性 font-style...做的回到顶部元素 5，z-index属性 z-index设置对象的层叠顺序，一般用在模态对话框上。...我们为层叠的元素设置一个z-index值，值大的会盖住值小的，如果没有设置z-index，写在后面的会压着前面的 z-index：值 值为正整数就行 只有定位的元素才有z-index 从父现象：父级的
伪类选择器可分为三类 1)).锚伪类，用于检测鼠标的悬停状态。...背景可以设置很多，比如背景颜色，背景图片，背景定位，背景重复，背景关联， 1)).背景颜色 2)).背景图片 的字符串来代表被修剪的文本 13)).文本轮廓 1px 1px red'> 14)).文本换行 元素的堆叠顺序 div{ z-index:1 } p{ z-index:10 } a{ z-index:-1 } z-index 值越大，所在的元素越靠前显示 14).清除Clear 专门用来清除浮动...block 元素将显示为块级元素，此元素前后会带有换行符。 inline 元素将被显示为内联元素，元素前后没有换行符。
img { display: none; } 还是那句话，上面的内容不会阻止浏览器加载图片，即使它在视觉上是隐藏的。原因是 被认为是被替换的元素，所以我们无法控制它加载的内容。...伪元素 可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。对于 ，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。...，同时我们还需要一个伪元素来充当叠加元素。...一个 元素 一个带有 的 一个带有CSS背景的 SVG 到底哪家好呢？让我们一起来探讨一下。 使用HTML 大家可能首先想到的是加边框吧？...避免使用图片作为CSS背景 当一个图片作为CSS背景被包含时，它将不会被打印出来，而是会出现一个空位。见下图。 就是这样的情况。
3.7 背景样式 2.7.1 常见背景样式 背景图片，background-image 背景颜色，background-color 2.7.2 设置背景图像 2.7.2.1 background-Image...，元素会被显示为块级元素，该元素前后会带有换行符 inline 内联元素的默认值。...，而是浏览器窗口； 使用场景：在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等； 6.4 z-index属性 调整元素定位时重叠层的上下位置 ； 1.z-index属性值：整数，默认值为...，当过了设置的时间值后才会被触发 ； 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ； 0：默认值，元素过渡效果立即执行； 7.3 过度的触发机制 1.伪类触发 ：hover 鼠标悬停和划过时的显示效果...-- 在进行伪类触发后还可以对指定标签操作；点击li的时候还可以改变span的背景色； 1 雅诗兰黛即时修护眼部精华霜15ml --> ul li:hover
`pointer-events: none;`：禁用元素的鼠标事件，使其不接收用户的交互操作。 `z-index: -1;`：将元素的堆叠顺序设置为-1，使其在其他内容的下方。...`width: 10px; height: 10px;`：设置元素的宽度和高度为10像素。 `background-color: #fff;`：设置元素的背景颜色为白色。...`background-color: red;`：设置伪元素的背景颜色为红色。 `border-radius: 50px 50px 0 0;`：设置伪元素的边框半径，实现爱心形状。...随机生成雪花的背景颜色。 设置雪花的内容为"命运之光"（可自定义）。 返回创建的雪花元素。 17. `function getRandomColor()`：定义获取随机颜色的函数。...这段代码实现了一个带有下雪背景效果和爱心的网页，同时显示了两个倒计时效果，一个是从指定日期开始计算的时间流逝，另一个是每秒钟刷新的下雪效果。
云服务器
ICP备案
实时音视频
云直播
对象存储
