传统式方式正正方形用固定不动的方式写 立即长＝宽写固定不动的值以下
.box{
width: 200px;
height: 200px;
background: pink;
color: #666;
}
可是许多状况下，在手机端的设计方案里，照片的总宽伴随着不一样的移动终端开展更改的，这一情况下就必须采用响应式的正正方形的完成。
下边详细介绍二种较为简易的完成方式：
方式一：CSS3 vw 企业，vw是相对性于视口的总宽。视口被平均分为100企业的vw。1vw = 1% viewport width
.box{
width: 20%;//width:20vw还可以
height: 20vw;
background: pink;
}
方式二：设定小盒子的padding-bottom款式，让小盒子的padding-bottom和小盒子的总宽一样，同时设定heigh = 0px；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 20%;
/* 设定height为0 ，防止小盒子被內容撑开过剩的高宽比 */
height: 0px;
/* 把小盒子的高撑开，
和width设定一样的固定不动的总宽或是百分数 ，
百分数相对性的是父原素小盒子的总宽 */
padding-bottom: 20%;
background: pink;
color: #666;
}
</style>
<body>
<div class="box">
<p> 它是一个响应式的正正方形</p>
</div>
</body>
</html>
要留意的是，假如这儿沒有写height：0px；当小盒子里边有內容的情况下，小盒子会被內容撑大
假如把padding-bottom改为padding-top会出現甚么状况？
能看出去在正正方形中有內容的情况下，內容会实际在正正方形外边，它是由于默认设置文本是以左到右，从上到下的排序，因此paddin-top之后文本会在正正方形外边，因此这儿的paddin-bottom和padding-top其实不能互用
此外由于小盒子设定了heigh:0px；造成该原素里边还有子原素的情况下，就没法一切正常设定高宽比。因此大家必须采用position: absolute;使当今內容摆脱文本文档流,那麼內容的高宽比百分数参考的便是父级的总宽
*{
margin: 0;
padding: 0;
}
.box{
width: 20%;
/* 设定height为0 ，防止小盒子被內容撑开过剩的高宽比 */
height: 0px;
/* 把小盒子的高撑开，
和width设定一样的固定不动的总宽或是百分数 ，
百分数相对性的是父原素小盒子的总宽 */
padding-bottom: 20%;
background: pink;
color: #666;
position: relative;
overflow: hidden;
}
p{
position: absolute;
width: 100%;
height: 100%;
background: yellow;
}
那样子小盒子里边的內容就把正正方形占满啦
到此这篇有关CSS完成一个响应式的正正方形的方式实例的文章内容就详细介绍到这了,大量有关CSS 响应式正正方形內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 如何创建网站_免费网站建站_网站建设文章_网站建设7个基本流程_自动建站 版权所有 （网站地图） 粤ICP备10235580号