css实现一个正方形

一、固定宽高

宽高固定是最简单的情况了，只要设置对应的宽高就可以了

height: 100px;
width: 100px;

二、利用vw

vw是相对于视口的宽度。视口被均分为100单位的vw。


height: 10vw;
width: 10vw;

三、利用padding-bottom

padding设置为百分比时是相对于父元素宽度计算的，利用此特性就可以实现一个固定宽高比的div

<div class="square"></div>

.square {width: 100%;heigth: 0;padding-bottom: 100%;
}

四、利用伪元素 + padding-bottom + absolute

利用padding-bottom确实可以实现正方形的效果，但是height需要设置成0，内部就无法很好的显示子元素。
这时候我们可以利用:after来撑高元素，再利用absolute实现一个正方形。

<div class="square"><div class="content">正方形</div>
</div>

.square {width: 50%;position: relative;
}.square:after {content: "";display: block;padding-bottom: 100%;
}.content {position: absolute;width: 100%;height: 100%;
}

css实现一个正方形相关推荐

使用css实现一个正方形
很多情况下,在移动端的设计里,会出现要求图片等高等宽,而图片的宽度又是随着不同的移动设备进行改变的,这个时候就需要用到正方形的一个实现. <!DOCTYPE html> <html& ...
如何用css做一个正方形（自适应屏幕宽度）
DOM结构 <div class="img-container"><div class="img-box"><img src=&q ...
html 创建一个正方形,css 如何设置带有正方形项目的列表
css设置带有正方形项目的列表的方法:首先创建一个HTML示例文件:然后使用ul无序列表标签,并指定"list-style-type"为"square"即可设置 ...
使用CSS定义一个和屏幕宽度一样正方形容器
使用CSS定义一个和屏幕宽度一样正方形容器介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器. 问题有时候,我们在移动端需要做一个商品展示页面,一打开页面,屏幕的上面一半展示为商品的图 ...
用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...
html 数字加圆圈,如何使用CSS围绕一个数字用圆圈？
这里是一个关于JSFiddle的演示 HTML: 30 CSS: .numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remo ...
九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...
使用CSS写一个三角形
原理主要是通过CSS边框来实现的,边框粗细决定这三角大小. 给盒子宽高为0,给显示的边框添加颜色,其余边框为透明色即可. 第一种方法定义一个盒子box,并设置宽高分别为0,给border的每一个边 ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...