用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 的两种方法,希望?#28304;?#23478;有所帮助,如果大家有任?#25105;?#38382;欢迎给我留言,小编会及时回复大家的!

相关文章

  • 用css实现正方形div 的两种方法

    这篇文章主要介绍了用css实现正方形div 的两种方法,需要的朋友可以参考下
    2019-04-23
  • 使用常见的sticky footer布局方式

    这篇文章主要介绍了使用常见的sticky footer布局方式的相关资?#24076;?#25991;中通过示例代码介绍的非常详细,?#28304;?#23478;的学习或者工作具有一定的参考学习价?#25285;?#38656;要的朋友们下面随着小
    2019-04-17
  • ?#31243;竎ss阻断合并及其他影响

    这篇文章主要介绍了?#31243;竎ss阻断合并及其他影响的相关资?#24076;?#23567;编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-16
  • css高级应用三种方法实现多行省略的示例代码

    这篇文章主要介绍了css高级应用三种方法实现多行省略的示例代码的相关资?#24076;?#23567;编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-15
  • CSS实现菜单按钮动画

    这篇文章主要介绍了CSS实现菜单按钮动画,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-04-12
  • css魔法之左边竖条的多种实现方法

    这篇文章主要介绍了css魔法——左边竖条的实现方法,需要的朋友可以参考下
    2019-04-11
  • CSS奇?#23478;?#24039;之实现波浪效果

    这篇文章主要介绍了CSS奇?#23478;?#24039;之实现波浪效果,文中通过示例代码介绍的非常详细,?#28304;?#23478;的学习或者工作具有一定的参考学习价?#25285;?#38656;要的朋友们下面随着小编来一起学习学习吧
    2019-04-11
  • 解析CSS中的Grid布局完全指南

    这篇文章主要介绍了解析CSS中的Grid布局完全指南的相关资?#24076;?#25991;中通过示例代码介绍的非常详细,?#28304;?#23478;的学习或者工作具有一定的参考学习价?#25285;?#38656;要的朋友们下面随着小编来
    2019-04-09
  • CSS之居中布局的实现方法

    在前端开发中,我们经常会遇到各种上不同场景的关于居中的布局,这篇文章主要介绍了CSS之居中布局的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
    2019-04-08
  • CSS之宽高比例布局的方法示例

    这篇文章主要介绍了CSS之宽高比例布局的方法示例,文中通过示例代码介绍的非常详细,?#28304;?#23478;的学习或者工作具有一定的参考学习价?#25285;?#38656;要的朋友们下面随着小编来一起学习学
    2019-04-08

最新评论

时时彩包赢公式0369
极速时时彩概率器 彩票合买有哪些网 双色球历史开奖结果17124 娱乐平台注册送金币 广东十一选五基本走势 第54期绝对一肖两码中特 双色球红球图表 超级大乐透玩法 幸运28预测单双 彩票自动分析软件手机版 为什么买幸运28老是输 南粤36选7资讯频道 广西快3和值技巧 英超全场录播 重庆快乐10分彩