1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      用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;css阻断合并及其他影响

        这篇文章主要介绍了?#31243;css阻断合并及其他影响的相关资?#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

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>