传统方法正方形用固定的形式写 直接长＝宽写固定的值如下

  1.  
    .box{
  2.  
    width: 200px;
  3.  
    height: 200px;
  4.  
    background: pink;
  5.  
    color: #666;
  6.  
    }

但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。

下面介绍两种比较简单的实现方法：

方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width

  1.  
    .box{
  2.  
    width: 20%;//width:20vw也可以
  3.  
    height: 20vw;
  4.  
    background: pink;
  5.  
    }

方法二：设置盒子的padding-bottom样式，让盒子的padding-bottom和盒子的宽度一样，同时设置heigh = 0px；

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <title></title>
  7.  
    <link rel="stylesheet" href="">
  8.  
    </head>
  9.  
    <style>
  10.  
    *{
  11.  
    margin: 0;
  12.  
    padding: 0;
  13.  
    }
  14.  
    .box{
  15.  
    width: 20%;
  16.  
    /* 设置height为0 ，避免盒子被内容撑开多余的高度 */
  17.  
    height: 0px;
  18.  
    /* 把盒子的高撑开，
  19.  
    和width设置同样的固定的宽度或者百分比 ，
  20.  
    百分比相对的是父元素盒子的宽度 */
  21.  
    padding-bottom: 20%;
  22.  
    background: pink;
  23.  
    color: #666;
  24.  
    }
  25.  
    </style>
  26.  
    <body>
  27.  
    <div class="box">
  28.  
    <p>&nbsp;这是一个自适应的正方形</p>
  29.  
    </div>
  30.  
    </body>
  31.  
    </html>

要注意的是，如果这里没有写height：0px；当盒子里面有内容的时候，盒子会被内容撑大

      

如果把padding-bottom改成padding-top会出现什么现象？

       

可以看出来在正方形中有内容的时候，内容会现实在正方形外面，这是因为默认文字是从左到右，从上到下的排列，所以paddin-top以后文字会在正方形外面，所以这里的paddin-bottom和padding-top并不能混用

另外因为盒子设置了heigh:0px；导致该元素里面再有子元素的时候，就无法正常设置高度。所以我们需要用到position: absolute;使当前内容脱离文档流,那么内容的高度百分比参照的就是父级的宽度

  1.  
    *{
  2.  
    margin: 0;
  3.  
    padding: 0;
  4.  
    }
  5.  
    .box{
  6.  
    width: 20%;
  7.  
    /* 设置height为0 ，避免盒子被内容撑开多余的高度 */
  8.  
    height: 0px;
  9.  
    /* 把盒子的高撑开，
  10.  
    和width设置同样的固定的宽度或者百分比 ，
  11.  
    百分比相对的是父元素盒子的宽度 */
  12.  
    padding-bottom: 20%;
  13.  
    background: pink;
  14.  
    color: #666;
  15.  
    position: relative;
  16.  
    overflow: hidden;
  17.  
    }
  18.  
    p{
  19.  
    position: absolute;
  20.  
    width: 100%;
  21.  
    height: 100%;
  22.  
    background: yellow;
  23.  
    }

这样子盒子里面的内容就把正方形占满啦

CSS 实现一个自适应的正方形的更多相关文章

  1. Layout 不可思议（一）—— CSS 实现自适应的正方形卡片

    最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去 需求是实现一个自适应的正方形卡片,效果如下: 顺便(开个坑)写个系列,总结那些设计精妙的布局结构 本次页面的 ...

  2. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  3. 如何去设计一个自适应的网页设计或HTMl5

    如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...

  4. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  5. Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  6. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  7. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  9. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. Cobalt Strike生成后门

    Cobalt Strike生成后门 1.Payload概念 Payload在渗透测试之中大家可以简单地理解为一段漏洞利用/植入后门的代码或程序. 2.Cobalt Strike生成后门 攻击--> ...

  2. WinBox软路由的自定义IP设定

             软路由ros(MIKRTIK)安装简单步骤 由于本主也是刚刚接触软路由这个硬件方面的知识.所以也是略知皮毛而已,今天通过网上的学习,然后自己总结了一下怎么在软路由中设定一个自定义IP ...

  3. [shell] shell 变量生命周期, source, export

    1. shell 的派生 用户登录到Linux系统后,系统将启动一个用户shell.在这个shell中,可以使用shell命令, 或声明变量,也可以创建并运行shell脚本程序.运行shell脚本程序 ...

  4. Linux学习小记（1）---nm*ip

    注意在CentOS7中ifconfig等命令已经被ip取代,ip的功能很强大,而NetworkManager系列命令(nmcli nmtui等)可以用于配置网络连接

  5. 来简单说说var,let,const,function,import,class

    一.var和let var已经在JavaScript中存在很长一段时间了,但是它存在了一些不足的地方,接下来我们就来看看吧 首先var存在变量提升,这是怎么一回事呢,我们看下面代码 为什么是它呢,是因 ...

  6. getElementsByTagName得到的对象

    今天练习使用DOM创建html元素,想通过getElementsByTagName("body")获得body对象,然后建立和新创建的元素的关系,如下图: 其实,getElemen ...

  7. JS淘宝小广告

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  8. Bilibili手机端下载的Download文件批量转换为MP4软件【Bilibili_DownVideoToMp4】原创发布

    Bilibili手机端下载的Download文件批量转换为MP4软件[Bilibili_DownVideoToMp4]原创发布 起因 Bilibili手机端的视频下载下来只能在手机上看,手机屏幕太小看 ...

  9. ArcGIS Runtime SDK for Android中SimpleFillSymbol.Style样式

    SimpleFillSymbol.Style样式枚举共8种: 1.BACKWARD_DIAGONAL 反对角线填充 2.CROSS 交叉线填充 3.DIAGONAL_CROSS 前后对角线填充 4.F ...

  10. NIO学习笔记，从Linux IO演化模型到Netty—— Java NIO零拷贝

    同样只是大致上的认识. 其中,当使用transferFrom,transferTo的时候用的sendfile(). 如果系统内核不支持 sendfile,进一步执行 transferToTrusted ...