首页 > 试题广场 >

当 margin-top、padding-top 的值是百分

[单选题]

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

相对父级元素的 height，相对自身的 height

相对最近父级块级元素的 height，相对自身的 height

相对父级元素的 width，相对自身的 width

相对最近父级块级元素的 width，相对最近父级块级元素的 width

查看答案及解析

LovelynH

可参考《CSS权威指南（第三版）》中第220页‘百分数和外边距’说明：“百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生变化，百分数也会变化”。

编辑于 2017-09-14 10:06:52 回复(5)

无可替代666

CSS 百分比参照问题

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

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

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

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

发表于 2018-08-12 12:34:10 回复(4)

1nNocзлt

假如padding-top是按照height来说,父元素的高度会包含子元素的高度,如果子元素的padding-top继续增加,那么父元素的高度也会增加,因为父元素要包含子元素嘛,这样的话,父元素的高度就成为了一个死循环.

还有一种说法,我们都知道padding-left/right和margin-left/right都是按照宽度来说的,当我们不设置具体的上下左右只设置margin或padding时四个值应该保持为一种类型.

发表于 2017-08-21 11:11:10 回复(5)

未忆wy

CSS 百分比参照问题：

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

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

参照父元素属性的元素：font-size line-height

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

发表于 2019-03-12 16:06:42 回复(0)

做个美美美妞＇

正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，

父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。

发表于 2017-08-09 09:56:48 回复(0)

我才是晴天

D，实践出真知。我用chrome浏览器试了，选D。另外，参考文档http://www.phpvar.com/archives/1414.html

发表于 2017-02-07 18:38:18 回复(5)

炎木之

高度可能被子元素撑开，出现一个无限循环

发表于 2022-02-21 08:16:22 回复(0)

wangjuxian

上边距为什么是宽度？

发表于 2017-08-18 09:39:18 回复(0)

Y_yves

为什么不选B？

发表于 2017-07-13 11:58:11 回复(0)

louiswt666

假设margin-top是根据父元素的height改变的，那么设置完以后，元素多了margin，那么父元素由于包含子元素，那么父元素的height也会改变，由于子元素是根据父元素height改变的，所以margin-top又会改变，这就变成了一个无限循环的情况，所以干脆相对于width

发表于 2018-11-19 12:58:04 回复(0)

可颂pauline

margin-top、padding-top是根据父容器的宽度，注意是宽宽宽度

发表于 2017-08-07 11:00:11 回复(0)

甄艳雪

top不是应该看的是高度height么？？？

发表于 2018-07-29 21:11:01 回复(0)

菜鸟腾飞

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div

style="border: 1px solid blueviolet;

padding-top: 10%;margin-top: 10%;

background-color: #FF0000"></div>

</div>

</body>

</html>

实践证明是width,子容器height为确实是width十分之一

编辑于 2017-08-26 17:09:39 回复(0)

Chrish~

B。

发表于 2017-02-03 09:56:25 回复(0)

素心暖心

ul无序列表，ol有序列表

发表于 2019-11-21 08:54:21 回复(0)

初心w50t2

学到了！

CSS 百分比参照问题

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

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

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

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

发表于 2019-03-13 14:52:14 回复(0)

geekrun

w3cschool

发表于 2017-07-11 10:55:09 回复(0)

牛客458404261号

不行了，这设计简直反常识

发表于 2023-04-13 12:07:10 回复(0)

金锆德

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

发表于 2023-03-26 08:26:19 回复(0)

找前端工作的珊

相对定位和绝对定位是不是搞反了？

发表于 2022-09-21 12:27:38 回复(0)

提交观点

问题信息

CSS HTML

上传者：牛100

难度：

33条回答 3436收藏 7545浏览

当 margin-top、padding-top 的值是百分

CSS 百分比参照问题

学到了！

CSS 百分比参照问题

问题信息

热门推荐

相关试题