html怎么用div做正方形盒子,科技常识：用css实现正方形div 的两种方法

今天小编跟大家讲解下有关用css实现正方形div 的两种方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关用css实现正方形div 的两种方法 的相关资料，希望小伙伴们看了有所帮助。

目标：实现一个正方形 这个正方形边长等于

方法一：使用单位vw (ps我觉得这个是最简单的方法)

html结构也很简单 只有一个div即可

.square{

width: 50vw;

height: 50vw;

background: blue;

}

方法二： 使用padding-bottom

要点：

1.height: 0 内容会溢出到padding里 不用担心~~

2.padding-bottom 值设置为百分比时候 相对于包含块的宽度。

3.需要设置包含块

html结构：

css:

*{

margin: 0;

}

/* 设置撑满页面可见区域 */

.container{

height: 100vh;

width: 100vw;

background: palegoldenrod;

}

.square{

width: 50%; /* 相对与container的width */

padding-bottom: 50%; /* 相对与container的width */

background: palegreen;

}

行了吧 两种就可以了 你也可以使用margin 不过会有塌陷的危险 所以 就这两个够用啦~~

总结

以上所述是小编给大家介绍的用css实现正方形div 的两种方法 希望对大家有所帮助 如果大家有任何疑问欢迎给我留言 小编会及时回复大家的！

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。