最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去
需求是实现一个自适应的正方形卡片,效果如下:
顺便写个系列
本次页面的 HTML 结构如下:
在 CSS 中,margin 和 padding 的百分比数值总是相对于父元素的宽度来计算
利用这个特性,只要将 padding-top 或者 padding-bottom 设置为与 width 相同的百分比,再将 height 设为 0,最后通过定位实现自适应的正方形盒子
{:;:;:;:;
}{:;:;:;:;:;:;
}
有很多文章都提到过,因为设置了 height: 0; 导致 max-height 无效
通常会使用伪类元素来解决这个问题,但同时也会有高度溢出的情况
如果采用我上面的 html 结构,只需要将 max-height 写到 .card 上,就不会有这个问题,也就用不着伪类元素了
除了常用的 px,em,rem 之外,CSS 中还有很多单位,比如 pt,ch,vh,vmin 等
这里提到的单位 vw 浏览器内部的可视区域(viewport)宽度
{:;:;
}{:;:;:;
}
大学的时候见过这种布局,这种套路是黔驴技穷的表现,了解一下就行
在 HTML 结构中添加一个 标签
{:;:;:;
}{:;:;:;:;:;:;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。