10px; border: 1px solid black; background-color: white } div...class="modle"> click me div> div id="popmenu"> 内容 div> <script
; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式# 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口，它都在那儿雷打不动...，相对于这个元素的原来位置进行移动，原来的位置依然是存在的（通常里面会包上absolute绝对定位来用）。...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...wrap表示自动换行，当项目在第一行排列不完时，会自动切换到下一行排列。 wrap-reverse 也是自动换行，但不同的是，它是从底下开始排列的（之前我们都是从上面开始排的）。...justify-content属性定义了项目在主轴上的对齐方式（我们想要使项目在容器中居中时，经常用得到）。
{ /* static定位 ：即 浏览器的默认的，写不写没啥区别，top、right、left、bottom不起作用*/ position: static; border: 3px...solid #73AD21; top: 50px; /*演示：这句话不起作用，可删去*/ left: 10px; /*演示：这句话不起作用，可删去*/ } div.fixed..._1 { /* fixed定位：元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说， 是固定的，无论你怎么滑动窗口，它都在那儿雷打不动。...{ /* relative相对定位：相对于这个元素的原来位置进行移动，原来的位置依然是存在的。...{ /*和flex定位有些相似，但是又有些不同 sticky是粘的意思，一开始可以自由滑动，当到一定位置时就会在那里不动。
left: 10px; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口...，相对于这个元素的原来位置进行移动，原来的位置依然是存在的（通常里面会包上absolute绝对定位来用）。...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...wrap表示自动换行，当项目在第一行排列不完时，会自动切换到下一行排列。 wrap-reverse 也是自动换行，但不同的是，它是从底下开始排列的（之前我们都是从上面开始排的）。...justify-content属性定义了项目在主轴上的对齐方式（我们想要使项目在容器中居中时，经常用得到）。
大致的图形描述如下: image.png 比如上图中dog超出了在可视区域的下方，则需要填写该数据时，在页面上进行搜索，让dog显示到可视容器内。...需要注意的是: scrollTop属性只能设置在本身包含滚动条的元素上，否则不起作用。因为包含滚动条的容器，含有overflow:scroll或者overflow:auto属性。...设置在scroll-inner上，则不起作用。 vue3选中真实dom 选中真实dom有两种方式。...scrollContent.getBoundingClientRect() const scrollDistance = bottom2-bottom1 + height getBoundingClientRect()用来获取元素的大小及其相对于视口的位置...其他需要注意的问题 因为我们在进行业务开发时，经常使用第三方UI组件库。当我们用ref直接设置到组件库中的组件时，比如Button,ref获取到的其实是这个组件对象，并非直接获取到真实的DOM元素。
"> div class="mask">div> div> div class="big"> <img src...position: relative; } 我们大概过程分为三步 1.鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big 2.当鼠标在盒子中移动时...box.onmouseleave=function(){ mask.style.display = 'none'; big.style.display = 'none'; } 当鼠标在盒子中移动时...，让mask跟着鼠标一起移动 ... //2.当鼠标在盒子中移动时，让mask跟着鼠标一起移动 box.onmousemove=function(e){ //1....获取鼠标在盒子的位置 就是mask的坐标 //鼠标在页面的位置减去盒子在页面的位置 var maskX = e.pageX-box.offsetLeft; var maskY =
相对定位 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。...相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。...绝对定位使元素脱离文档流，因此不占据空间 ，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...#div1{ position:fixed; bottom:0; right:0 } (始终在屏幕由下端有一个div框，会一直跟着滚动条走) 相对定位可以和绝对定位混着使用 原则是：只要父
实际上，块状元素都会以行的形式占据位置。 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。...如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口 相对于浏览器窗口处于右下角。并且拖动滚动条时位置固定变化。...bottom:0; } div id="div1">div> (2) position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...相对于浏览器视图处于右下角。并且拖动滚动条时位置固定不变。
），可以定义宽高，不占据标准流的空间 3.margin:auto对于设置过绝对定位的元素不起作用 4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义 使用场景：配合相对定位使用... div> 总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） —父相子绝 3....总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...> 四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准 静态static 不脱标，正常模式 不可以 正常模式 相对定位relative 不脱标，占有位置 可以 相对自身位置移动...绝对定位absolute 完全脱标，不占有位置 可以 相对于定位的父级移动位置 固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置 5.定位元素的层叠效果 控制“定位”元素的叠放层级
会发生mouseover事件 onmouseout: 当鼠标指针从元素上移开时，发生mouseout事件 onmousemove: 当鼠标指针在指定的元素中移动时，就会发生mousemove事件 3、结构样式搭建...当鼠标移动到原图上时，通过对大图进行位置控制来显示对应的部位。 2....当鼠标移动到box上方时，move块将显示，同时在放大区中显示大图的对应位置，所以我们在这里需要使用mousemove事件监听，当我们鼠标移入box时，就需要获取当前鼠标的相对坐标位置。...box的占比与放大区相对于大图的占比进行比例计算，得到显示图片的显示位置。...5、小结： 因为在日常项目开发中，对拖拽功能的需求还是比较常见的，这几期从自定义滚动条到放大镜的效果都是基于拖拽原理上实现的，小匠在后面的分享中会继续为大家带来更加实用与有趣的功能效果，希望能够为大家在实际开发中带来一点帮助
这次的效果图如下： 拖拽.gif 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢？...我们需要用到三个函数：onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起 在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置...，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值； 在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置，然后改变其...鼠标移动函数和抬起函数均要写在鼠标按下函数中，因为我们是要在鼠标按下这个动作之后来设计之后的行为，而且很重要的一点是： 鼠标按下函数是div的，鼠标移动和鼠标抬起是document的 因为我们的意思并不是鼠标在...div中移动，而是在整个页面移动 重点大概是这些了，下面是代码： <!
class="box"> div> 相对定位 相对定位是相对自己的标准流的位置进行定位移动 position:relative; 特性： 1....移动的出发点是自身标准流的位置 2. 相对定位移动的元素不会对别的元素产生干扰，“没有脱标”，真正占得位置还是标准流的位置（肉体不在 灵魂永驻） 3. 可以盖在标准流的上方 4....:-自身宽度的一半; margin-top:-自身高度的一半; 使用方式： 在工作中，绝对定位"大多"配合相对定位一起使用（父相子绝） 父相：在标准流上占有位置 子绝：针对这个标准流在去移动...（不论块级还是行内） 1.4.margin:auto对于脱标元素不起作用 2.移动的出发点：浏览器窗口 （直接表现：滚动条对于固定元素没有作用） 四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移...移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标，不占有位置 可以 相对于定位的父级移动位置
background-attachment： 决定 背景图像的位置 是在 视口内固定 ，或者 随着包含它的区块滚动 。 它的属性值的含义如下： 属性值 含义 fixed 背景相对于视口固定。...首先, 对于相同物体大小，相同位移速度， 就大小而言，近大远小, 而就物体位移速度而言，近快远慢 (看起来是这样而已) 由于 3D translations 模仿现实， 因此当我们在数字世界中移动物体时...透视效果是指当元素在 3D 空间中移动时，根据其与观察者的距离，产生的远近感和大小变化。 通过调整 perspective 属性的值，可以改变透视效果的强度。...在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。 当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。...类似的，background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。
id="block1">区域一div> div id="block2">区域二div> div id="block3">区域三div> 相对位置 当position...这个对象独立于其他的页面内容，而初始位置的空白会被其他内容自然填补。 它相对于上一级的对象的初始位置发生位移。如果上一级的对象是浏览器窗口，那么它就是相对于整个页面来发生位移。...我们将block2放置在标签内，那么它就是block2框的上一级 区域二相对移动的位置 div id="block2">区域二div> 然后在...浮动层可以将所定义的页面内容放置在页面的左边或者右边，通常放入图像时使用这种方法会很方便。...: static; 相对定位：相对静态定位的默认位置改变对象定位 position: relative; 绝对定位：相对于上一级对象的初始位置发生位移 position: absolute; 固定定位
在写HTML代码时要经常用到Chrome浏览器的F12功能，比如我们看淘宝： ? 通过元素定位器定位到一个li标签，然后看开发者选项卡的右侧： ?...div + css的应用 position：定位属性 作用：让标签显示在我们想要显示的位置 默认值：static 静态，不能动 relative：相对的，可以移动 lesson4.html 不起作用的。 这里的相对是指相对于盒子的左上角顶点。...应用relative时只能应用left和top属性，也就是相对于左侧和上方的距离。 fixed：固定在浏览器的某个位置 让盒子固定在某个地方。...比如微信公众号右侧有一个`在线问答`不管页面怎么动，它都是在浏览器右侧中部边缘： ?
拖放总览 前端拖放，无非通过两种方式：1、js鼠标事件监听，动态改变坐标位置；2、H5原生api。随着H5的普及，推荐使用相对简单的H5原生api实现拖放功能。...目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件，作用于目标元素 ondragover: 拖放元素在目标元素上移动时触发事件，作用于目标元素 ondrop:...拖放元素在目标元素上放置时触发事件，作用于目标元素 ondragleave: 拖放元素离开目标元素时触发事件，作用于目标元素 3.2 demo div id="div1" ondragenter="dragenter...p> div> div id="div2" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event...ondragenter 进入目标区"); } function dragover(event) { event.preventDefault(); console.log("ondragover 正在目标中移动
拖放总览 前端拖放，无非通过两种方式：1、js鼠标事件监听，动态改变坐标位置；2、H5原生api。随着H5的普及，推荐使用相对简单的H5原生api实现拖放功能。...目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件，作用于目标元素 ondragover: 拖放元素在目标元素上移动时触发事件，作用于目标元素 ondrop:...拖放元素在目标元素上放置时触发事件，作用于目标元素 ondragleave: 拖放元素离开目标元素时触发事件，作用于目标元素 3.2 demo div id="div1" ondragenter="dragenter... div> div id="div2" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event...ondragenter 进入目标区"); } function dragover(event) { event.preventDefault(); console.log("ondragover 正在目标中移动
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。...分别分析一下position的几个值 （1）static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 （2）relative 相对定位。...相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...（这里的占据文档流指的是占据原来的位置，而不是占据相对定位后的位置。...个人理解：相对定位后的元素则会叠加到新位置的上，覆盖原先新位置上的元素，但是在新位置上不实际占据空间）如下图所示，头像相对定位前在box1盒子下方，头像相对定位后，头像原来的位置空着，但是下方的带有文本的盒子并没有移动上来
时，鼠标在克隆div中的相对位置 var offsetX = evt1.pageX - cloneDiv.offsetLeft; var offsetY...定位的left top evt.pageX鼠标点相对于整个文档中的位置， offsetX鼠标相对于克隆div中的位置 二者相减就是克隆div相对于整个文档中的位置...2.利用每个div方块都有相对的坐标值，当鼠标按下移动元素的时候，靠近哪个坐标值，靠近坐标值对应的方块就与当前元素进行位置交换。...divmosue_y = (env.clientY - list.offsetTop - divname.offsetTop); // 当在divname上点下鼠标发生并且鼠标在指定的元素中移动...= div_x+"px" // 当鼠标松开时的事件,移动的div根据if判断坐标位置，让div符合要求的div交换位置。
他们之间用宫格隔开 我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1 常用的两个伪类选择器 伪类选择器都是用:连接的 类名:nth-child(N):先确定位置，再筛选选择器 在同一结构下都是相同选择器时使用...类名:nth-of-type(N):先确定选择器，在匹配位置 在同一结构下不全是相同选择器时使用 举例 div> 不起作用--> p:nth-of-type(3){ color:red } 不起作用--> 二.后代(子代)选择器 后代选择器: CSS语法:上一级标签他所有的后代用宫格进行连接 子带选择器...相邻选择器:+进行连接,他是找到前者后,在前者后面的相邻的才会选中,如果没相邻他会接着找第二个前者 注意 选择器放置位置前与放置位置后,会有影响有点类似正则匹配先匹配到第一个然后匹配第二个 他所改变的是他们后者而不是两个都改变
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
