margin、edge

在做UI适配的时候,发现个别view定义的leading和trailling margin在iPhone 6 plus下会有一点间隙(4pt),其他则正常,记录一下这个问题的原因。

问题描述:

在IB里向一个空的ViewController中添加一个UIView对象,拖动左右边界对齐父视图,如下图:

添加leading and trailing space约束,(同时添加个居中约束,高度约束,)如下图:

可以看到结果如下:

可以看到IB设置的约束值为-16,(如果在这里将其改为0,IB会提示该View需要更新size,更新后在IB里会看到左右边距)。

使用-16的约束值,运行,在iPhone5s下表现正常,如下图:

iPhone 6 plus的运行结果如下图,可以看到左右的边距:

为什么同样的约束,在plus下会出现这样的结果呢?因为 layoutMargins

关于layoutMargins

iOS8后,UIView 有个属性 var layoutMargins: UIEdgeInsets ,用来指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。 默认的值为8pt。

如果一个View是ViewController的rootview,系统会自动设置和管理margins,top和bottom margins被设置为0pt,left和right的值根据当前的size class (文末简单介绍一下size class)不同而不同,可能取值为16或者20pt(iPhone6 plus, iPad),你不能修改这些值。

所以,你知道iPhone 6 plus下那个4pt的间隙是怎么来的了吧。

当在一个空的ViewController里添加一个新UIView时,我们通过拖拽添加的约束会提示为类似: Leading Space To Contrainer Margin 。而往一个UIView添加新的View,然后对其设置约束,会提示:Leading Space To Contrainer (这时候是到edge)。

如果想要将 Leading Space To Contrainer Margin 设置为edge对齐,可以这样操作:双击编辑该约束,如下图所示,取消掉Relative to margin

参考Apple的文档: Editing Auto Layout Constraints

附录:size class 简单说明

Size Class 的作用是将不同尺寸的屏幕进行分类处理。对于宽度和高度而言,都有三种情况:紧凑 (Compact) 、任意 (Any) 、 正常 (Regular) ,所以一共有9个类别.

参考说明: Size Classes

(完)

### CSS 绝对定位盒子的偏移量相关报错信息解释 在CSS中,绝对定位(`position: absolute;`)的盒子相对于其最近的包含块(containing block)进行定位[^1]。如果一个绝对定位的盒子被设置为相对于其包含块的顶部边缘进行偏移,但实际计算结果导致该盒子的底部边缘超出了包含块的顶部边缘,则可能会触发类似“offset below containing block top edge”的错误或警告。 #### 1. **绝对定位的基本原理** 绝对定位的盒子会脱离文档流,并根据指定的偏移属性(如`top`、`bottom`、`left`、`right`)相对于其包含块进行定位。如果未明确指定某些偏移属性(例如未指定`bottom`),则浏览器会根据其他已知的值(如`top`和`height`)自动计算剩余的偏移量[^1]。 #### 2. **可能导致错误的情况** 当绝对定位的盒子的偏移量设置不合理时,可能会出现以下情况: - 如果`top`和`bottom`同时被定义,且两者之间的差值小于盒子的高度,则会导致布局冲突。 - 如果`top`值过大或`height`值过大,使得盒子的底部边缘超出包含块的顶部边缘,则可能触发错误或警告。 #### 3. **解决方法** 为避免此类问题,可以采取以下措施: - 确保`top`和`bottom`的值合理,避免两者之间的差值小于盒子的高度。 - 使用`calc()`函数动态计算偏移量,以确保盒子不会超出包含块的边界。例如: ```css .top-box { position: absolute; top: calc(50% - 50px); /* 动态调整位置 */ height: 100px; } ``` - 如果需要动态调整高度,可以结合JavaScript计算并设置合适的值。 #### 4. **BFC与绝对定位的关系** 在某些情况下,生成一个新的块格式化上下文(Block Formatting Context, BFC)可以帮助解决布局问题。虽然CSS3引入了`flow-root`作为生成BFC的新方法[^3],但由于浏览器兼容性问题,建议使用更广泛支持的方法,如`overflow: hidden;`或`display: flow-root;`来创建BFC。 #### 5. **动画与布局的影响** 如果绝对定位的盒子参与了动画效果,需要注意动画过程中可能导致的布局变化。例如,在数字滚动动画中,自定义缓动曲线的应用可能会影响盒子的最终位置[^4]。因此,在设计动画时,应确保所有关键帧的布局均符合预期。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值