现在有这样的一个需求：一个九宫格布局。
在这样的情况下，每列放置三张图片。我们可以利用flex,以及定位来实现这个九宫格的布局。
现在有7个子盒子，其结构都为：
现在将这7个盒子都放置在一个父盒子中
对于每个子盒子，宽度利用百分比是可以实现自适应的，但是高度设置为百分比则是行不通的。那么如何让子盒子呈现自适应的正方形呢。我们可以利用padding值将盒子撑开，然后再利用绝对定位将图片定位到子盒子的位置上。
现在有这样的一个需求：一个九宫格布局。在这样的情况下，每列放置三张图片。我们可以利用flex,以及定位来实现这个九...
CSS3 vw 单位 100vw = 100% 视窗宽度100vh = 100% 视窗高度 这样实现自适应正方形(...
要用到3个技术点1，BFC[https://www.jianshu.com/p/0d713b32cd0d]2，伪元...
1、vm单位 2、padding-top实现 3、padding-bottom实现 4、伪元素的margin-to...
父级宽高不定，子级元素要宽高都是父级元素宽度的一半，即一个正方形 1. 利用padding来实现 2. 利用伪类来...
情况1：实现固定宽高的正方形 情况2：实现自适应的正方形 方式一：vw vh1vw === 1%的宽度 方式二：将...
方法一：使用 CSS3 的 vw，vh 单位 用 vw 或 % 单位设置宽度，用 vw 单位设置相同高度即可； 用...
多栏CSS3 使用css3来创建多栏，它可以自适应网页，不兼容IE 用CSS包裹内容很长的URL和文本 这个代码片...
总体思路：由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的h...
padding的百分比数值是根据父元素宽度计算的的这一原则，使用padding-bottom控制元素高度，使用百分...
本文标题：css 创建自适应正方形
本文链接：https://www.haomeiwen.com/subject/udbtnctx.html
网友评论