天生就是给绝对定位当爹用 ---- 绝对定位: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()`:定义获取随机颜色的函数。...这段代码实现了一个带有下雪背景效果和爱心的网页,同时显示了两个倒计时效果,一个是从指定日期开始计算的时间流逝,另一个是每秒钟刷新的下雪效果。