摘要：用到百分比的属性为什么要知道所以百分比都是相对于其来计算的的定义翻译自的定义和元素的属性有关或时最近的比如或者创建了比如或的祖先元素的最近的属性不是的祖先元素的窗口特殊情况或时当其父元素有以下情况出现时为其父元素的或属性的值不是
1. 用到百分比的属性:
width, height
margin, padding
top, right, bottom, left
transform - translate
background-position, background-size
2. containing block 2.1 为什么要知道containing blockMDN:
The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element"s nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that deterime an element"s containing block.
所以百分比都是相对于其containing block来计算的
2.2 containing block的定义翻译自MDN:
3. 如何计算containing block的定义和元素的postion属性有关:
static 或 relative时:
最近的__block container__(比如inline-block, block, list-item)或者创建了__formatting context__(比如table container, flex container, grid container或block container)的祖先元素的__context box__
absolute:
最近的position属性不是static的祖先元素的__padding box__
fixed:
窗口
特殊情况, fixed或absolute时, 当其父元素有以下情况出现时, containing block为其父元素的__padding box__:
1). transform或perspective属性的值不是none
2). will-change属性的值是transform或perspective
3). filter属性不是none或will-change属性的值是filter(只在Firefox中有效)
height, top, bottom根据其containing block的height进行计算, 如果该height没有指定(根据内容自适应), 那么计算值为0
width, left, right, padding, margin根据其containing block的width进行计算
transform - translate, translateX, translateY, 根据__自身元素__的实际宽度计算
background:
4.1 background-position根据__自身元素(不是containing block)__的宽高计算
4.2 background-size根据图片的大小进行计算. 需要注意的时, 当使用单个百分比(比如background-size: 50%;)计算时, height会隐式设为auto, 当其height计算出来的值大于容器的高度时, 超出部分会隐藏. 如果需要全部显示, 需要明确设置宽和高的值(比如, background-size: 50% 50%;)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116702.html
摘要：绝对单位英寸磅相对单位与元素字号挂钩与元素字体的高度挂钩与根元素字号挂钩与像素挂钩另一属性值的百分比。定义基于父元素宽度的百分比的缩进。参考权威教程节样式可以使用百分比的属性总结浅析属性之中经常出现的百分比 起源：一道面试题（猫眼电影） 问题：css中的单位都有哪些？可以取百分数的单位有哪些？其中margin-top取百分数时是相对于谁来计算的？ 回答： （1）css中的单位：CSS规...
摘要：总结一下定位相对于谁进行定位有点复杂就是找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位即定位的，那么就相对于它进行定位。当父元素链上所有父元素都是默认定位，那么定位就是相对于元素的，效果和定位差不多。 相信学过CSS的同学都曾经对于position的各种属性很困惑，尤其是absolute和relative定位，简直就是傻傻分不清，笔者写这篇文章就是希望通过代码实验的方...
摘要：在客户端编程语言中，如和，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。遍历循环循环方法用于调用数组的每个元素，并将元素传递给回调函数。 px、em和rem的区别 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化； em表示相对...
摘要：在客户端编程语言中，如和，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。遍历循环循环方法用于调用数组的每个元素，并将元素传递给回调函数。 px、em和rem的区别 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化； em表示相对...
摘要：在客户端编程语言中，如和，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。遍历循环循环方法用于调用数组的每个元素，并将元素传递给回调函数。 px、em和rem的区别 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化； em表示相对...
阅读 2689·2021-11-22 15:27
阅读 421·2021-11-22 14:45
阅读 2905·2021-10-15 09:41
阅读 1281·2021-10-11 10:58
阅读 1517·2021-09-09 09:32
阅读 2140·2021-09-04 16:45
阅读 2414·2021-09-03 10:45
阅读 3083·2019-08-30 15:53
