一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 ---- 1、子绝父相 这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ; 子元素使用了 绝对定位...lang="en"> 鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 /* 最外层的父容器元素...*/ .box { /* 子绝父相 : 子元素需要使用绝对定位相互覆盖 父元素必须设置相对定位 */ position: relative; /* 内存尺寸 300...开始时是隐藏的 鼠标移动到 a 链接后显示该元素 */ .one { /* 先设置隐藏元素 */ display: none; /* 设置相对定位 可以显示在父容器任意位置 *...class="box"> div class="one">div> div class="two">div> div> div> <
如何容器透明，内容不透明 方法1 .outer { width: 200px; height: 200px; background: #000;...--我是透明的容器-->div> div class="inner">我是不透明的内容div> // 原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者...position绝对定位等方式覆盖到容器层上 方法2 .outer { width: 200px; height: 200px; background-color...: rgba(0,0,0,0.2); } div class="outer"> 我是不透明的内容 div> //...class="test">以图换字之超小字体+文本全透明法div> // 使用超小字体和文本全透明法。
在设计前端页面时，常常会遇到这种情况：可滚动容器的边界并非父容器的边界，导致子元素溢出造成裁切，让页面产生比较怪异的视觉效果（左图） 添加遮罩之后，效果自然了许多（右图） 纯色遮罩 以上图的这种情况举例...创建两个元素 .top-mask 、.bottom-mask 来作为遮罩，遮罩的颜色与父容器背景一致，使用 absolute 定位。...所以需要在可滚动容器外部再嵌套一层 relative 定位的元素，使两个遮罩根据其位置定位，最终的结构大概是下面这样的： div> div class="bottom-mask">div> div class="scrollable-container">...蒙版覆盖在可滚动容器之上，需要使用 pointer-events: none; 避免影响滚动操作。 仅适用于父容器为纯色的场景，在父容器有透明度、有背景图案或渐变时，遮罩会露馅。
子容器浮动后，父容器扩展问题 问题： 子容器都float以后，父容器没有设定高度,父容器将不会扩展 解决： 只需要添加一个clear:both的div，代码如下： div style="border:...让层显示在FLASH之上 问题： 想让层的内容显示在flash上 解决： 把FLASH设置透明 1、... div> 解决： left的定位错误问题 1、给父层设置zoom:1触发layout。...2、给父层设置宽度width bottom的定位错误问题 1、给父层设置zoom:1触发layout。 2、给父层设置高度height 43. ...子容器宽度大于父容器宽度时，内容超出 问题： 子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展
(父级元素触发了BFC) 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) margin不会传递给父级(父级触发BFC) 属于同一个BFC的两个相邻元素上下margin会重叠 普通文档流布局:...浮动的元素是不会被父级计算高度 非浮动元素会覆盖浮动元素的位置 margin会传递给父级元素 两个相邻元素上下的margin会重叠 开发中的应用 阻止margin重叠 可以包含浮动元素 —— 清除内部浮动...(清除浮动的原理是两个 div都位于同一个 BFC 区域之中) 自适应两栏布局 可以阻止元素被浮动元素覆盖 2....:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置zoom:1。...在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
p> div> div> 在顶部有一个img类的div，它是最大的容器。...然后在其内部给要渲染的图像设置类名image__img; 同级还有一个类名为image__overlay的div，是用于鼠标悬停时显示的，在这里面，我们可以把任何文本相关的东西覆盖在原图之上 编写CSS...，以及 image__overlay 的绝对定位属性，然后将 image__overlay 的 top 和 left 设为 0，并将宽高设为 100%，即与父容器重叠。...同时设置一下黑色背景色以及透明度，做一个隐约的效果。...我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。
，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？ ...3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. ...三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、...，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？ ...3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a.
不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。...最简单的初始化方法就是：*{ padding：0；margin：0；} 11、如何居中div？如何居中一个浮动元素？ 确定容器的宽高，例如宽400px、高200px的div.设置层的外边距。...解决方法是给父级添加 position：relative （5）PNG图片半透明问题。...px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是国定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...55、透明度具有继承性，如何取消透明度的继承？ 使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。
目录前言问题描述解决方案方案一：在子组件中添加 prop 进行条件判断方案二：在子组件外部覆盖一层透明遮罩总结前言你好，我是喵喵侠。在实际开发中，我们有时候会遇到需要控制子组件行为的需求。...比方说我最近遇到一个问题，我需要在特定场景下，在父页面禁用子组件的点击事件，包括不限于子组件本身以及子组件内部子组件的点击事件。...在子组件外部覆盖一层透明遮罩。方案一：在子组件中添加 prop 进行条件判断首先，在父组件中定义 prop 来传递选择框的状态。...方案二：在子组件外部覆盖一层透明遮罩在父组件中，通过动态显示透明遮罩来阻止点击事件。...而通过在子组件外部覆盖一层透明遮罩，可以保持子组件的独立性和复用性，且实现简单，而且很巧妙。综合考虑，方案二更为灵活和实用，不需要改动子组件代码，适合大多数场景，而且实现起来非常快。
容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。 7，浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。...： 16px*1.5em = 24px class为id2的div字体大小继承自父元素id1： 24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em...如果是随着父容器或者是整体页 面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置； （2）字体尺寸尽量使用em,rem 为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层 以上的字体相对尺寸的设置...如何设置透明度？...--遮罩层--> div class="showMask"> 我是遮罩层 div> div>
一个弹窗组件通常包含两个部分，分别是遮罩层和内容层。 遮罩层是背景层，一般是半透明或不透明的黑色。 内容层是放我们要展示的内容的容器。...类 modal-bg: 遮罩层 类 modal-container: 内容层容器 类 modal-header: 内容层头部 类 modal-main: 内容层主体部分（用来展示内容） 类 modal-footer...: 内容层脚部 属性 v-show: 控制弹窗的展示与关闭 属性 title: 标题 方法 hideModal: 点击取消的回调函数 方法 submit: 点击确认的回调函数 插槽 slot: 用来展示内容...定义完 HTML 结构，还得定义组件的 props 属性，用来接收父组件的传参，以方便在父组件通过属性来控制弹窗。...假设这个组件的文件名为 Modal.vue，我们在父组件里这样调用 （假设父组件和弹窗组件在同一文件夹下）。
div class=”img-box”> 未配置position ,所以默认为position=static; 不符合非static 继续寻找div>的父节点 ，， 到...30px; top: 50px; color: yellowgreen; } .img-box { position: relative; } 但有时固定文字或图片会被其它元素覆盖...第一步：完成半透明背景 半透明背景覆盖整个页面 div class="mask">div> .mask { position: fixed; left: 0; right...: 0; top: 0; bottom: 0; /*通过fixed 再设置上下左右为 0 ，达到覆盖全屏*/ background-color: rgba(0,0,0,0.7....modal > img { display: block; width: 200px; margin: 39px auto; } 元素居中方法 1.内部是行内元素，可以在父容器使用
解决非浮动元素被浮动元素覆盖问题 解决外边距垂直方向重合的问题 4....指定容器display: flex即可。...align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。...PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。...清除浮动的方法 参考回答： clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：{clear:both;height:0;overflow:hidden;} 给浮动元素父级设置高度
第二个值高度，如果只是设置一个，第二个值auto percentage 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto cover 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小...display 属性的值为 flex 将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 div class="flex-container"> div class="flex-item...display 属性：display:flex;开启弹性盒，属性设置后子元素默认水平排列 flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置 flex-direction...此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象 当所有元素同时浮动的时候，会变成水平摆放，向左或者向右 当容器不足以横向摆放内容时候，会在下一行摆放 清除浮动...浮动副作用： 当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动 浮动元素会造成父元素高度塌陷 后续元素会受到影响 div class="box">div> div class=
height 包含 padding，border，与怪异盒子模型表现一致 唯一离不开box-sizing:border-box的就是:原生普通文本框和文本域的100%自适应父容器宽度...Inline还是block也就是说替换元素的宽度却不受display水平影响 而/就是替换元素,修改的display为block是无法让尺寸100%自适应父容器...通过设置的width为100%，自适应父容器。...---- z-index z-index负值 「z-index是支持负值的」,z-index负值渲染的过程就是一个「寻找第一个层叠上下文元素的过程」,然后层叠顺序止步于这个层叠上下文元素 要实现「父元素覆盖子元素...> 块1 div> div> 块2 div> div> 块3 div> inline-block // 父元素 设置水平居中
背景颜色background-color 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb 背景图片background-image 背景图片的大小可以和容器大小不一样 背景图片不会占位 如果容器大...opacity opacity:0.3 透明度的值可以使0到1之间的数字，0代表透明，1代表完全不透明 透明的元素只是看不见，但是还占据文档流。...，绝对定位（相对于父类） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute绝对定位，这条语句的作用加你个元素 从文档流中拖出来，然后使用left,right,top,bottom...属性相对于其最接近的一个 具有定位属性的父包含块进行绝对定位。...relative #div{ width: 200px; height: 200px; border: 2px red solid; position: relative
比如我们相对一些 UI 层的内容做缓存处理，像如下场景。...hooks 不再像我们平时那样只负责逻辑的处理，此场景下，hooks 完全充当了一个视图容器。...2.jpeg 这个模式下，对自定义 hooks 理解打破了传统观念，可能这种由逻辑层到视图层的转化，会让一部分同学不适应，不过这些不重要，我们要有一个思维上的转变，这才显得重要。...需要组合的容器组件。 mergeProps 需要合并的新的 props 。 useComposeHooks 可以多个嵌套使用。...编写 sonSay （子对父组件通信），listenSonSay （父监听子组件），fatherSay（父对子组件通信），listenFather（子监听父组件）方法。
问题来源于实践 这段时间做了一个项目优化，对于原有的内容进行了重新设计实现，其中一项就是对于label标签添加hover层进行解释说明，最常用的办法及时label的容器设置relative，然后hover...层作为它的子元素设置absolute，然后在使用label的hover伪类来控制hover层的显示和隐藏，这其中一个要求及时hover层必定要求能够遮住页面中其他的元素，所以最常用的办法是设置它的背景颜色...，然后让它的z-index处于合理的位置，一切都是这样设计的，但是最终的效果却出现了hover层设置bg为#fff的时候，hover层显示时还是会把底部内容给透出来，第一反应就是opacity设置为1，...但是还是没有效果（因为背景为白色，所以有点坑） 最终问题定位在父元素的opacity属性设置为不为1的值导致的，这样即使hover层（作为子元素）设置了bg和opacity为1，也依然会存在一定的透明度...="child"> this is child dom with opacity :1 div> div>
// 不能穿透父级容器的 z-index 父级容器的 z-index 为 auto 的时候，红色盒子穿过了父级容器出现在了父级容器的背后（被父级容器遮挡住）。当父级容器的 z-index 为 0 的时候，红色盒子无法穿过父级容器。...同样的，以上两段代码基本一样，都是有 3 层的 DIV 盒子。最外层是一个深蓝色盒子，中间一层容器盒子，最下面一层红色及灰色盒子。...当第二层的容器盒子升级为层叠上下文时，红色盒子及灰色盒子的 Z 轴层级受制于第二层的容器盒子。 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。...当元素处于同一层叠上下文内时可按照如下规则进行层叠判断。 ? 当元素的层叠等级一致、层叠顺序也相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。
云服务器
ICP备案
对象存储
实时音视频
云直播
