目标:实现一个正方形,这个正方形边长等于 方法一:使用单位vw,(ps我觉得这个是最简单的方法)
2019-04-22 20:39
429 查看
html结构也很简单,只有一个div即可
.square{
width: 50vw;
height: 50vw;
background: blue;
}
方法二: 使用padding-bottom
要点:
height: 0, 内容会溢出到padding里,不用担心~~
padding-bottom 值设置为百分比时候,相对于包含块的宽度。
需要设置包含块
html结构:
复制代码
复制代码 css:复制代码
{
margin: 0;
}
/ 设置撑满页面可见区域 /
.container{
height: 100vh;
width: 100vw;
background: palegoldenrod;
}
.square{
width: 50%; / 相对与container的width /
padding-bottom: 50%; / 相对与container的width */
background: palegreen;
}
复制代码
行了吧,两种就可以了,你也可以使用margin,不过会有塌陷的危险,所以,就这两个够用啦~~
相关文章推荐
- 简单完整的代码,通过这个代码你将对RSA加密算法在Java中的实现方法有一个初步的了解,这个类,你可以直接使用,水平高的,就自己修改完善下代码。
- GIT 版本控制软件的常用命令记录每次更新到仓库 现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝。接下来,对这些文件作些修改,在完成了一个阶段的目标和使用方法
- 使用hadoop命令rcc生成Record 一个简单的方法来实现自己的定义writable对象
- 一个javafx初学者实现国际象棋简单方法(很粗暴)棋子实现不再提供 没有使用java编程思想用的很基础的c语言思想
- c#打包文件解压缩 C#中使用委托、接口、匿名方法、泛型委托实现加减乘除算法 一个简单例子理解C#的协变和逆变 对于过长字符串的大小比对
- 一个基于POI的通用excel导入导出工具类的简单实现及使用方法
- 【C语言】没事可以试试这个小程序,使用文件操作,模拟实现一个简单的文件拷贝工具!
- List的All方法使用问题:我用List1的All方法来确保List1的所有每个数组元素中是否包含Arr1中的任意元素,这个部分很难实现。 因为,没有一个数组中是否包含另一个数组中的任意元素这个功能
- c/c++ 使用boost库实现的一个简单判断字符串编码的方法
- 【CVTE】请使用原声Javascript实现一个方法,判断html中出现次数最多的标签,并统计这个次数
- 一个简单的方法:找出哪个的程序使用了哪个端口
- Asp.Net使用POST方法最简单的实现
- 一个简单实用的ASP调试函数和使用方法
- 在Quartus II中使用JTAG模式固化程序到EPCS中的方法==掌握这个方法后就可以在做PCB时候只留一个JTAG下载口即可。
- LAMP的一个简单实现方法
- 使用common-pool实现的一个简单的线程池
- 一个简单方法实现bmp背景透明
- jsp生成html(方法简单,只用使用一个serlvet)
- 使用C#实现只允许运行一个程序实例的几种方法
- 10_9_4编写一个类MyCopyableClass,该类可以使用方法GetCopy()返回它本身的一个副本.这个方法应使派生与System.Object的MemberwiseClose()方法.该类