首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

今天为什么会聊到padding-top设置百分比时的参考对象这个话题呢,这还要从一道不那么正经的面试题说起~ 一道不那么正经的css布局面试题 在对面,一本正经的面试官和蔼可亲的说道:我们来道简单的面试题...探究padding-top的秘密 当padding-top的值为百分比时,参考的对象是父级元素的宽度 这句话圈起来,是重点,要考~ 父级容器宽度的100%,实际宽度会受到弹性盒子的影响 */ width: 100%; height: 0; /* calc方法动态计算:padding-top...的值为父级容器宽度的1/2,所以是 (100vw - 20px) / 2 */ padding-top: calc(50% - 10px); } ...最后的秘密 当padding-top、padding-bottom、margin-top、margin-bottom属性设置为百分比时,参考对象都是父级元素的宽度 要记住呀,下回还得考~ 以上就是胡哥今天给大家分享的内容

1.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    父类和子类对象的获取值的方式验证,通过父类属性的方式获取不到值,需要使用get方法

    父类和子类对象的获取值的方式验证,通过父类属性的方式获取不到值,需要使用get方法 静态属性通过类.属性的方式获取,对象获取使用get方法获取 package com.example.core.mydemo.java...String channelName) { this.channelName = channelName; } /** * partnerName: //通过父类属性的方式获取不到值...,需要使用get方法 * channelName: //通过父类属性的方式获取不到值,需要使用get方法 * partnerName2:合作商名称 * channelName2...* channelName3:渠道商名称 //对象自身的属性值可以获取 * partnerName4:合作商名称 * channelName4:渠道商名称...* MAX=100 静态属性通过类.属性的方式获取,对象获取使用get方法获取 * @param args */ public static void main(String

    9910

    Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

    测量规范其实故名思义可以知道就是父view规定以什么样的方式进行测量子view,简单介绍一下MeasureSpec: 1>,测量规范中是父view对子view的布局要求,每一个MeasureSpec对象只包含一种测量规范...,要么是父view对子view的宽度测量要求,要么是高度测量要求。...):父view对子view的大小不做限制,子view想要多大就多大 EXACTLY(准确的):父view已经对子view的大小有个明确的规定值,所以无论子view想要多大必须使用父view对子view的这个值...总得来说,方法的目的是通过一组size和mode的值来获取一个measureSpec对象,只是因为API版本的不同构建measureSpec的方式不同,apI17版本是个分界线,低版本的是两值相加,高版本的是通过与或操作把...方法总结: 也就是说,该方法返回了view的默认大小的值,这个值跟父view对子view是否进行了限制有关, 如果父view对子view没进行限制,则返回所建议的view的大小, 若进行了限制,则返回测量规范对象中的

    79490

    Android6.0源码分析之View(二)--measure

    测量规范其实故名思义可以知道就是父view规定以什么样的方式进行测量子view,简单介绍一下MeasureSpec: 1>,测量规范中是父view对子view的布局要求,每一个MeasureSpec对象只包含一种测量规范...,要么是父view对子view的宽度测量要求,要么是高度测量要求。...):父view对子view的大小不做限制,子view想要多大就多大 EXACTLY(准确的):父view已经对子view的大小有个明确的规定值,所以无论子view想要多大必须使用父view对子view的这个值...总得来说,方法的目的是通过一组size和mode的值来获取一个measureSpec对象,只是因为API版本的不同构建measureSpec的方式不同,apI17版本是个分界线,低版本的是两值相加,高版本的是通过与或操作把...方法总结: 也就是说,该方法返回了view的默认大小的值,这个值跟父view对子view是否进行了限制有关, 如果父view对子view没进行限制,则返回所建议的view的大小, 若进行了限制,则返回测量规范对象中的

    40620

    【100个 Unity实用技能】| 游戏中获取鼠标点击的坐标,并将游戏对象移动到鼠标的点击位置

    Unity 实用小技能学习 游戏中获取鼠标点击的坐标,并将游戏对象移动到鼠标的点击位置 作用:在游戏中实现鼠标点击的时候,获取到鼠标点的的这个坐标,并将某个游戏对象移动到这个坐标上。...将脚本代码挂在场景中,并将希望跟随鼠标移动的对象拖到脚本上即可。...具体效果如下; 完整代码如下: using UnityEngine; public class Vector3Test : MonoBehaviour { [Header("需要跟随鼠标移动的游戏对象...GameObject targetPos; Vector3 screenPosition;//将物体从世界坐标转换为屏幕坐标 Vector3 mousePositionOnScreen;//获取到点击屏幕的屏幕坐标.../// public Vector3 MouseFollow() { //获取游戏对象在世界坐标中的位置,并转换为屏幕坐标;

    3.7K30

    寒假提升 | Day9 CSS 第七部分

    定位元素(positioned element) position值不为static的元素 也就是position值为relative、absolute、fixed的元素 子绝父相(了解) 在绝大数情况下...) 子元素设置position: absolute 简称为“子绝父相” 当然,也有 子绝父绝 子绝父固 不要死记 1.2. position设置absolute/fixed特性 将position设置为...position值为absolute或者fixed的元素 对于绝对定位元素来说 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度...定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度 如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性...(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界 浮动规则三 规则三: 浮动元素之间不能层叠 如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮

    79220

    笔记——自定义View(三)

    除了onLayout方法中采用getMeasuredWidth方法外在其之外的其他地方一般采用getWidth方法来获取控件的宽度。...,scrollTo()是相对于初始位置做的移动,注意是初始位置。...假如View的滑动已经停止了那就没有必要再次执行invalidate()了。说到底,不是Scroller让View发生了滚动而是View自己在滚动。...原因很简单:缺少一个载体,Canvas需要一个Bitmap对象来保存像素,如果画的东西没有地方可以保存,又还有什么意义呢?...,当我们没有在子View中使用layout_weight属性时,LinearLayout只需对子View进行一次测量,反则需要对子View进行两次测量以确定最终大小,所以如果可以我们尽量少用layout_weight

    48930

    开源UI界面布局框架MyLayout1.9发布

    > attrs; /** 设置或检索伸缩盒对象的子元素在父容器中的位置。...默认值:MyFlexWrap_NoWrap */ -(id (^)(MyFlexWrap))flex_wrap; /** 同时设置检索伸缩盒对象的子元素在父容器中的位置和伸缩盒对象的子元素超出父容器时是否换行...myMinPos和myMaxPos两个只读属性来分别获取最小值和最大值的最值对象,获取位置最值对象时要求数组中的元素只能是NSNumber以及MyLayoutPos类的实例对象,它表明最值是这些具体数字或者位置对象中的最大或者最小值...我们可以通过数组中的myMinSize和myMaxSize两个只读属性来分别获取最小值和最大值的最值对象。...获取尺寸最值对象时要求数组中的元素只能是NSNumber以及MyLayoutSize类的实例对象,它表明最值是这些具体数字或者尺寸对象中的最大或者最小值。

    1.8K10

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    ) 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 ) 1、盒子模型位置摆放三大机制 - 普通流 / 浮动 /...是 不脱标 ( 脱离标准流 ) 的 , 原来的位置还会进行保留 ; 8、子绝父相 - 子元素绝对定位 父元素相对定位 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用...; 先设置 50% 的 宽度 / 高度 偏移量 , 然后再往回退 盒子一半 宽度 / 高度 的偏移量 ; 以 水平居中为例 : 200 x 200 大小的盒子 , 通过设置 首先 , 设置 left...左边偏移为 50% , 让子元素的左侧 移动到 父容器水平中心位置 ; left: 50%; 然后 , 设置 负数的 左外边距 , 令 子元素 向左移动 自身 宽度的一半 , 需要提前测量 子元素的宽度...; visibility 显示对象 , 为其设置 visible 属性值即可 , 一般对象默认也是显示的 ; visibility 隐藏对象 , 但是位置仍然保留 , 后续元素无法将其原来的位置覆盖

    35910

    CSS定位

    脱标的元素不占标准流的位置 1.2. 不会继承父级的的宽度,内容有多个就撑多大 (不论块级还是行内) 1.3....; margin-top:-自身高度的一半; 使用方式: 在工作中,绝对定位"大多"配合相对定位一起使用(父相子绝) 父相:在标准流上占有位置 子绝:针对这个标准流在去移动 注意:父绝子绝的情况也有...固定定位 position: fixed; 特性: 1.脱标 1.1.脱标的元素不占标准流的位置 1.2.不会继承父级的的宽度,内容有多个就撑多大 (不论块级还是行内) 1.3.可以直接写宽高...移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标,不占有位置 可以 相对于定位的父级移动位置...固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置 z-index 控制“定位”元素的叠放层级 z-index只针对定位元素有效果 z-index值越大,层级越高 如果父元素已经比较过层级了

    1K40

    前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…

    + 边偏移属性 来设置元素的位置 相对定位以 自己在标准流位置的左上角为基点 + 边偏移属性,定位元素新的位置 */ position: relative; left: 300px;...1、完全脱标 —-完全不占位 2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置 <!...会脱标准流 position: absolute; */ /*父级要占有位置,字节要任意摆放,这就是子绝父相的由来 父元素*/ position: relative; }...; */ /*父级要占有位置,字节要任意摆放,这就是子绝父相的由来 子元素*/ position: absolute; right: 0; top: 0; } .footer...:block除了转换为块元素之外,同时还有显示元素的意思 特点:隐藏之后,不在保留位置 visibility 可见性 设置或检索是否显示对象 visible :对象可视 hidden:对象隐藏 <!

    3.5K20

    【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

    JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ; 在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容...margin: 100px auto; 设置盒子相对定位 : 盒子模型 内部 需要将 图片 使用绝对定位定位到 右侧 垂直居中 位置 , 则 子元素 绝对定位 , 父容器 必须设置 相对定位 , " 子绝父相.../* 设置外部div的样式 */ /* 相对定位,相对于其正常位置进行定位 */ position: relative; /* 宽度为...预留 30 x 30 像素的位置 , 设置后的样式如下 : 设置 border 属性 , 将边框宽度设置为 0 , 就可以取消上述边框 ; /* 去掉边框 */...*/ /* 相对定位,相对于其正常位置进行定位 */ position: relative; /* 宽度为 400 像素 */

    8210

    Android之自定义View的死亡三部曲之Measure

    There are three possible modes: MeasureSpec对象中封装了从父对象传递给孩子的布局所需数数据(你要成为我的子控件,你要在我里面占位置,你先要知道我有多少空间吧?)...每一个MeasureSpec对象包含了对于宽度和高度的描述(也就是父控件告诉子控件,我有多大点地和我对于空间的使用策略等)。 MeasureSpec由大小和模式组成。...有三种可能的模式: UNSPECIFIED 父控件还不知道子控件的大小,对子控件也没有任何约束,说你想占多少地方就占吧。(这个一般很少用到) EXACTLY 这种状态下的控件的大小是明确的。...AT_MOST 父控件对子控件说,我还不知道你的大小,我给你自由,我的地方是这么大,你按你的意愿来,但最大也只能跟我一样大了,注意哦,可能需要二次测量,后面会讲到。...调用setMeasuredDimension设置view的大小 调用getDefaultSize获取View的大小, getSuggestedMinimumWidth获取一个建议最小值 调用顺序: onMeasure

    37030

    css让div居中显示_css页面居中

    css中设置div元素居中显示的四种方法 一、先确定div的基本样式 二、具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种:同样是利用子绝父相和...注意:子绝父相就是 父级元素相对定位,子级元素绝对定位 .warp{ width: 500px; height: 500px; background-color: pink; margin: 50px...原理:设置了left: 50%;top:50%; 之后,子元素位于如图所在位置, 此时,我们需要向左移动子级div宽度的一半,子级div所在位置如图所示 向上移动子级div高度的一半,结果如图所示...green; position:absolute;//设置为绝对定位 left: 50%; top: 50%; transform: translate(-50%,-50%); } 第三种:同样是利用子绝父相和...即margin-left:calc(-div自身宽度/2),margin-top:calc(-div自身高度/2),也可以自己计算margin-left 和 margin-top的值。

    9.5K50

    iOS界面布局的核心以及TangramKit介绍

    子视图A的左边距占用父视图宽度的20%,而右边距则占用父视图宽度的30%,高度则等于自身的宽度。 子视图B的左边距是40,宽度则占用父视图的剩余宽度,高度是40。...子视图C的宽度占用父视图的所有宽度,高度是40。 子视图D的右边距是20,宽度是父视图宽度的50%,高度是40。...那么为什么要用6个布局位置对象和2个布局尺寸对象来设置子视图的位置和尺寸而不直接用bounds和center呢?...系统通过这个方法来关联视图对象的那6个布局位置和2个布局尺寸对象。 上面的代码中我们看到了布局容器视图通过layoutSubviews方法来实现对子视图的重新布局。...那么对子视图的frame,bounds,center真实位置和尺寸的改变呢?我们也要激发布局视图的重新布局。为了解决这个问题,我们引入了KVO的机制。

    2.2K30

    CSS笔记(14)

    子绝父相: 子级使用绝对定位,父级使用相对定位 子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他的兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来的位置....父盒子需要加定位限制子盒子在父盒子内显示. 父盒子布局时,需要占有原来的位置,否则下面的盒子会升上来,被压在下面.因此父级只能是相对定位....当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到. 4.固定定位 固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变....让固定定位的盒子margin-left:版心宽度的一半距离,多走版心宽度的一半位置就可以让固定定位额盒子贴着版心右侧对齐了....行内元素添加绝对或固定定位,可以直接设置高度和宽度. 块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小(不加定位的话宽度是父级元素的宽度).

    59610

    【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

    ; /* 设置图片自适应 */ img { width: 100%; } 2、外层父容器设置 - 子绝父相 / 盒子浏览器水平居中 / 设置圆角 / 设置溢出隐藏 子绝父相 : 在该轮播图中..., 需要 使用绝对定位在父容器中任意摆放 , 包括左右垂直居中的按钮 , 下方的小圆点 ; 子元素需要使用绝对定位 , 那么父容器必须使用相对定位 ; /* 子绝父相 : 整个父容器需要设置相对定位..., 需要设置 overflow 属性 ; /* 超出圆角部分的内容直接隐藏 */ overflow: hidden; 代码示例 : .banner { /* 子绝父相 : 整个父容器需要设置相对定位...水平居中 ; 首先 , 走到父容器宽度的一半 ; 然后 , 向左走自己宽度的一半 ; /* 在 相对定位 父容器中 使用 绝对定位 任意摆放 */ position: absolute;.../* 设置底部小圆点容器居中 */ /* 首先 走到父容器宽度的一半 */ left: 50%; /* 然后 向左走自己的一半宽度 */ margin-left: -35px

    1.9K10
    领券