body::before伪元素被用来添加内容，在页面主体之前显示。--line是一种自定义CSS变量，用于指定线条的颜色和透明度。content: "";表示伪元素没有实际内容，只是为了生成背景效果。...height和width属性将伪元素的高度和宽度设置为100vh和100vw，使其与视口的尺寸相同。position: fixed;将伪元素固定在视口的位置。...top: 0;将伪元素定位到页面顶部，z-index: -1;将其置于最下层。...display: grid;将元素以网格布局显示。gap: 4rem;设置网格项之间的间距为4rem。...align-items: center;和justify-content: center;使得元素内容在水平和垂直方向上都居中对齐。
Anchor Positioning CSS 锚点定位是一项实验性的新 CSS 功能，允许你相对于页面上的另一个元素定位一个元素。这是通过使用 anchor-position 属性来完成的。...在下面的示例中， shape-overflow: clip 将允许内容溢出形状，但它将被限制在元素的笔画框内： 滚动捕捉(scroll snap) CSS 滚动捕捉模块提供的属性可让您通过定义捕捉位置来控制平移和滚动行为...滚动对齐： 新的 scroll-snap-align 属性允许你控制元素在对齐到对齐位置时的对齐方式。例如，你可以使用此属性来确保元素始终与滚动容器的顶部、底部、中心或左/右对齐。...:past 伪类表示定义为完全出现在 :current 元素之前的任何元素。然而， :future 伪类代表后面的元素。...，以将网格与父网格对齐： .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr
例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的。...然后，借助树结构伪类数量匹配技术（这篇文章“伪类匹配列表数目实现微信群头像CSS布局的技巧”中的布局技巧就是借助这种技术实现），我们可以知道最后一行有几个元素。...; flex-wrap: wrap; } .list { background-color: skyblue; margin: 10px; } /* 使用伪元素辅助左对齐 */...但是有些人代码洁癖，看不惯这种空的占位的html标签，则可以试试一开始的两个方法，一是动态计算margin，模拟两端对齐，另外一个是根据列表的个数，动态控制最后一个列表元素的margin值实现左对齐。...如果你有其他更好的实现，也欢迎反馈与交流，我会及时在文中更新。
3、否定伪类 1、作用 将满足条件的选择器匹配的元素 排除出去 2、语法...伪类选择器：匹配到的都是完整的元素 伪元素选择器：匹配到的是某元素中内容中的一个部分 1、:first-letter 或 ::first-lette...1、作用 允许通过css的方式动态的向某元素的内容区域中增加内容 2、伪元素选择器 1、:before 或 ::before 匹配某元素内容区域之前...与交叉轴的两端对齐 5、space-around 每个轴向两侧的间距是相等的...5、baseline 与第一行文本的基线对齐 6、stretch
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。...text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。...每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。...取值： flex-start：元素向主轴起点对齐。 flex-end：元素向主轴终点对齐。 center：元素在侧轴居中。 stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。...第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
Web前端-CSS必备知识点 Web前端-CSS必备知识点 css基本内容，类选择符，id选择符，伪类，伪元素，结构，继承，特殊性，层叠，元素分类，颜色，长度，url，文本，字体，边框，块级元素，...color: red;" >dashucoding 规范： 选择符 + 声明 p { color: red; } // 选择符 属性 值 p { font-weight: bold; } 伪类和伪元素...important; } 元素分类： 三种类型：块级元素，内联元素，列表项元素 块级元素有段落，标题，列表，表格，div，body等。内联元素有a，em，span等。列表项元素有li元素。...white-space空白 white-space pre | nowrap | normal p { white-space: normal; } 将如何空白压缩成单个空白符 white-space属性值为pre，可以将元素内的空白忽略...纵向对齐，vertical-align vertical-align: baseline使元素的基线同父元素的基线对齐。
a:link：a标签元素被点中后 目标：:target伪类，当元素被跳转到后则选中 根伪类：:root伪类，根元素 空元素：:empty伪类，没有内容的标签 七 结构伪类选择器 首尾元素伪类...：第一行 ::after：在之后添加内容，定义内容属性 ::before：在之前添加内容，定义内容属性 搞定CSS 3权重，写CSS样式更流畅 层叠样式，是不同的选择器效果附加到元素上。...如果有冲突，要使用权重排列 一 id与class权重 id权重：100 class权重：10 二 权重计算 同类权重，后出现的覆盖前面的 标签/伪元素：1 属性权重：10 行内：1000...：nowrap，加上overflow：hidden，text-overflow：ellipsis，溢出部分隐藏 九 文本对齐与缩进 对齐：text-align指定水平方向对齐，vertical-align...表格标题：caption标签 对齐：文本用文本对齐，表格用块对齐方式 表格颜色：与div差不多 表格背景：与div差不多 细线表格：border-collapse，设置collapse 间距
: 1px solid #000; border-bottom:none; } D. div { border: 1px solid #000; border-left:none; } 需要控制盒子中内容与边框的距离...伪元素before和after使用时必须写content属性 B. 伪元素和伪类没有区别 C....伪元素是在当前标签外部添加 D. before和after伪元素默认创建的是块级元素 下列伪元素中可以在元素内前面和后面添加内容的伪元素是? A....B： justify-content属性可以控制主轴对齐方式 C： align-self属性可以控制单个子元素侧轴对齐方式 D： align-items属性可以控制多行侧轴对齐方式 父元素设置为...} C. div { z-index:99 } D. div { position:absolute; z-index:2 } 文字与图片之间有一个垂直对齐规则，默认是( ) A.
对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。 2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。..."; /*content属性添加的内容写在这里属性的值里面，这个属性是专门配合伪对象，必须写*/ display:block; /*将添加进去的内容转换为块状元素*/ visibility...当html元素具有不同的状态或特征时，伪类可以设定该元素不同状态或特征下的样式效果。 伪类的写法：在常用选择符后面追加一个冒号“：”，然后加上伪类的名称。 常用的伪类： 超级链接的伪类应用： 1....列表：html列表结构 什么是列表？列表是一种由具有一定规律顺序，排列而成的数据项的集合。 列表常见应用：列表呈现的信息蒸汽只管，适用于有规律可循的区域或栏目板块。...所有的列表标签都是双标签，块状元素，是装载内容元素的“盒子” 5.
或者margin:0 auto，让浮动元素本身水平居中 ---- 伪元素： ::before 在父元素内容的最前添加一个伪元素 ::after 在父元素内容的最后添加一个伪元素 伪元素：一般页面中的非主体内容可以使用伪元素...如：新闻列表、京东推荐模块 额外标签法 在父元素内容的最后添加一个块级元素。...，然后在这元素中数个数 如果li之间还有别的元素，用of-type永远会找到li里面的第N项元素 li里面有A的话，选择器后面加上li里面所需设置的样式才会生效 功能 公式 偶数 2n、even 奇数...2n+1、2n-1、odd 找到前5个 -n+5 找到从第5个往后 n+5 ---- 标准流+浮动： 1、浮动的元素找相邻浮动的元素，顶部对齐，在同一行内显示 要浮动都浮动（加强版的行内块） 2、浮动的元素脱离标准流...如：auto、hidden… BFC盒子常见特点： BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动 BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin
，例如：div:not(:last-child)，选中除最后一个div的所有div元素 有时候在做列表时需要为每项添加下边框线，但最后一个项不需要边框线 .item:not(:last-child){...border-bottom: 1px solid #ddd; } 阻止元素成为鼠标事件的target pointer-events 指定鼠标如何与元素进行交互，设置为none，阻止任何鼠标事件对其的作用...ddd); } ios移动端滚动卡顿 在ios端中滚动容器不会有惯性滚动，用户在滑动时会出现明显的卡顿感，添加以下属性可解决问题 -webkit-overflow-scrolling: touch; 列表最后一行左对齐...::selection伪元素应用于文档中被用户选中的部分 我是一段很长很长很长很长很长很长长很长很长长很长很长的文字 .demo::selection{...margin排版重轻布局 一个flex布局的列表想要实现左重右轻的布局（即最后一个元素右对齐），可以为最后一个元素添加 margin-left: auto 当然，如果你需要最后两个元素右对齐，只需为倒数第二个加上
：用来替换元素内容的部分并未由文档内容直接表示，如img、input等 非替换元素：大多数都属于非替换元素，内容由用户在元素本身生成的框中显示，如段落、标题、单元格等 元素显示角色（块级元素：生成一个元素框...;} 2.3 类选择器和ID选择器 多类选择器：通过将多个类选择器连接在一起，仅可选择同时包含这些类的元素（类名顺序不限） .warning.urgent{background:red;}/*注意中间不含空格...（text-indent和text-align） 6.2 垂直对齐（line-height） 垂直对齐文本（vertical-align）只应用于行内元素和替换元素，如图像和表单；上标和下标super...|inherit） 11.3 表大小 宽度：固定布局和自动布局 高度和对齐 第12章 列表与生成内容 12.1 列表 列表类型（list-style-type）、列表项图像（list-style-image...）、列表项位置（list-style-position） 12.2 生成内容 使用before和after伪类生成，设置content值；计数器的应用 第13章 用户和界面样式 13.1 系统字体和颜色
:required伪类指定具有必填项属性的表单 :valid伪类指定一个通过匹配要求的表单元素(结合type使用) :invalid伪类指定某一未通过匹配要求的元素 列表内容内容列表内容内容列表内容内容 列表...1 列表内容内容列表内容内容列表内容内容 ...列表1 列表内容内容列表内容内容列表内容内容 .bd { max-height...transparent 100%); background-size: $h * 2 $h * 2; } } 使用效果: 波浪线效果 一些非常简单的css技术 CSS实现文字两段对齐
1). outside 默认值，列表项标识的默认位置是在内容区域之外 (2). inside 将列表项标识的位置改为内容区域之内 59....伪类匹配元素不同的状态，伪元素匹配的是元素中的内容 ②....内容生成，通过 css 动态的向某个元素的内容区域之前/之后增加一部分内容 (1). 伪元素选择器 ①. :before 或 ::before，定位到元素的内容区域之前 ②....(单行项目有效) A. flex-start 在交叉轴的起点对齐, 交叉轴为与主轴相反的轴 B. flex-end 在交叉轴的终点对齐, 交叉轴为与主轴相反的轴 C. center 在交叉中的中间对齐...，如果项目只有一根轴线，该属性无效 A. flex-start 交叉轴起点对齐, 交叉轴为与主轴相反的轴 B. flex-end 与交叉轴的终点对齐, 交叉轴为与主轴相反的轴 C. center 与交叉轴的中间对齐
& 伪元素 伪类分两种，状态类伪类和结构类伪类。...）等 伪元素常用的一般就两个， ::before 和 ::after ，都是用来向被选中的元素添加元素之外的装饰性内容（文字）等 # 组合 选择器与选择器、选择器与伪类之间都可以进行组合，组合按照以下规则...与 A 同级，则选中 B img + p # 选择器组 当多个选择器使用相同样式时，可以用 , 将多个选择器隔开 例如： h1, h2, h3, h4 { color: red; } a...十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。 个位：选择器中包含元素、伪元素选择器则该位得一分。...width、height 不适用，并且 margin、padding、border 虽然生效，但是不能推开上下内容 ---- 块级元素 行级元素 特性 生成块级盒子 生成行级盒子内容分散在多个行盒
设置时会减小内容区域的大小。或者换句话说，当向元素添加边距、内边距和边框时，元素的总高度和总宽度不会增加。 CSS盒子模型的组成部分： 1、内容： 这是 CSS 盒子模型的主要元素。...内容区包含元素的主要内容。内容包括文本、图像或视频。 2、填充： 填充在其边界内围绕元素创建空间。 使用属性在 HTML 元素上设置填充。...b) center: center 值将项目对齐在 flex 容器的中心 c) flex-end: flex-end 值与 flex-start 相反。它在弹性容器的末端对齐弹性项目。...d) center center值将所有网格项对齐在网格的中心。 e) start 起始值对齐网格容器开始处的所有网格项。...它允许您根据元素在文档中的位置更改元素的外观。 CSS state management counter可用于 1）自动编号网页中的标题。 2) 更改有序列表的编号。
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。... 定义无序列表 定义列表项 定义列表 自定义列表项目 定义自定列表项的描述 表单 标签 描述 定义供用户输入的表单 定义输入域...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。...2 :before p:before 伪元素 在每个元素之前插入内容 2 :after p:after 伪元素 在每个元素之后插入内容 2 :lang(language) p:lang(it...3 内容生成属性(Generated Content Properties) 表格（Table） 属性 网格（Grid） 属性 页面媒体(Paged Media) 属性 列表(List) 属性 字幕(
ul 标签代表无序列表（与有序列表或数字序号列表相对应），在本示例中，你可以用它来存放列表信息。 我们无法用只言片语就说清楚 HTML 元素的语义，以及何种情况用何种标签。...用 C 语言风格的 / / 包围注释内容即可高枕无忧。 还有一个小窍门：可以用 伪元素在 “handle” 与 “时间” 之间添加一个凸点。....handle::after { content: " b7"; } ::after 创建了一个伪元素，它位于 .handle 元素内部的最后方（“落后” 于元素的内容）。...你还可以用 ::before 创建伪元素。可以给 content 属性赋值任何文字内容，包括 Unicode 字符。你可以恣意发挥，像给任何其他元素设置样式一样。...伪元素用来实现标记（badge）、消息提醒或其他小花样最合适不过了。 图标按钮 还有一项工作要做，那就是用图标替换按钮。
3 、 任何元素均可浮动 ， 设置浮动后，元素的特性与 行内块元素相似 （宽度可设置、默认由内容决 定、触 碰父元素边缘自动换行） 3.5 浮动总结 浮动和标准流一般搭配使用： 步骤...（多次添加额外标签，作用于某个浮动元素，该浮 动元素的“影子”也仅生效一次） 总结：额外标签法在开发中会遇到 4.5 单伪元素法 单伪元素法：为标准流的父元素添加伪元素 :after ，...但因为不会添加额外标签，很多美工人员用伪元素可以应对需求反复的修改，所以会见到其他 人的代码中使用 扩展：特殊条件下，当伪元素生成的内容有高度、且内容被显示影响版式时，我们会多加入两个属...（兼顾清除浮动的妙用） 格式： overflow : 属性值 ; 属性值列表（后面课程会详细介绍其他属性值） 总结：清除浮动的代码虽然简洁，但是容易被上方的浮动元素影响，且无法显示出溢出部分...，若对 内容不溢出 没有十足把握，不建议用此来清除浮动。
前言： 本篇文章主要分享 CSS 与 JavaScript 基础面试题。CSS 和 JavaScript 都是前端基础知识，是前端学习中一定要学的内容，也是前端面试中必不可少的内容。...如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。 4. 伪类与伪元素的区别 css 引入伪类和伪元素概念是为了格式化文档树以外的信息。...也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。...justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。 align-content属性定义了多根轴线的对齐方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
