前端规范实践

本文用来记录一些在实践中使用的W3C规范,包括易混淆的、不符合常理的点。

1、[CSS]使用margin/padding-top:100%实现方形布局

注意:水平布局下不管是margin还是padding,依赖的都是父容器的width。垂直布局依赖height.

https://drafts.csswg.org/css-box/#flows

Name:padding
Percentages:width* of containing block
Name:margin
Percentages:width* of containing block

) if the containing block is horizontal,* otherwise the height

Note that in a horizontal flow, percentages on margin-top and margin-bottom are relative to the width of the containing block, not the height (and in vertical flow, margin-left and margin-right are relative to the height, not the width).

借用此Feature,可以实现正方形(固定比例)的容器,而无需设置子元素高度。下面的示例展示了图片内容为正方形,不依赖原图比例。也避免了图片未加载时高度塌陷的问题。

适用场景: 封面图。

示例

  • html
1
<div class="hovereffect"><img src='1.png'></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.hovereffect {
width: 200px;
overflow: hidden;
position: relative;
text-align: center;
}
.hovereffect:before {
content: "";
display: block;
padding-top: 100%;
}
img {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
  • 效果

正方形图片,不依赖图片高

优点:灵活运用此属性,不依赖js和子元素固定高度。

未完待续…