CSS--百分比都是相对于谁计算

最新推荐文章于 2024-08-28 11:35:29 发布

原创最新推荐文章于 2024-08-28 11:35:29 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细探讨了CSS中百分比的计算方式，包括相对于父级元素的宽高、定位元素的边距、自身宽高等属性的应用。同时，介绍了line-height、font-size以及background-size等属性如何根据不同的参照物进行百分比计算，为前端开发者提供清晰的理解。

目录
CSS–百分比都是相对于谁计算
相对于父级元素宽高
相对于父级定位元素宽高
相对于自身宽高
相对于自身字体大小
相对于继承字体大小

相对于父级元素宽高
width, height, margin,padding, text-indent … 等
相对于父级定位元素宽高
top, left, right, bottom
相对于自身宽高
border-radius, translate, transform-origin, zoom,background-size
相对于自身字体大小
line-height
相对于继承字体大小
font-size

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LuckySoong

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

探讨浏览器如何计算 CSS font-size 的百分比继承值

weixin_41455464的博客

10-16

406

百分比继承是 CSS 中一个重要的概念，理解透彻它可以帮助我们更好地控制页面排版，避免一些意料之外的样式问题。等新的单位，可以更精确地控制字体的大小和间距。此外，CSS Houdini 提供了一组 API，允许开发者自定义 CSS 引擎的行为，包括字体大小的计算方式。通过修改 CSS 变量的值，可以快速地修改整个网站的字体大小，而不需要修改每个元素的样式。可以使用浏览器的开发者工具来查看元素的样式信息，以及计算后的字体大小。值后，浏览器会按照继承链的顺序，从根元素到目标元素，依次计算每个元素的。

前端面试题：当margin-top、padding-top 的值是百分比时,分别是如何计算的?

sdasadasds的博客

07-28

828

我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...

参与评论您还未登录，请先登录后发表或查看评论

浅谈css百分比都是相对于谁来计算？？？

yangyanqin2545的博客

04-22

749

浅谈css百分比都是相对于谁来计算： 1、首先我们看一下，在普通文档流： .parent { width: 500px; height: 300px; padding:50px; background: #999; margin-left:50px; font-size: 15px; line-height:30px;

css样式的百分比都相对于谁？

weixin_30809173的博客

04-12

275

margin、padding、border、width、height、position等等一些可以用百分比的样式，都相对于谁，父级？自身？还是窗口？ 1、相对于父元素宽度的： [max/min-]width、left、right、text-indent、padding、margin 等； 2、相对于父元素高度的： [max/min-]height、top、bottom 等； 3、...

CSS 单位 | 百分比单位相对谁就算

海胆的博客

06-09

353

低(每英寸的像素数) 的设备，1px 是显示器的一个设备像素。

CSS基础 --- % 相对于谁

最新发布

呼叫6945的博客

08-28

1399

CSS 中，这个常见的 % 单位有着什么样的规则呢？这也是一道很好的面试题目，我们在这这篇文章进行梳理。

CSS中百分比是相对于谁的

青山不改，绿水长流。

09-06

1374

相对于自身的宽高值减去背景图片的宽高值所得到的剩余值。因此，属性值"center center"和"50% 50%"是等价的，即如果设置了后者，背景图片会自动居中，不需要像定位那样还要transform偏移。top、height 和 left、width 的百分比是分别根据包含它的第一个不是 static 定位的元素的。width 和 height 的百分比是分别根据父级元素块的。绝对定位的 top、left、width、height。top 和 left 的百分比是分别根据父级元素块的。

CSS-高度css-height.docx

03-11

4. **其他单位**：还包括rem（相对于根元素的字体大小），vw（视口宽度的百分比），vh（视口高度的百分比）等。这些单位在现代网页设计中也越来越常见。 ### 高度属性的值 - **auto**：这是`height`属性的默认值，...

前端开源库-postcss-viewport-units

08-29

- `vw`：表示相对于视口宽度的百分比，例如`10vw`意味着元素宽度是视口宽度的10%。 - `vh`：类似地，`vh`代表视口高度的百分比。 - `vmin`：取`vw`和`vh`中较小的一个作为单位值。 - `vmax`：取`vw`和`vh`中较大的一...

CSS background-position的使用说明详解

09-25

百分比值是相对于背景定位区域（即元素的内容区域）的百分比来计算的。此外，还可以使用预定义的值，如top、center、bottom、left、center、right来指定背景图片的位置。 - 水平方向上的关键字：left（左）、center...

CSS中百分比是相对于谁?

weixin_34029949的博客

04-16

1011

1. 用到百分比的属性: width, height margin, padding top, right, bottom, left transform - translate background-position, background-size 2. containing block 2.1 为什么要知道containing ...

终于搞懂了 CSS 中的百分比是基于什么工作的了！

粉丝们务必加入微信粉丝群

09-27

1586

作者：Khang 译者：前端小智来源：dev 有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。大家有没有对 CSS 中的百分比是如何工作的感兴趣？有没有想过，为什么它有时会乱七八糟，没啥头绪？反正我是有，所以今天分享这篇文章，对自己来说是加深理解，同时也希望对大家有所帮助。什么百分比？作为百分比，显然应该有一个目标.

CSS中的百分比(%)到底是谁的百分比？

热门推荐

feng

09-22

2万+

在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢？1、有人说是相对于父元素的百分比，但是这么说有时候却会出问题

CSS中的一些属性百分比值，相对于谁计算？

sunshine1990916的博客

08-07

7977

在css属性中，很多属性的取值可以是百分比，比如：width、height、padding、margin、font-size、line-height、background-position等，那么这些百分比值的计算是相对于谁呢？先来看几个例子，分别是正常文档流中、浮动情况下和定位情况下。正常文档流中： <div class="parent"> <div cla...

css样式中的百分比都是相对于谁的？

huangpb的博客

01-04

4204

1. 绝对定位的 top、left position: absolute; top: 50%; left: 50%; top 和 left 的百分比是分别根据它相对的祖先元素的高度和宽度来计算的。 2. 固定定位的 top、left position: fixed; top: 50%; left: 50%; top 和 left 的百分比是分别根据浏览器视口的高度和宽度来计算的。 3. translateY transform: translateY(-50%); translateY

html %与vw的区别

weixin_43639743的博客

09-09

2621

%单位 %（百分比）是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小来取值。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。如果是固定定位的元素，它的包含块是视口（viewport）。 vw单位 vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。

CSS的三种定位机制。绝对定位是相对谁？设置百分属性时是相对谁？

woke的博客

09-13

7961

直入主题： CSS定位的三种机制：一.普通流： position: static 元素框正常生成，默认设置。 position: relative 元素相对于它本来的位置，注意：移动后，在原来的位置会占用一个相同大小的空间。二.绝对定位： position：absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元...

CSS calc() 函数

达摩龙的博客

03-22

4964

CSS calc() 函数 width: calc(100% - 100px); calc()是一个css运算函数，上述表示在继承的父级100%宽度的

css中的百分比相对于谁？

yuqin的博客

11-19

676

相对于参照物的 //相对于第一个有定位属性的元素 position:absolute; top:10%; 相对于自身的 position:relative; top:10%; border-radius:50%; background-size:10%; transform:50%; text-indent:10%; //相对自身的font-size line-heig...

CSS3 border-radius：轻松创建圆角及优势解析

此外，当设置百分比值时，半径是相对于边框宽度计算的，这使得在响应式设计中特别有用，因为半径会随着元素尺寸的变化而自动调整。 CSS3的`border-radius`属性提供了极大的灵活性和便利性，使得设计者能够快速轻松...