body> 点击按钮可以隐藏...class属性值为"antzone"的元素。
| 代码示例 ) 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 ) 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序...需要 任意摆放 , 必须使用绝对定位 ; 9、固定定位概念语法 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用..., 与 右侧的 三个按钮 , 就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 10、绝对定位元素设置 水平...的容器需要居中对齐 ; 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素 水平 / 垂直 居中 ; 2、...清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客 ;
CSS第五天-定位 静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用 根据自身原来的位置，进行定位 没有脱标，在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动 可以直接加宽高，默认宽度是内容宽度 脱离标准流，在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示） visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置...display：none 隐藏元素本身，隐藏后的元素不占有位置 ---- 垂直方向居中： 第一种： 第二种：left: 50% 第三种
方向 属性名 属性值 含义 水平 left 数字+px 距离左边的距离 水平 right 数字+px 距离右边的距离 垂直 top 数字+px 距离上边的距离 垂直 bottom 数字+px 距离下边的距离...二、相对定位 占有原来的位置 仍然具有具体标签原有的显示模式特点 改变的位置是参照自己原来的位置 三、绝对定位...四、固定定位 脱标，不占位置 改变位置参考浏览器窗口 具备行内块特点（别忘记设置尺寸） 元素的层级问题： 层级关系: 标准流滚动条 auto 根据是否溢出，自动显示或者隐藏滚动条 五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。...（如：鼠标hover之后元素隐藏 属性： visibility：hidden; (不常用 占位置
super垂直对齐文本的上标，和sup标签一样的效果 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐...可见性visibility visibility:hidden visible元素可见 hidden元素不可见 collapse当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局 溢出隐藏overflow...auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...（相对于父类） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute绝对定位，这条语句的作用加你个元素 从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个...具有定位属性的父包含块进行绝对定位。
height: 200px; background-color: red; position: fixed; bottom: 0; display: none; } JavaScript代码 //获取元素...wheelFun; } function wheelFun(event) { //event兼容 var event = event || window.event; //页面滚动上去的高度兼容...向上'); top--; } else { //console.log('向下'); top++; } //简单判断 改变box的样式
下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...将overflow-y属性设置为scroll会为超出其高度的内容创建一个可滚动的容器。超出侧边栏范围的项目将被隐藏。右侧会出现一个滚动条，允许您的网站用户查看所有内容。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。...为了实现所有滚动条的统一定制，我们可以按如下方式应用样式：在不选择任何特定元素、标签或类名的情况下应用滚动条样式在网站同时具有水平和垂直滚动条的情况下，为两个属性的height和width同时赋值。...这意味着它们将适用于整个网站的所有滚动条。我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...display:"none"与visibility:hidden的区别： visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 十一、position定位 static static 默认值，无定位，不能当作绝对定位的参照物...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
属性值 说明 none 不可以缩放 both 水平和垂直方向上均可调整元素的大小 horizontal 在水平方向上调整元素的大小 vertical 在垂直方向上调整元素的大小 注意： 块元素 overflow...scaleY() 函数定义了一个沿 y 轴（垂直）调整元素大小的变换。...显示拖拽条 由于完全隐藏了滚动条，用户也就不知道可以拖拽了，所以我们还需要绘制一个更为好看的拖拽条。...当 left/right、top/bottom 对立方位的属性同时存在时，宽度表现是“格式化宽度”，宽度大小相对于最近的具有定位特性（非static）的祖先元素计算。格式化宽度具有完全的流体性。...包裹性： 元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸。inline-block元素、浮动元素以及绝对定位元素都具有包裹性！ 示例：文字少居中显示；文字超过一行居左展示。
y-coord 是指在元素左上方区域纵轴方向上想要显示的像素。 也就是element.scroll(x,y)会将元素滚动条位置滚动到对应x,y的位置。...没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。...如果存在了滚动条，client只会计算出当前元素展示出来的高度/宽度，而scroll不仅仅会计算当前元素展示出的，还会包含当前元素的滚动条隐藏内容的高度/宽度。...，判断当前元素出现的高度 + 滚动条高度 = 元素本身的高度(包含隐藏部分)。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的） 。
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值 编码实现...let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置...e.clientX + scrollLeft + 'px'; menu.style.top = e.clientY + scrollTop + 'px'; } // 鼠标点击其他位置时隐藏菜单...} #menu{ border:1px solid #ccc; background: #eee; position: absolute; // 设置菜单为绝对位置...style> 让body元素出现滚动条用的
标准坐标系我们之所以要进行上面的转换，这是因为在Three.js中Canvas画布具有一个标准设备坐标系，该坐标系的坐标原点在canvas画布的中间位置，x轴水平向右，y轴竖直向上。...标准设备坐标系的坐标值不是绝对值，是相对值，其范围是[-1,1]区间，也就是说canvas画布上任何一个位置的坐标，如果用标准设备坐标系来表示，那么坐标的值都是在-1到1之间的。...pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是 clientY + 垂直滚动条滚动的距离。 坐标系上某一个元素的pageX/pageY 不会 随着滚动条滚动而改变。...clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...坐标系上某一个元素的clientX/clientY 会 随着滚动条滚动而改变。
scroll 强制在水平和垂直方向添加滚动条 auto 自动在溢出方向添加可用滚动条 边框 边框实现 语法： border: width style color; 边框样式为必填项，分为...元素设置浮动,就具有块元素的特征,可以手动调整宽高 “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示 常见问题 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示...）/absolute（绝对定位）/fixed（固定定位） postion:relative/absolute/fixed/static 偏移属性 设置定位的元素可以使用偏移属性调整距离参照物的位置 top...,不会脱离文档流 absolute 绝对定位： 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 fixed...固定定位 参照窗口进行定位,不跟随网页滚动而滚动 脱离文档流 使用绝对定位：“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.
边框颜色 外边框 outline-color: 颜色 outline-style: 轮廓样式 outline-width: 宽度 隐藏元素 display:none 隐藏的元素不会占用任何空间 visibility...:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间 定位 postion: absolute(绝对定位)，其位置相对于最近已定位的父元素，如果元素没有已定位的父元素那么它的位置相对于 static...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 浮动 clear 指定不允许元素周围有浮动元素。
元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...vertical-align 垂直对齐，它只针对于行内元素或者行内块元素， vertical-align : baseline |top |middle |bottom 设置或检索对象内容的垂直对其方式...负边距+定位：水平垂直居中 咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 2).
3.如何让元素支持height:100%效果 知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box 方法如下： * 1.设置显示的高度值 *...，padding对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠...box尺寸时触发滚动条显示 2.margin合并条件 块级元素，但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 *...:auto; margin-left: auto; 4.绝对定位元素利用margin:auto实现水平垂直居中(兼容到ie8+) .father{ position: relative; }...可访问性隐藏 2. ie8下的多背景隐藏 好啦，关于css的知识还有很多，有些问题也很难通过表象去解决，这个时候，让你脱颖而出的就是你对代码底层更深入的理解了。
列表（List） 使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。...网格（Grid） 网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调整。...定位能力 使用场景 实现方式 绝对定位 对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。 使用【position】实现绝对定位，设置元素左上角相对于父容器左上角偏移位置。...**隐藏：**隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。...可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。 使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。
元素的显示与隐藏 display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要！...visibility -- visible(显示) hidden (隐藏 && 保留原来的位置 ) 复习： overflow:hidden; 1.之前解决父子关系垂直嵌套的合并塌陷问题。...2.清除浮动 overflow -- hidden 内容超出的部分隐藏(重点的) scroll(强制出现滚动条样式) auto(根据内容多少来判断是否出现滚动条 ) 精灵技术 目的：为了有效地减少服务器接受和发送请求的次数...，如果处理图片和文本的垂直对齐方式，line-height=高 不可以实现！...前置知识点： relative -- 相对定位占位置 absolute --- 绝对定位不占位置 float ---- 浮动不占位置 文字环绕效果 浮动 -- 压不住下面标流的图片和文字。
元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...vertical-align 垂直对齐，它只针对于行内元素或者行内块元素， ?...负边距+定位：水平垂直居中 咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
