避免先写了DOM操作，但是元素是动态加载的，所以点击不生效，比较好的方法有两个： 1、动态添加的时候加行内事件，比如onclick="funcName()" 在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多...，可以考虑使用方法二； 2、jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定事件。...("aaa") let num = $(this).parents(".input-group").index(); console.log(num) }) 注意：on事件先是获取到父元素...，然后绑定到子元素上，父元素最好是已经存在的元素，而不是动态添加的。
1.html中行内元素可以设置宽高吗？ 行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。...比如设定了width但未设置height, img的height会根据图片的大小按比列缩放。 3.html中行内块元素与行内元素和块级元素的区别？...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。...行框高度等于本行内所有元素中行内框最大的值。当有多行内容时，每行都会有自己的行框。 块框：块级元素形成的框称为块框，又叫块级框。如div、h1 或 p 元素常常被称为块级元素。...这意味着这些元素显示为一块内容，即“块框”； 行内框：行内元素形成的框称为行内框，如a、span元素形成的框。注意，这里不要与行框相混淆。
） 如（ transform:rotate（9deg）scale（0.85,0.90）translate（0px, 30px）skew（-9deg,0deg）；// 旋转、缩放、定位、倾斜。...新增伪类有以下几个： p:first- of-type，选择属于其父元素的首个元素的每个元素。 p:last-of-type，选择属于其父元素的最后一个元素的每个元素。...p:only- of-type，选择属于其父元素的唯一元素的每个元素。 p:only- child，选择属于其父元素的唯一子元素的每个元素。...p:nth- child（2），选择属于其父元素的第二个子元素的每个元素。 :enabled:disabled，控制表单控件的禁用状态. :checked，单选框或复选框被选中。...16、rem的原理是什么？ 在做响应式布局的时候，通过调整HTML的字体大小，页面上所有使用rem单位的元素都会做相应的调整。 17、如何设置CSS3文本阴影？
Step3: 动态设置 html 标签根字体大小 如何实现页面元素跟随设备尺寸等比缩放？...标签字体大小的单位 早先给html标签设置 font-size: 62.5%; 只是为了实现 1rem = 10px 从而使计算方便，不能满足此处页面元素跟随设备尺寸等比缩放的需求 文字字体大小建议不要用...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。...html标签的font-size值(本案例100) 如：60px宽的div，不必关心屏幕尺寸缩放，只需要除以100，设置 width: 0.6rem; 即可 5....Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小
Em 单位的遗传效果 使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。...继承效果只能被明确的字体单位覆盖，比如px,vw 使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。...使用 em 单位: 根据某个元素的字体大小做缩放而不是根元素的字体大小。 一般来说，你需要使用 em 单位的唯一原因是缩放没有默认字体大小的元素。...请尝试更改下面的 CodePen，看看 html 元素上的 em 字体大小如何起作用: 少部分情况下，我们不想我们的字体大小根据根元素做调整，只有几个例外的情况。...使用 em 单位应根据组件的字体大小而不是根元素的字体大小。 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
在网页设计中，背景是构建视觉层次和氛围的关键元素之一。CSS的背景属性为我们提供了强大的工具，用于控制元素的背景颜色、图片、以及它们的显示方式。...常见问题与避免策略 问题：颜色不透明度影响子元素。 避免：使用rgba()设置背景色时，确保仅改变背景而不影响子元素透明度。...常见问题与避免策略 问题：图片尺寸与元素尺寸不匹配导致失真或拉伸。 避免：使用background-size属性控制图片缩放，如cover使图片覆盖整个容器，contain使图片完整显示在容器内。...url('image.jpg'); background-size: cover; /* 图片填充容器并保持比例 */ } 三、背景重复（background-repeat） 此属性控制背景图片如何在水平和垂直方向上重复...易错点 错误理解：默认情况下，图片在两个方向上平铺，可能导致视觉混乱。
通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。...1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。...早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。...针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。...此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size
CSS 2D变换为网页设计带来了前所未有的灵活性，让开发者能够轻松实现元素位置移动、旋转和缩放等动态效果，而无需更改HTML结构。...1. translate - 平移变换 简介 translate属性使元素在水平和垂直方向上移动，而不影响文档流。它接受两个参数，分别代表水平和垂直位移的距离，单位可以是像素、百分比等。...问题2：角度单位混淆 避免策略：始终使用deg作为角度单位，避免与其他单位如rad（弧度）混淆。...常见问题与避免策略 问题1：意外的布局影响 避免策略：考虑到缩放可能会影响元素的占据空间，合理规划布局，避免遮挡或重叠问题。...问题2：缩放后的文本模糊 避免策略：对于包含文本的元素，谨慎使用缩放，考虑使用font-size调整字体大小以保持清晰度。
CSS attr() 函数允许开发人员检索样式表中HTML属性的值。...在下面的示例中，我使用 attr() 函数使用其 data-value 属性来显示 span HTML 元素的 ::after 伪类的文本内容。...HTML 元素）动态调整元素的宽度和高度。...使用它，我们可以设置元素的内容应如何与其父元素和背景混合。在本例中是一个 img 元素。 在这里，你可以看到我使用了两张图像：一张是彩色的，另一张是黑色的，并且都有白色背景。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出，如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色，具体取决于背景颜色。
首先，我们需要了解如何在 PC 端查看不同设备的显示情况，这里我使用的是 Chrome 浏览器，对于所有搞开发的小伙伴来说，Chrome、火狐浏览器以及新版的 Edge 浏览器应该是最好用的工具了接着，...html { font-size: 16px; /* 设置根元素字体大小为 16px */}body { font-size: 1rem; /* 相对于根元素，等同于 16px */}.box1...，我们的 html 标签中的font-size属性值也是动态改变的，因此，我们需要通过 JavaScript 代码动态改变 font-size 的值，代码如下：// 根据设备宽度计算 html 标签的...font-size = 设备宽度 / 10function resetHtmlFontSize() { // 获取 html 对象并动态设置 font-size document.documentElement.style.fontSize...在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的，可以理解为 OR 的意思。
相对单位em 概述 em是一个相对单位，其值基于当前元素的字体大小。如果当前元素没有设置字体大小，则继承自父元素的字体大小。em单位使得样式能够根据上下文动态调整，非常适合创建流体布局和响应式设计。.../* 示例：段落字体大小是其父元素字体大小的1.5倍 */ .parent { font-size: 16px; } .child { font-size: 1.5em; /* 相当于...相对单位rem 概述 rem（root em）是相对于根元素（通常是html元素）字体大小的单位。与em相比，rem避免了因嵌套而导致的复杂计算问题，成为响应式设计和可访问性改进的优选。...常见问题与避免 问题：忽略设置根元素的字体大小，导致rem单位失去意义。 避免：始终在CSS初始化中明确设置html的字体大小，以便于控制整个页面的缩放比例。...在实际开发中，灵活结合使用这些单位，结合现代布局技术（如Flexbox和Grid），可以创造出既美观又实用的网页布局。
他们是一种特殊的语法/语言编译成CSS。 例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数....9.block，inline和inline-block的概念以及区别 首先这是display中的三个属性值，不是元素指类型，元素类型在HTML5之前分为两种分别是块级元素（ block-level elements...默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。...p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 元素。
上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。...max-width的常见且简单的用例是将其与图像一起使用。 考虑以下示例： ? 图像比它的父元素大。通过使用max-width: 100%，图像的宽度不会超过其父图像的宽度。...flex 项目的最小大小等于其内容的大小。 根据CSSWG： 默认情况下，flex项目不会缩小到它们的最小内容大小(最长单词或固定大小元素的长度)以下。...ch 是一个相对于数字0的大小，1ch 就是数字 0 的宽度。如定义一个3ch的宽度，那么就只能装下 3个0。 元素，因此它已经具有其父元素的100％宽度，对吗？ 考虑下面为模态设计简化的测试案例。 请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。 ?
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child...选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。...元素被当成行内元素排版的时候，原来html代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。...如：transform:translateY(20px): 三、缩放scale 缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（...如：transform:scaleX(2): 3、scaleY() ：使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。
C1 能力认证——Web基础 语义化标签 元素 说明 article 定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等 aside 一般用于网页中的侧边栏或者文章内部的标注框 header...，且满足冒号前的基础选择器选取要求 :first-of-type 用于选取属于其父元素的第一个特定类型的子元素 :last-child 用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求 :last-of-type...用于选取属于其父元素的最后一个特定类型的子元素 :nth-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1...） :nth-of-type(N) 选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字（odd / even）、公式 :nth-last-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求... float 现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最左边的元素的类名为_____?
3.不同方式进行定位，与expected_conditions判断方法封装，循环判断页面元素出现后再操作； 4.开发人员规范开发习惯，如给页面元素加上唯一的name,id等。...其次是Xpath，因为很多情况下html标签的属性不够规范，无法唯一定位。...首先触发动态事件，然后再定位。如果是动态菜单，则需要层级定位。——JS实现（对动态事件封装） NO.11 如何去定位属性动态变化的元素？...NO.13 如何在页面加载成功后验证元素的存在？ 它可以通过下面的代码行来实现。...NO.16 如何在定位元素后高亮元素（以调试为目的）？ 重置元素属性，给定位的元素加背景、边框 NO.17 XPath中使用单斜杠和双斜杠有什么区别？
举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元素。...p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。...p:only-child 选择属于其父元素的唯一子元素的每个 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。...目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？ 可以通过css3里面的动画属性scale进行缩放。 22、移动端的布局用过媒体查询吗？...自动变成了 display:block 30、怎么让Chrome支持小于12px 的文字？ （1）用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
那么，我们现在开始探索这些酷酷的CSS技巧吧。 1.使用CSS获取HTML属性值 CSS attr() 函数允许开发人员检索样式表中HTML属性的值。...在下面的示例中，我使用 attr() 函数使用其 data-value 属性来显示 span HTML 元素的 ::after 伪类的文本内容。...HTML 元素）动态调整元素的宽度和高度。...使用它，我们可以设置元素的内容应如何与其父元素和背景混合。在本例中是一个 img 元素。 在这里，你可以看到我使用了两张图像：一张是彩色的，另一张是黑色的，并且都有白色背景。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出，如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色，具体取决于背景颜色。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
