用css实现正方形div 的两种方法
发布时间：2019-04-23 15:29:08 作者：佚名 
我要评论
我要评论这篇文章主要介绍了用css实现正方形div 的两种方法,需要的朋友可以参考下
目标：实现一个正方形，这个正方形边长等于
方法一：使用单位vw， （ps我觉得这个是最简单的方法）
html结构也很简单，只有一个div即可
<html>
<body>
<div class="square">
</div>
</body>
</html>
.square{
width: 50vw;
height: 50vw;
background: blue;
}
方法二： 使用padding-bottom
要点：
1.height: 0， 内容会溢出到padding里，不用担心~~
2.padding-bottom 值设置为百分比时候，相对于包含块的宽度。
3.需要设置包含块
html结构：
<html>
<body>
<div class="container">
<div class="square">
</div>
</div>
</body>
</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 的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
这篇文章主要为大家介绍了正方形图片使用CSS如何实现成圆形布局，不使用PS软件处理，直接使用DIV CSS布局如何实现图片圆形化，具体实现过程请看下文2014-10-10
这篇文章主要介绍了CSS实现一个自适应的正方形的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2020-11-23
最新评论