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

  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. [Redis-CentOS7]Redis设置连接密码(九)

    设置Redis密码 修改/etc/redis.conf 一定要强密码redis为内存存储 抗暴力破解强 requirepass password 重启服务 systemctl restart redi ...

  2. SpringBoot基础篇-SpringBoot快速入门

    SpringBoot基础 学习目标: 能够理解Spring的优缺点 能够理解SpringBoot的特点 能够理解SpringBoot的核心功能 能够搭建SpringBoot的环境 能够完成applic ...

  3. IO包中的RandomAccessFile类

    RandomAccessFile RandomAccessFile 是随机访问文件的类.它支持对文件随机访问的读取和写入,即我们也可以从指定的位置读取/写入文件数据,因为该类在其内部封装了一个数组和指 ...

  4. 全志V3S 编译运行xboot笔记

    目录 全志V3S 编译运行xboot笔记 1.目的 2.环境准备 3.下载 3.1 fel模式进入 3.2 sunxi-fel工具的使用 3.3 烧录 4.串口打印 5.总结 全志V3S 编译运行xb ...

  5. 通过HTML和CSS1:1还原风暴英雄官方网站

    <!--HTML代码--> <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. Javascript 基础学习（三）js 的原始类型和声明变量

    java的基本数据类型一共有 byte short int long float double char boolean js中定义变量使用关键字 var js的原始类型(五个) String: 字符 ...

  7. SRAM结构框图解

    SRAM 即静态RAM.它也由晶体管组成,SRAM的高速和静态特性使它们通常被用来作为Cache存储器.计算机的主板上都有Cache插座. 下图所示的是一个SRAM的结构框图. 由上图看出SRAM一般 ...

  8. Webdriver启动Firefox浏览器后，页面显示空白

    在使用pycharm码代码时编译总是出错,后来验证发现浏览器启动后出现问题.白白耗了我2个小时.我把我的解决方案写出来,希望对大家有帮助. 1.现象:起初安装的时候总是能正常运行,有一天突然发现Web ...

  9. UCF Local Contest 2015 J 最小割

    题意: 有

  10. 高级UI组件

    1.进度条 (1).圆形进度条(一般默认为圆形进度条) <ProgressBar android:layout_width="wrap_content" android:la ...