精华内容
下载资源
问答
  • 以上两种组件中,都是将背景完全填充到父级容器,区别在于模态框通常是背景填满屏幕,通常使用 position: fixed; 用于定位,而加载器更多用于将其背景布满父级容器,通常使用 position: absolute; 定位。 通过 CSS ...

    引入

    在前端界面设计中,会有那么一些布局,需要占满整个父级容器,比如:

    • 模态框(Modal)的背景

      模态框

    • 加载器(Spinner)的背景

      Loading

    以上两种组件中,都是将背景完全填充到父级容器,区别在于模态框通常是背景填满屏幕,通常使用 position: fixed; 用于定位,而加载器更多用于将其背景布满父级容器,通常使用 position: absolute; 定位。

    通过 CSS position 属性实现填满父级容器

    为了实现填充父级的需求,从正常的盒子模型的设计逻辑来讲,我们的思路大体上很简单:将子容器的高度、宽度设置为和父级一致

    围绕这个核心思路,我们可以尝试设置 CSS 属性: width: 100%; height: 100%;, 但在 CSS 中,% 这个单位仅用于用于参考父级已设置的宽度或高度,换句话说,如果父级容器并没有设置宽度或高度,子容器设置的 100% 并不能产生相应的作用,而在实际的 UI 布局中,固定父级容器高度的情况是很少出现的,大部分都是由内容将父级容器给撑高,而这种情况下子级容器并不能通过设置 height: 100%; 来将高度设置为和父级一致。

    如果使用 position: fixed 定位,width: 100%; height: 100%; 是可以设置高度和宽度布满屏幕的,不过需要通过 left:0;top:0; 调整位置刚好和屏幕大小一致。

    既然大部分情况下我们不能使用 height: 100% 来将子容器的高度设置为和父级一致,那我们应该怎样来填充父级空间呢?

    答案是通过 left, top, right, bottom 这四个属性。

    关于这四个属性,我们都知道是配合 position 使用的,并且会随着 position 设置的值不同,有着不同的特性:

    • position: static:无效
    • position: fixed:参考整个屏幕进行定位
    • position: relative:参考自己进行定位
    • position: absolute: 参考设置了 positionstatic 的最近一个父级进行定位

    通常我们都通过使用其中两个非对立的属性来进行定位,比如 left:0; top: 0;position: fixed 中表示该容器对齐屏幕的左上角。我们可以通过类似的写法对齐右上角,右下角,或者是左下角。

    那如果我们设置一组对立的定位呢,比如在 position: fixed 的情况下设置 left: 0; right: 0;,在对该容器设置了指定 widthheight 的情况下,我们会发现,该容器对齐在屏幕的左侧,right: 0 似乎并没有任何作用,在设置上下对立的定位 top: 0; bottom: 0; 时,该容器会对齐在屏幕的上方,仿佛 bottom 也没有生效。

    细心的同学肯定注意到了,这里有个前提条件:对该容器设置了指定 widthheight,如果我们去掉容器的高度和宽度并设置 left: 0; right: 0; top: 0; bottom: 0;,那么神奇的事情发生了,该容器铺满了整个容器!那如果使用 position: absolute 呢,效果是显而易见的,铺满了整个父级元素(前提是父级元素设置了 position: relativeposition: fixedposition: absolute)。

    总结一下,如果要铺满父级容器,我们可以将父级容器设置为 position: relative,并且为子级容器设置以下 CSS 属性

    .sub{
        position: absolute;
        width: auto; height: auto;
        top: 0; right: 0; bottom: 0; left: 0;
    }
    

    关于 position 中设置对立属性的思考

    既然我们可以通过设置对立属性为 0,让没有指定高度或宽度子级容器铺满父级容器,那么我们是不是也可以通过设置对立属性为其它值从而拉扯子级容器的高度或宽度呢?

    答案是肯定的,只要子级容器没有指定高度或宽度,我们都可以设置对立属性为任意值从而拉扯其容器高度或宽度

    例子:

    1. 设置子容器高度为父级容器高度减去 100px ,宽度和父级一致并且垂直居中显示
       .sub{
           position: absolute;
           width: auto; height: auto;
           top: 50px; right: 0; bottom: 50px; left: 0;
       }
      
    2. 设置子容器宽度比父容器宽 120px,左侧超出 20px 右侧超出 100px,高度与父容器一致
       .sub{
           position: absolute;
           width: auto; height: auto;
           top: 0; right: -100px; bottom: 0; left: -20px;
       }
      

    原文转自 [CSS] Position 用法进阶01:匹配父级容器空间 | 苍石居 未经允许禁止转载

    展开全文
  • 引入在前端界面设计中,会有那么一些布局,需要占满整个父级容器,比如:模态框(Modal)的背景加载器(Spinner)的背景以上两种组件中,都是将背景完全填充到父级容器,区别在于模态框通常是背景填满屏幕,通常使用 ...
    6934d9332bc75de336ea9a6b59bca63a.png

    引入

    在前端界面设计中,会有那么一些布局,需要占满整个父级容器,比如:

    5b39e64decca0d9940239076d30c3b1b.png

    模态框(Modal)的背景

    d39d14e2e74004845f4fe88cfaec44a6.png

    加载器(Spinner)的背景

    以上两种组件中,都是将背景完全填充到父级容器,区别在于模态框通常是背景填满屏幕,通常使用 position: fixed; 用于定位,而加载器更多用于将其背景布满父级容器,通常使用 position: absolute; 定位。

    通过 CSS position 属性实现填满父级容器

    为了实现填充父级的需求,从正常的盒子模型的设计逻辑来讲,我们的思路大体上很简单:将子容器的高度、宽度设置为和父级一致

    围绕这个核心思路,我们可以尝试设置 CSS 属性: width: 100%; height: 100%;, 但在 CSS 中,% 这个单位仅用于用于参考父级已设置的宽度或高度,换句话说,如果父级容器并没有设置宽度或高度,子容器设置的 100% 并不能产生相应的作用,而在实际的 UI 布局中,固定父级容器高度的情况是很少出现的,大部分都是由内容将父级容器给撑高,而这种情况下子级容器并不能通过设置 height: 100%; 来将高度设置为和父级一致。

    如果使用 position: fixed 定位,width: 100%; height: 100%; 是可以设置高度和宽度布满屏幕的,不过需要通过 left:0;top:0; 调整位置刚好和屏幕大小一致。

    既然大部分情况下我们不能使用 height: 100% 来将子容器的高度设置为和父级一致,那我们应该怎样来填充父级空间呢?

    答案是通过 left, top, right, bottom 这四个属性。

    关于这四个属性,我们都知道是配合 position 使用的,并且会随着 position 设置的值不同,有着不同的特性:

    • position: static:无效
    • position: fixed:参考整个屏幕进行定位
    • position: relative:参考自己进行定位
    • position: absolute: 参考设置了 positionstatic 的最近一个父级进行定位

    通常我们都通过使用其中两个非对立的属性来进行定位,比如 left:0; top: 0;position: fixed 中表示该容器对齐屏幕的左上角。我们可以通过类似的写法对齐右上角,右下角,或者是左下角。

    那如果我们设置一组对立的定位呢,比如在 position: fixed 的情况下设置 left: 0; right: 0;,在对该容器设置了指定 widthheight 的情况下,我们会发现,该容器对齐在屏幕的左侧,right: 0 似乎并没有任何作用,在设置上下对立的定位 top: 0; bottom: 0; 时,该容器会对齐在屏幕的上方,仿佛 bottom 也没有生效。

    细心的同学肯定注意到了,这里有个前提条件:对该容器设置了指定 widthheight,如果我们去掉容器的高度和宽度并设置 left: 0; right: 0; top: 0; bottom: 0;,那么神奇的事情发生了,该容器铺满了整个容器!那如果使用 position: absolute 呢,效果是显而易见的,铺满了整个父级元素(前提是父级元素设置了 position: relativeposition: fixedposition: absolute)。

    总结一下,如果要铺满父级容器,我们可以将父级容器设置为 position: relative,并且为子级容器设置以下 CSS 属性

    .sub{    position: absolute;    width: auto; height: auto;    top: 0; right: 0; bottom: 0; left: 0;}

    关于 position 中设置对立属性的思考

    既然我们可以通过设置对立属性为 0,让没有指定高度或宽度子级容器铺满父级容器,那么我们是不是也可以通过设置对立属性为其它值从而拉扯子级容器的高度或宽度呢?

    答案是肯定的,只要子级容器没有指定高度或宽度,我们都可以设置对立属性为任意值从而拉扯其容器高度或宽度

    例子:

    1. 设置子容器高度为父级容器高度减去 100px ,宽度和父级一致并且垂直居中显示
     .sub{     position: absolute;     width: auto; height: auto;     top: 50px; right: 0; bottom: 50px; left: 0; }
    1. 设置子容器宽度比父容器宽 120px,左侧超出 20px 右侧超出 100px,高度与父容器一致
    .sub{     position: absolute;     width: auto; height: auto;     top: 0; right: -100px; bottom: 0; left: -20px; }
    展开全文
  • 根据后代子key,匹配到对应最父级key; 处理后的后辈集合: getParentKey() { let parentKey = ""; let folderId = form.folderId;//当前子id let formFolders = formFolders;//树数据 let list = []; let ...

    js-树形结构根据子类id获取到最父级对应id

    数据结构:
    在这里插入图片描述
    根据后代子key,匹配到对应最父级key;
    处理后的后辈集合:
    在这里插入图片描述

      getParentKey() {
          let parentKey = "";
          let folderId = form.folderId;//当前子id
          let formFolders = formFolders;//树数据
          let list = [];
          let parentsKeys = [];
          // 把顶级+子级都整合起来;
          let fn1 = (arr, childIds) => {
            childIds.push(arr.key);
            if (!arr.isLeaf && arr.children) {
              arr.children.forEach((item) => {
                fn1(item, childIds);
              })
            } else {
              return childIds;
            }
            return childIds;
         } 
          for (let i in formFolders) {
            let obj = {
              id: formFolders[i].key,
              childIds:[],
            }
            let childIdDatas = fn1(formFolders[i], obj["childIds"]);
            obj["childIds"] = childIdDatas;
            parentsKeys.push(obj);
          };
          parentsKeys.forEach((item, index)=>{
            if (item.childIds.includes(folderId)) {
              parentKey = item.id;
              return;
            }
          })
          return parentKey
        }
    
    展开全文
  • <p>I've always programmed Android with Eclipse and decided to start migrating to <a href="https://en.wikipedia.org/wiki/Android_Studio" rel="noreferrer">Android Studio</a>. I decided to use the ...
  • 然后前端需要将两者进行匹配,然后追加el-tree树形中。其中子级全选时,父级也会选中,但是由于el-tree的设计原理,当子级未全选中时,父级是不会选中的(此时为半选),因此,此时在传给后端的list中是没有父级的,...

    elementUI中el-tree的处理数据时半选框父级选中问题(让数据中子级不全选中时,父级不选中即半选)

    1.业务需求:
    • 在后台权限管理系统中,在菜单管理模块中分配当前角色的菜单权限时,菜单权限的初始状态获取时,后端返回数据结构一般是一个菜单的树形结构与一个菜单选中的list列表。然后前端需要将两者进行匹配,然后追加到el-tree树形中。其中子级全选时,父级也会选中,但是由于el-tree的设计原理,当子级未全选中时,父级是不会选中的(此时为半选),因此,此时在传给后端的list中是没有父级的,由于后端的需要,此时是需要将半选的父级也传给后端,注意,在获取初始菜单树状态的list中,半选状态的父级也返回回来了,此时如果直接渲染的话,由于el-tree的设计原理,如果有父级那么就选中所有子级,此时,未全选中的子级就会被全选,这就是问题所在。
    2.需求分析:
    • 个人觉得el-tree这种设计原理不太友好,因为做递归去处理这种属性结构的数据是很难受的~~~,一般情况下是只要有子级选中那么父级就选中,子级全不选中则父就不选中。而el-tree设计是只有子级全选中时父级才选中,子级未全选时父级为半选(此时其实为未选中),当子级全不选时父级为不选中。
    3.解决方案:
    • 好了,直奔主题!首先在菜单权限树形选择时,半选状态的父级的ID是需要加入list中的,那么此时将halfCheckedKeys加入list即可:
    // 节点选中状态变化
          changeNowNode(data, obj) {
            // 获取选中的key
            this.$nextTick(() => {
              this.setCheckedList = this.$refs.dutytree.getCheckedKeys()
              if (obj.halfCheckedKeys.length>0) {
                obj.halfCheckedKeys.forEach(item=> {
                  this.setCheckedList.push(item)
                })
              }
            })
          },
    
    • 将上面选中的list传给后台时,然后在获取菜单权限初始状态时,我们会得到一个菜单树形结构数据与一个选中的菜单ID列表,然后根据递归进行匹配。注意,此时的一个问题是,如果是半选状态的父级,它的ID也会在list中,此时我们匹配完去渲染是就会存在只要有父级,那么它下面的所有子级都会选中的问题,此时我们要的效果是父级半选,子级不全选,所以在递归函数中进行如下改造:
    findFunc(permissionsList, LimitData) {
            let that = this
            // 退出递归标志
            let isExit = false
            for (let j = 0; j < LimitData.length; j++) {
              if (LimitData[j].children.length>0) {
              // 如果有children,那么说明它是父级,此时不将他加入setChecked
                isExit = false
                that.findFunc(permissionsList, LimitData[j].children)
              } else {
              // 当它是子级时再进行匹配
                for (let i = 0; i < permissionsList.length; i++) {
                  if (LimitData[j].sysResourcesId == permissionsList[i]) {
                    // 菜单权限匹配
                    that.setChecked.push(LimitData[j].sysResourcesId)
                  } else {
                  // 如果是子级,且没有匹配成功,则设置标识
                    isExit = true
                  }
                }
              }
            }
            if (isExit) { // 循环完成后进行判断
              return false
            }
          },
    
    展开全文
  • $(this).parent() //取当前元素的父级 $(this).parent().next() //取父元素的同级元素 $("selector").children() 获取匹配元素的子元素集合,以数组返回(只考虑子元素,不考虑子元素以下的后代...
  • C4D 变形器笔记

    2020-07-05 17:01:13
    注意勾选匹配到父级 1扭曲 模式 (1)限制框内会受影响 (2)框内框外一点都不熟影响 (3)无限都受影响 保持纵轴长度--物体长度不变 衰减 影响的衰减范围内的物体 设置平层级,也可对物体产生影响 ...
  • 业务场景是需要根据json来注入嵌入的iframe 表单的值,其中json的key就是...就根据json的value来匹配对应的单选的值的那个元素,再设置选中,但在设置单选框选中这一环节卡住了,虽然获取了单选框对应值的元素,但...
  • 这个问题困扰了我好长时间,网上也找不解决方法 1.把子级设置成父级的编号格式 2.用Tab键或右键菜单中的“增加缩进量“使它深入一级,此时编号是正确的,但是格式和级别与父级标题相同,可能不是我们想要的效果...
  • 先举个例子,jquery获取父节点jquery获取父元素我们的目的是通过 id 为 item1 的便签a取 class 为 parent1 的ul元素,有以下几种方法:1、parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。...
  • Python基础(五)

    2019-03-14 20:08:17
    伪类选择器 s1:hover 当鼠标悬停在s1上时触发css 使用技巧: s1:hover s2{…} s1:hover &gt; s2{…} ...s1:first-child{…} 匹配s1父级里面的第一个元素s1 先找到s1的父级 找到父级里面...
  • 使用嵌套路由在父级不能用exact, 因为当你匹配路由时路径加了子路由,导致父级路由路径不匹配从而父子组件都显示不了。例如你这个/user/details 使用了exact,当路径变为/user/details/msg是匹配/user/details...
  • 嵌套的路由中,子级的Link跳转到父级时,页面无法整个渲染到父级。 原因:某一级的路由用了Router组件,导致内部Link的时候无法将整个页面渲染到“/” 解决方法:全局一个Router。 子级的兄弟路由无法匹配 ...
  • 有name存在的是父级数据,再根据deptCode相同来匹配到同类子集的数据放到父级里面 this.getFatherData = this.list.filter((ele,index) => { console.log(ele) return ele.name }) ...
  • 介绍了Spring Batch生成XML文件的基本开发过程;包括数据的读取,数据的匹配处理,数据的写入。介绍了在开发过程中遇到的几个问题及其项目开发中的解决方案,如多级父级节点的设置等。
  • csp 201809-3 元素选择器

    2020-06-09 12:01:01
    做法 设置结构体数组保存文档元素,id属性,级数。每次读入一行,利用string的find...多级匹配采用从后往前(从子级祖先级)匹配。刚开始想着从祖先级开始匹配,找到一个结果就保存,然后从这些结果中,找匹配的子...
  • 知识点前面也讲,用Xcode设计iOS的界面有多种...1、匹配父级容器 2、分割父级容器 3、复杂布局适配 极客学院这里写链接内容用Storyboard的屏幕适配(AutoLayout)视频 UI布局(一)初探Size Class (可选) Sw
  • Vue对象的数据无法绑定html...网上百度了很多方法,问题的根源是页面上下文不匹配,即层面不同导致的,在页面的标签定义的属于父级页面的,在弹出模态框时,又开启了子级页面,故vue无法绑定。 解决 vue对象定义位
  • 今天做个预览图片的小控件,用到了...可考虑动态调整 Maximum 属性,以匹配与像素大小或显示的行数成比例的滚动条父级的大小。 注意 滚动条的最大值不能通过运行时的用户交互而达到。可达到的最大值...
  • Jquery之节点操作

    2020-03-15 21:54:05
    1、Jquery的DOM操作 1.1apend和appendTo操作... apppendTo是把要追加的元素追加到父级;ulObj.append(liObj) append是父级元素追击子级元素; liObj.appendTo(ulObj) append和appendTo都是向末尾追加结点 <!DO...
  • 近期面试题整理

    2018-02-01 16:01:04
    面试题目,结合网络上的内容参考并总结,会持续更新到找到工作为止,如果有疑问或者错误,欢迎提出. ...而从右向左匹配是先匹配最末端的选择器,这样再次匹配的时候只需要去找匹配到的选择器的父级就可以...
  • 父级页面是列表页,当父级页面点击搜索新闻时,弹出子窗口(type:2),并在子窗口中进行关键字的输入,由ajax提交到后台模糊搜索匹配到对应的字段,ajax请求成功后并关闭当前打开的子窗口,关闭子窗口的同时将查询到...
  • 选择从右左依次解析匹配,所以后代选择器会去找它的所有父级, 而子代选择器只会选择直接的父级;减少匹配次数,提高效率 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎...
  • html解析-xpath

    2021-01-18 15:38:32
    pip install lxml from lxml import etree ...全文匹配,匹配不到返回[], 匹配到的 [element, element] / 表示往下一层 //忽略任意层父级目录 /body/ul/li/a print(dom.xpath(’//a’)) print(dom.x
  • js事件委托

    2018-03-14 06:11:16
    1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并...A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的, 优点是: (1)可以...
  • 今天第一次看到closest方法,以前也从来没用过。 该方法从元素本身开始往上查找,返回最近的匹配的祖先元素...2、closest向上查找,知道找到一个匹配就停止查找,parents一直查找根元素,并将匹配的元素加入集合 ...

空空如也

空空如也

1 2 3 4 5
收藏数 100
精华内容 40
关键字:

匹配到父级