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

  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. Shell脚本 硬盘监控

    用shell 写了一个硬盘监控的小程序   #!/bin/bash MAX=95 EMAIL=zonghua@iyunshu.com PART=sda1   IP=`ifconfig |grep -w ...

  2. 关于Java/Kotlin下载图片，图片打开不能显示问题探究

    图片下载其实是个很简单的功能,通过IO流从在线地址获取流,之后将流输出到文件即可完成下载功能,但是,最近我发现某个网站中的图片下载成功,但是打开却是无法打开,这让我迷惑,百度上根本就没有人说清楚 今天 ...

  3. 响应式Web设计：构建令人赞叹的Web应用程序的秘诀

    骨架屏(Skeleton Screen) 参考博客:https://medium.com/@owencm/reactive-web-design-the-secret-to-building-web- ...

  4. jsplumb 常用事件

    1. jsPlumb.getAllConnections() 获取所有连接线2. jsPlumb.deleteEveryConnection(); 清空所有连接线3. jsPlumb.deleteCo ...

  5. input event兼容性

    <div class="wrapper"> <p>keypress - event not call on adroid</p> <inp ...

  6. 智和网管平台SugarNMS 2019年度IT综合监控突破性成果概览

    一元复始,万象更新,欢辞旧岁,喜迎新年. 智和信通,精益求精,携手并进,迎战鼠年! 2020年1月10日,北京智和信通技术有限公司(以下简称“智和信通”)以“2020携手并进”为主题的年度庆典暨201 ...

  7. 图解css3学习笔记

    (0)css3是啥 css3是最新版本的css,添加了许多新的特性,将切图仔从繁重的工作中解救出来. css3现在主流的浏览器大部分都支持(ie9部分支持,ie8之前的都不支持) 渐进增强,优雅降级 ...

  8. sublime3 快捷键总结

    配置环境:win7 sublime3 1,快速html5模板页(已安装Emmet插件) 输入html:5后,然后 ctrl+e 2,快速复制 ctrl+shift+d 复制光标所在当前行 3,向上/向 ...

  9. appium server与nodeJs 兼容问题

    在命令行模式下启动appium server时报错:error: uncaughtException: Cannot find module 'internal/util/types' 再来看看app ...

  10. IoU-aware Single-stage Object Detector for Accurate Localization

    网络的结构如下: 采用FPN结构,Backbone是RetinalNet,分成了P3~P7共5个Layer,分别训练不同尺寸的Box.每个Layer对应的Head有2个分支,包括一个单独的分支用来预测 ...