当margin-top、padding-top的值是百分比时，分别是如何计算的？

最新推荐文章于 2024-03-28 17:22:16 发布
最新推荐文章于 2024-03-28 17:22:16 发布
阅读量1.4k 收藏
点赞数
分类专栏： 面试系列 文章标签： css
未经博主同意，禁止转载
本文链接：https://blog.csdn.net/weixin_41937552/article/details/108780611
版权
本文详细介绍了CSS中百分比参照的原理，包括padding、margin、width、text-indent等如何参照父元素宽度，以及height如何参照父元素高度。同时，文章还探讨了在相对定位和绝对定位中，top/bottom/left/right的参照差异，帮助开发者更好地理解和运用CSS布局。
摘要由CSDN通过智能技术生成

CSS 百分比参照问题

  • 参照父元素宽度的元素：padding margin width text-indent

  • 参照父元素高度的元素：height

  • 参照父元素属性:font-size line-height

  • 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

孙叫兽
关注
专栏目录
前端面试题：当margin-top、padding-top 的值是百分比时,分别是如何计算的?
sdasadasds的博客
07-28 662
我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...
padding-top实现列表图片自适应
qq_36454089的博客
11-27 795
处理列表中响应式图片的时候，宽度可以设置百分比进行自适应， 但是高度没办法控制 ，如果图片宽高不一致，宽度设置一样，高度会参差不齐 这时就可以使用padding来控制图片的高度，让列表中的图片强制设置同一高度 1 : 图片使用盒子包裹，案例为 .img-box 2 : img-box的高度用padding-top/padding-bottom 撑开 padding-t...
margin-top、padding-top的值为百分比
yangxy的博客
05-22 1万+
问题：当margin-top、padding-top的值是百分比时，分别是如何计算的？ A 相对父级元素的height，相对自身的height B 相对最近父级块级元素的height，相对自身的height C 相对父级元素的width，相对自身的width D 相对最近父级块级元素的width，相对最近父级块级元素的width答案：D可以对元素的margin设置百分数，百分数是相对于父元
margin-top,padding-top的值是百分比时，分别是如何计算的
qwqasd123456的博客
12-11 1486
之前一直以为margin-top和padding-top为百分比时是相对与父级块级元素的高度的，之后在使用的时候发现margin-top为百分比是不太对，百度一下才知道是自己之前的想法是错误的，在这记录一下 margin-top和padding-top为百分比时是相对于父元素的width计算的，不管是margin-left/margin-right ...
margin和padding的值是百分比的时候是怎么计算的？
my466879168的博客
06-21 1901
百分比取值的计算 对元素的margin和padding设置百分比的时候，他的百分比是相对于父元素的宽度width计算的，margin上下左右都是如此。 如果没有为元素声明width的时候，此时元素的宽度取决于父元素的width，这样可以得到流式布局，元素的外边距会扩大和缩小来适应父元素的大小。 为什么都是相对于宽度而不是高度： CSS权威指南中的解释： 我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元
css padding-top padding-bottom margin-top margin-bottom采用百分比时参照对象
avtcpm1927的博客
10-09 197
css padding-top padding-bottom margin-top margin-bottom采用百分比时参照对象 之前想用padding-top来实现垂直居中，后来发现这是不可能的。 padding-top padding-bottom marg...
-百分比设置margin和padding,line-height,height
rocktanga的博客
02-14 940
用百分数设置margin和padding 用百分数设置margin和paddding的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算,如 .demo1{ width:980px;height:500px; } .demo1 div{margin:10% 5%; } // 相当于margin:98 49; 为什么都是以宽度为标准 1、高度持续增加 第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器.
CSS | 关于Padding和Margin (Padding百分比和Margin负边距)
liuj4 | 自娱自乐
08-13 466
Padding和Margin天天用，但有些地方其实很值得考究 1. Padding和Margin的百分比设置： Padding和Margin的百分比设置是参照父元素的宽度的 2. 两个块级盒子在垂直方向上的margin不会相加，而是合并：保留大的那一个,比如 .box1{ margin-bottom:20px;display:block} .box2{ margin-top...
css中padding和margin的异同点介绍
09-25
本文将从语法结构、可能取的值、浏览器兼容性等方面详细介绍padding和margin的异同点，并结合图示提供直观的理解。 一、padding（内边距） 1、语法结构 padding属性用于定义元素内容与其边框之间的空间。其基本...
padding-top/margin-top的百分比值参考对象是父级元素的宽度
树上骑个猴的博客
10-20 582
页面中有一个元素A，假设需求如下： 元素A在页面内水平、垂直居中； 元素A距离页面左右的间距为10px，元素A的宽度随页面宽度变大而变大； 设置元素A的高度始终为宽度的一半； 方式一（利用calc和vw）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
margin-top / padding-top 的百分比 到底是多少？
weixin_30699831的博客
08-03 284
之前，我以为 margin-top/padding-top 如果设置成%，得到的是 基于父对象总高度的百分比。 　　但是，这种想法是错的。因为在CSS标准里，是基于父对象宽度的百分比。 <style type="text/css"> .demo { width: 400px; height: 200px; ...
2017/11/20
田京京京京京京京的博客
11-20 229
当margin-top、padding-top的值是百分比时，分别是如何计算的？ “百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生变化，百分数也会变化”。 白屏时间first paint 和可交互时间dom ready的关系是先白屏时间再可交互时间。浏览器渲染的时候，不必等所有DOM解析完再与CSSOM一起创建Render Tree,而是边解析边渲染，即解析完一部
利用padding-top/padding-bottom百分比，进行占位和高度自适应
最新发布
literarygirl的博客
03-28 396
但是有一个问题，假如我们想要设置max-width的话，在上面样式的基础上，为.item添加max-width 是不起作用的，原因max-width只有在内容撑开高度的时候才起作用，而.item并不是被内容撑开的，为了解决这个问题，还可以使用伪类元素:after，:before，修改之后的样式如下。而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。这样就实现了我们想要的效果了。
css: padding百分比详解
热门推荐
weboof的博客
10-24 1万+
今天来介绍一个我们经常用到的css属性padding。但是它有一个我们不常使用的值，那就是百分比！ padding百分比特点： padding的百分比是相对于父元素宽度，如果父元素有宽度，相对于父元素宽度，如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。 1、padding的所有值相对于屏幕宽度 <body> <div class="padding...
padding-top的值用的是百分比，实际显示的不是父元素高度的百分比，而是宽度的百分比！margin-top同理
welifeCoder的博客
11-19 3055
padding-top/margin-top设为百分比时，取父元素宽的百分比！
当margin和padding的值是百分比时，应该如何计算的？
i_will_be的博客
08-19 4344
对元素的margin设置百分数时，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。 如果没有为元素声明width，此时元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。
margin-top参考点与百分数计算
前端小愤青
08-10 3134
版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/81568944 下面是追溯过程： 1.关于外边框基准问题（参照点） 下面我们来分析几个案例: 案例的代码大致如下: ...
CSS margin知识点详解：重叠与百分比计算
对于普通元素，当使用百分比值设置margin时，这个百分比是相对于包含该元素的容器元素的宽度计算的。例如，如果有一个宽度为800px的容器，内部元素设置`margin: 10%;`，那么实际的margin值将是80px（800px * 10%）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孙叫兽

打赏不会怀孕

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值