CSS 中padding/margin的小知识
今天看到几篇关于css的一些运用的文章，讲的是当padding/margin值为百分比时，其值都是以其父元素的宽度为参照对象。也就是说，当取值为百分比时，padding-top/padding-bottom同样是以其父元素的宽度为基准计算的，这与我们的直觉相违背。当然了，CSS由规范文档定义，我们只需要了解并保证能够正确使用它。
元素定位
回想起上周做的仿首页作业时，其中有一个轮播组件的pagination就是通过padding-top取百分比，保证轮播按钮始终处于页面中正确位置。根据前面的知识现在明白了为什么这里可以使用padding-top 实现定位。
组件截图
那么，这个属性处理可以在用于自适应定位外还能干什么呢？
高度自适应占位
阅读文章参考文章，padding-top/bottom可以用于图片自适应占位，解决页面闪烁的问题。他是怎么实现的呢？
首先我们假设有一个容器需要包裹一个图片，这个容器我们不设置其高度，以保证其自适应。此时，当图片未正确加载，或加载完成前，由于图片高度为0，其容器会因为没有内容，导致容器无法撑高而塌陷，而如果加载较慢则会再图片加载完成后出现闪烁的情况。
通过padding-top 撑起一个容器
通过给容器添加一个值为百分比的padding-top，这个容器被撑了起来，同时该属性值取决于父容器的宽度，此时该容器会随着父容器宽度变化而拿到一个撑起内容的高度，我们只需要根据需要的内容比例设置padding-top的值即可。同样，padding-bottom也是可行的。
<div id="container" class="placeholder"></div>
#container{
background-color: red;
}
.placeholder{
padding-top:50%;
}
被padding-top撑起的容器
以上的方法存在一个问题，使用该方法容器的max-height属性会失效，其原因在于max-height仅对内容高度生效，即使我们使用box-sizing:border-box，同样会有这个问题，同时padding会占据了一个位置，显然无法满足我们的需求。
既然max-height仅对内容生效，那么通过给容器添一个子元素作为内容填充，是否可行呢？
通过伪元素撑起容器
参考清除浮动的方法，我们尝试给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度。
#container{
width: 50%;
max-height:40px;
background-color:#ddd;
}
.placeholder::after{
content:"";
padding-top:100%;
display:block;
}
伪元素使用padding-top
又或者使用margin-top/margin-bottom：
#container{
width: 50%;
max-height:40px;
background-color:#ddd;
overflow:hidden;
}
.placeholder::after{
content:"";
display:block;
margin-top:100%;
}
伪元素使用margin-top
需要注意的是，由于margin存在塌陷的问题，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个
overflow:hidden来保证伪元素的margin不会塌陷。
给容器添加内容
最后一个问题，由于伪元素仍占据了一个位置，要使得容器内容能够正确添加图片/文本，我们只需要使容器内部元素绝对定位即可。
例如我们给容器里面添加一个图片：
#container{
width: 50%;
max-height:300px;
background-color:#ddd;
overflow:hidden;
position: relative; /* 父容器相对定位 */
}
.placeholder::after{
content:"";
/* padding-top:100%; */
display:block;
margin-top:100%;
}
img{
position:absolute; /* 内容绝对定位 */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /* 控制内容绝对定位位置 */
width:80%; /* 控制图片不溢出，因此这里使用的图片实际宽度受父容器影响 */
}
添加一个图片
这里我们只需要保证内容的宽度响应父容器的宽度，比如例子中的图片
width:80%，以及绝对定位的位置，我们就可以根据需求填充内容。
到这里高度自适应占位基本完成，至于具体的宽高比例则由实际需求决定，我们只需要控制margin/padding的百分比值即可。
例子：
http://jsbin.com/geqoqam/2/edit?html,css,output
参考来源
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
纯 CSS 实现自适应正方形
网友评论