P和div同为块元素，为什么P不能做div的父元素？ 执行结果： 可以在控制台看到这样一段信息： div像一条分割线一样，把无辜的 P标签 一分为二 是什么原因导致的呢？...W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的嵌套规则，如下： 最基本：内联不能嵌套块级，块级可以嵌套内联元素 div>.../span> 错误（内联嵌套块级） 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素 这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。...所以说p里面不能嵌套div，就是我犯的错误。...块级元素与块级元素并列、内联元素与内联元素并列 div>div> 正确 div>< /span
relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 相对定位: 当元素的position属性值设置为relative...fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 - 相对定位：...> 4.粘滞定位 当元素的position属性设置为sticky时则开启了元素的粘滞定位 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定 元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致，...="box2">div> div> 5.3 元素的层级 对于开启了定位元素，可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数
其实我们再想一想，既然我们是要脱离父组件结构来实现这个能力，那么我们没有必要非得使用Portals，CSS的position定位不是也可以帮助我们将当前的DOM结构脱离文档流，也就是说我们没必要将目标组件的...那么此时我们再将目光聚焦到fixed上，fixed是相对于视口来定位的，那么也就不需要像是absolute那么强的要求了，即使是父元素存在relative/absolute也没有关系。...-- 父级元素的`z-index`的层次比同级元素低 即使`fixed`元素`z-index`比父级高 也会被父级同级元素遮挡 --> div style="position: absolute;...定位是无法做到完全脱离父组件的，即使我们能够达到脱离文档流的效果，也会因为父组件的样式而受到影响，特别是在组件库中，我们作为第三方组件库的话是完全没有办法控制用户设计的DOM结构的，如果仅仅采用脱离文档流的方法而不实际将...简化交互逻辑: MouseEnter和MouseLeave事件的特性使得处理鼠标移入和移出的交互逻辑变得更直观和简化，我们可以仅关注元素本身的进入和离开，而不需要处理父元素或子元素的事件，这种简化有助于提高代码的可读性和可维护性
一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 ---- 1、子绝父相 这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ; 子元素使用了 绝对定位..., 父元素必须使用 相对定位 ; 2、显示隐藏元素对象 使用 display: none; 样式 隐藏元素 , 使用 display: block; 样式 显示元素 ; 3、鼠标经过样式设置 鼠标经过...> /* 最外层的父容器元素 */ .box { /* 子绝父相 : 子元素需要使用绝对定位相互覆盖 父元素必须设置相对定位 */ position...鼠标移动到 a 链接后显示该元素 */ .one { /* 先设置隐藏元素 */ display: none; /* 设置相对定位 可以显示在父容器任意位置 */ position...: 鼠标移动到元素上方后的效果 :
设置了position:sticky的元素并不会脱离文档流元素在区域内，元素不受定位的影响（top、left等设置无效）元素所在窗口发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left...另一种场景是在一个盒子中高度固定，窗口有滚动的情况下，实现某元素一直保持在窗口的某个位置三、注意事项父元素高度必须大于sticky元素的高度不设置父元素高度的时候，父元素不能使用除了overflow的visiable...属性，比如auto、scroll设置父元素高度，子元素高度超过父元素高度，父元素使用auto、scroll等属性，此时且出现了滚动，sticky依然是有效设置父元素高度，子元素高度没有超过父元素高度，此时没有出现滚动...，sticky仅在父元素高度内有效sticky元素需要设置top、bottom、left、right的值四、案列这是本人的测试案例，包含了使用场景和注意事项中的所有条件，可以根据自己的需求进行更改div class="sticky">粘性定位!
，定位基准是viewport 使用场景：烦人的广告 和 返回顶部按钮   5.sticky：粘滞定位，不好描述，直接举例    的层叠上下文由满足以下任意一个条件的元素形成： 1.文档根元素（）； 2.position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto...的元素； 3.position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）； 4.flex (flexbox) 容器的子元素...13.在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。...每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠
粘性定位元素相当于position:relative和position:sticky的结合体，受限于父级元素，在不同的条件下呈现出不同的页面效果 [2. 如何使用sticky？]...sticky元素效果完全受限于父级元素，使用条件： sticky元素的父元素的overflow只能设置为visible，否则会导致没有粘滞效果 sticky元素的父元素不能设置固定的高度，否则会导致没有粘滞效果...sticky满足条件变成fixed定位时，与标准fixed元素不一样，不会脱离文档流 sticky 定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果 同一个父级元素中的sticky元素，如果定位值相等...因此我们需要注意的是，在监听页面滚动的过程中，需要将定位父级元素的偏移量也计算在内，可以如下写法： //获取当前元素的offsetTop getOffsetTop(obj) {...生命周期函数中添加监听事件滚动的事件： mounted() { /**通过给变成固定定位的元素添加一个同等高度的父元素，防止该元素变成固定定位时，脱离文档流导致的页面抖动 */ this.tabsHeight
效果： 需求： 1.记录循环滚动； 2.每组记录之间不能有留白； 3.每条记录上移到容器的顶部时要停顿一下； 4.鼠标移入容器时停止滚动，移出时继续滚动。...我的思路是：当最顶的记录完全移出容器时，把该记录移动到所有记录的底部 (图很丑但很温柔^_^) 下面是实现：(ie6、7、8，chrome都OK！)...： （1）offsetTop指的是元素上外边框离父容器上外边框的Y轴距离（单位px）；style.top指的是元素上外边框离自己原来位置上外边框的Y轴距离（单位px）。...因为offsetTop为只读，最终控制元素位置要用style.top，而两者表达的含义又有所区别，所以这里我直接用style.top来获取定位和设置定位。...2.因为要将头元素移动到其他兄弟元素的后面，这个移动过程会使其他兄弟元素的定位发生变化，均向上移动了头元素高度的距离，所以要为各个兄弟元素的style.top加上头元素的高度。
2、涉及到的主要知识 offsetLeft: 获取当前对象与父元素的左距离 offsetTop: 获取当前对象与父元素的上距离 offsetWidth: 获取元素（含边框）的自身宽度 offsetHight...: 获取元素（含边框）自身高度 scrollLeft: 获取元素的左滚距离 scrollTop: 获取元素的上滚距离 event.clientX: 元素的X坐标 event.clientY: 元素的Y坐标...onmouseover: 当鼠标指针位于元素上方时，会发生mouseover事件 onmouseout: 当鼠标指针从元素上移开时，发生mouseout事件 onmousemove: 当鼠标指针在指定的元素中移动时...，就会发生mousemove事件 3、结构样式搭建 a).实现控制区.box，与显示区左右布局; b).在控制区中，拖动块move使用position定位于box之上; 具体代码： <!...- (mov.offsetWidth / 2); //获取移动时move块距父级的顶部距离 4.临界值判断，当move的移动距离超出了box的范围时，需要限制其最大移动值与最小移动值。
，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。...设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、...亦即如果你设置了top:50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...除了 visible 以外的值 (hidden、auto、scroll) BFC的应用 1.BFC 可以包含浮动的元素（清除浮动） 一般情况下，我们在写了float之后，父元素会塌陷，如果不想让父元素塌陷的话...如此就可以做到不用特意清除浮动，父元素也不会塌陷。
jquery-1.10.1.min.js"> /* mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件...}); $(".father").mouseout(function () { console.log("father被移出了..."); }); */ /* mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件..."); }); }); div class="father"> div class="son...">div> div>
，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏 （1）元素显示使用display:block属性，隐藏使用display:none属性 2、二级菜单显示在一级菜单的右侧 （1）给一级菜单和二级菜单共同的父元素设置相对定位...（position: relative） （2）给二级菜单设置绝对定位（position: absolute），并设置左侧位移（left）的值为一级菜单的宽度，上放位移（top）的值为0 3、一级菜单的文字和二级菜单的文字水平居中显示...规范 1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求 2、要求HTML代码和CSS代码书写、命名符合规范 整体 1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时...*/ line-height: 28px; /*设置行高为父布局的高度, 为了垂直居中*/ width: 100%; color...: white; text-decoration: none; /* 去掉链接元素文本内容的下划线 */ white-space:
150px; height: 150px; background: blue; } div...class="father"> div class="son">div> div> /* 1.onmouseover...和onmouseenter的区别 onmouseover移入到子元素,父元素的移入事件也会被触发 onmouseenter移入到子元素,父元素的移入事件不会被触发 */.../* 2.onmouseout和onmouseleave的区别 onmouseout移出到子元素,父元素的移入事件也会被触发 onmouseleave移出到子元素,父元素的移入事件不会被触发
top: 50px; } 1-3 Position-absolute(绝对定位) 写为absolute后，改图片将会脱离信息流，其它照片依次向上移动，占据第一张图片位置 MDN解释： 元素会被移出正常文档流...，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并 关键词 ： 最近 和 非static定位 和 祖先元素 步骤 首先获取第一张照片元素 发现是absolute布局 找寻父节点...div class=”img-box”> 未配置position ,所以默认为position=static; 不符合非static 继续寻找div>的父节点 ，， 到...1.内部是行内元素，可以在父容器使用 text-align: center; 2.内部是块状元素，可以在子容器上使用 margin: 0 auto;(如果不是块状元素，需要设置 display: block
root是父元素，一般是有滚动条的元素，其中包含被观察的元素。根据需要，这几乎可以是页面上的任何单个元素。如果不提供该属性，或者该值设置为null，跟元素就是viewport。...父容器是根元素，内部具有目标背景的子容器是目标元素。阈值是一个0、0.5和1的数组。在根元素中滚动时，将出现目标，并且其位置将在按钮上方的输出中报告。...观察者的通常解决方案是用一个定位元素，仅作为观察者的目标元素使用。我喜欢避免使用诸如此类的单一目的的元素，因此我决定修改这个特定的想法。 在此demo中，上下滚动以查看章节标题对各自章节的粘性反应。...该div将被设置为粘性元素并充当容器。用于根据粘性状态设置样式和更改元素的元素是class为sticky-content的div及其子元素。...其余部分是.sticky-content中的常规状态和.active .sticky-content中的粘滞状态样式的混合。同样，您几乎可以在粘性内容div中做任何您想做的事情。
但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性 em是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为...（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。...sticky 属性值有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...清除浮动的方法 参考回答： clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：{clear:both;height:0;overflow:hidden;} 给浮动元素父级设置高度
，只不过鼠标移入现实，鼠标移出消失 放大的图片并不是真正的放大，而是在img标签外套了一个父元素，将img标签的宽高都设置为百分之一百以上，至于放大多少你就设置多少，然后给父元素设置超出隐藏，再设置display...：none让元素隐藏，等到鼠标移入左边大图的时候再显示 至于如何让鼠标移动放大的图片也会移动就是要获取鼠标在元素上移动的位置，用鼠标移动事件触发，然后给放大后的图片设置相对定位然后将鼠标的移动的X轴位置和...Y轴位置分别赋值给大图的left和top 简单来说，放大后的图片本来就存在只不过设置为隐藏，鼠标移入的后再显示，然后获取鼠标移动的位置赋值给大图的相对定位值，这就是放大镜的实现原理 tab切换就更简单了.../img/9.jpg"],nowindex: 0,blocks: "fdj",//相对定位的值positions: {top: 0,left: 0}},methods: {change(index) {..."},move(e) {//将鼠标移动位置赋值给图片相对定位的值，实现鼠标移动图片移动this.positions.top = (e.offsetY * -7.9) + "px";this.positions.left
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。...五、浮动（Float） 浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。... div> 在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。 需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。....clearfix类可以确保父容器包裹住浮动的子元素。...div> div> 内部的绝对定位元素相对于其父元素的右上角进行定位。
这个效果的实现思路其实很简单，就是使用::before和::after给目标按钮添加两个伪元素，然后使用定位让他们重合在一起，再通过改变两者的宽度实现的。...首先是创建两个伪元素，宽高都和目标元素一致，我这里的背景色由于是对按钮本身颜色进行处理得来的，所以给他们设置的背景色是沿用父级背景色，如果你想单独设置这里可以分别设置为自己想要的颜色。...，所以我们需要第一个伪元素的定位以左边为准，从而实现鼠标移入时色块从左往右出现的效果，而第二个伪元素的定位以右为准，从而实现鼠标移出时色块从左往右消失的效果。...这里可以看到，我们在没有给第一个伪元素的初始状态添加过渡效果，那是因为它只需要在从鼠标移出的时候展示动画即可，在鼠标移出的时候需要瞬间消失，所以在初始状态不需要添加过渡效果，而第二个伪元素恰恰相反，它在鼠标滑入的时候不需要展示动画效果...而鼠标移出时第一个伪元素宽度变为0，因为没有过渡效果，所以它的宽度会瞬间变为0，然后展示第二个色块宽度从100%到0的动画效果。
()"> 鼠标移入我 div id="child">或者移入我的子元素div>div> function handleMouseOver() { console.log...('鼠标移入父元素'); } function handleMouseOut() { console.log('鼠标移出父元素'); }接下来是另外两个事件 onmouseenter..."handleMouseLeave()"> 鼠标移入我 div id="child">但不要移入我的子元素div>div> function handleMouseEnter...() { console.log('鼠标移入父元素'); } function handleMouseLeave() { console.log('鼠标移出父元素'); }的元素上触发，而不会影响到其他元素。特别是 onmouseleave，它不会在子元素上触发，也不会冒泡到父元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
