margin/padding百分比值的计算

jsummer 发布于2019-08-29 16:37 / 3108人阅读

摘要：还有一种说法是根本原因并不是因为死循环。，总而言之就是在默认的水平文档流方向下，和属性的垂直方向的百分比值都是相对于父元素宽度计算的。表示元素的高度为宽度的一半。

1、百分比介绍

一般元素的宽度用百分比值表示时，元素的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式，使其子元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

margin-right/margin-left的百分比值是相对于父元素的宽度来计算的，这很好理解；而margin-top/margin-bottom为什么也是以父元素的width为参照物的呢？

2、为什么呢？

CSS权威指南中的解释：若是相对于父元素的高度计算会形成死循环。
“我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，形成无限循环。”

还有一种说法是根本原因并不是因为死循环。例如zhangxinxu认为相对于 height 计算，大多数情况下计算值都是 0，跟摆设没什么区别，还不如相对宽度计算，因为 CSS 默认的是水平流，计算值一直会有效，而且我们还可以利用这一特性实现一些有意思的布局效果。也就是面向场景和需求设计，这种设计可以让我们轻松实现自适应的等比例矩形效果。

Anyway，总而言之就是：

在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于父元素宽度计算的。

3、小栗子


  1


#container{ 
  padding-top: 50%;  // margin-top: 50%;
  background-color: pink;
}

div中没有内容时，实现的是一个宽高为1:2的小矩形。padding-top: 50%;表示元素的高度为宽度的一半。padding-top: 100%; 可实现宽高为1:1的小矩形。（改为padding: 50%`，实现的是一个宽高1:1的小矩形，因为50%+50%=100%；）

从盒子模型可以看出，虽然容器的内容高度为0，但由于有了跟内容宽度一致的padding，因此整体视觉效果上像是被撑开了。

使用方法： padding-top用来设置元素的宽高比例；该元素在父元素宽度变化的过程中将保持自身固定的宽高比。

4、应用

对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的。

此时需要的不是对图片进行固定尺寸设定，而是比例设定。为了维持图片的宽高比固定，即保持原来的尺寸比不变，要做到元素高度随着元素的进行自适应变化。

对于复杂布局，如果图片的宽度是不固定的自适应的，我们通常会想到这么一个取巧的做法，就是只设定图片的宽度例如img { width: 100%; }，图片的高度不进行限定，由图片的内容去撑开，这样会出现图片占据的高度有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。即使图片加载速度很快，容器在图片加载前后都会有一个变型的过程，也就是俗称的“闪烁”，而如果图片加载不出来，整体布局就更是难看了。

所以对图片高宽都进行限定还是有必要的，但是同时要保证宽度自适应。

给子元素/伪元素设置margin/padding撑开容器

由于添加子元素与HTML语义化相悖，因此更推荐使用伪元素(:after)来实现此方案。


  


#container {
  position: relative;
  background-color: pink;
  overflow: hidden;  // 当使用margin-top需要触发BFC消除与其他元素可能发生margin折叠的问题
}
.placeholder:after {
  content: " ";
  display: block;
  margin-top: 100%; 
}

容器内部如何添加内容

那么，在撑开容器后，如何给容器添加内容（图片、文本等）呢？
利用position: absolute;


  


#container {
  position: relative;
  background-color: pink;
  overflow: hidden; 
}
.placeholder:after {
  content: " ";
  display: block;
  margin-top: 100%; 
} 
img {
  position: absolute;
  top: 0;
  width: 100%;
}

References

CSS百分比padding实现比例固定图片自适应布局
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

云服务器 GPU云服务器比值百分百库存百分号百分数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113863.html

margin/padding百分比值的计算

摘要：还有一种说法是根本原因并不是因为死循环。，总而言之就是在默认的水平文档流方向下，和属性的垂直方向的百分比值都是相对于父元素宽度计算的。表示元素的高度为宽度的一半。 1、百分比介绍一般元素的宽度用百分比值表示时，元素的总宽度包括外边距取决于父元素的width，这样可能得到流式页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式，使其子元素使用百分数外边距，当...

Pikachu 2019-08-02 11:24 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
详述css中的百分比值

摘要：很多属性的取值都可以是百分比值。这就是百分比值的意义。可用百分比值的常见属性宽和高在使用百分比值时，其参照都是元素的包含块，详情。百分比值的继承请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。很多css属性的取值都可以是百分比值。虽然形式上来说，百分比值都是数字后跟%的形式（注意数字和%之间不可以有空格），但在不同的使用场合下，其意义会有...

flyer_dev 2019-08-28 17:57 评论0 收藏0
行内格式化上下文(Inline formatting contexts)

摘要：如果该属性值为，用户代理可能会拉伸行内盒不包括和盒里的空白和字间距与，，行内盒一个是一个特殊的行内级盒，其内容参与了它的包含行内格式化上下文当一个超出一个的宽度时，它会被分成几个盒，并且这些盒会跨多分布。 IFC布局规则: 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始这些盒之间的水平margin，border和padding都有效盒可能以不同的方式竖直对...

impig33 2019-08-29 12:32 评论0 收藏0
CSS属性中经常出现的百分比

摘要：绝对单位英寸磅相对单位与元素字号挂钩与元素字体的高度挂钩与根元素字号挂钩与像素挂钩另一属性值的百分比。定义基于父元素宽度的百分比的缩进。参考权威教程节样式可以使用百分比的属性总结浅析属性之中经常出现的百分比起源：一道面试题（猫眼电影）问题：css中的单位都有哪些？可以取百分数的单位有哪些？其中margin-top取百分数时是相对于谁来计算的？回答：（1）css中的单位：CSS规...

mylxsw 2019-08-29 11:11 评论0 收藏0