风动之石的博客

问答篇

CSS 中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

  • 设置display: none
  • 设置visibility: hidden
  • 设置width: 0; height: 0;
  • 设置opacity: 0
  • 设置z-index: -1000 (小于0)
  • 其父元素overflow:hidden，该元素margin-left: -9999px
  • 若是文本元素，设置text-indent: -9999px
  • ...

如何实现自适应的正方形？

解决思路一：padding-top/bottom百分比取值

padding-top/bottom取值为百分比时，是相对父元素的宽度进行计算的，因此可以这样：

/* 方式一：设置 `padding-top/bottom`撑开容器 */
.placeholder {
    width: 100%;
    height: 0;  /* 不设置此项时，增加内容会增加 height；设置为 0，可保证元素为正方形 */
    padding-bottom: 100%;
}
1
2
3
4
5
6

但是以上也有弊端：无法设置元素的max-height（因为元素的height都为0，更不谈max-height了..）

/* 方式二：利用伪元素的 margin/padding-top/bottom 撑开容器 */
.placeholder {
    width: 100%;
    max-height: 100px; /* 此时可以愉快的设置 max-height */
    overflow: hidden; /* 使用 margin-top/bottom 时需要触发 BFC，消除 margin 重叠 */
}
.placeholder:after {
    content: '';
    display: block;
    margin-top: 100%;
}
1
2
3
4
5
6
7
8
9
10
11

但是，在.placeholder元素里添加内容，依然会增加height，可以将内容单独放在其他标签内，并绝对定位

解决思路二：CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位vw, vh, vmin, vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当前视口宽高中较小的一个的百分比单位，同理vmax是相对当前视口宽高中较大的一个的百分比单位。

利用vw单位，我们可以很方便做出自适应的正方形：

.placeholder {
    width: 100%; /* 假设 100% 是指屏幕宽度 */
    height: 100vw;
}
1
2
3
4