margin/padding百分比值的计算

2024年4月5日 113次阅读 来源: 一个很温馨的名字

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、小栗子

<div style="width:100px; border: 1px solid gray;"  id="box">
  <div id="container">1</div>
</div>

#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)来实现此方案。

<div style="width:100px; border: 1px solid gray;overflow:hidden;">
  <div id="container" class="placeholder"></div>
</div>

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

容器内部如何添加内容

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

<div id="container" class="placeholder">
  <img src="xxx.jpg" />
</div>

#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的百分比值实现高度自适应（多用于占位，避免闪烁）

    原文作者：一个很温馨的名字
    原文地址: https://segmentfault.com/a/1190000016226944
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞