Le contenu de cet article explique comment implémenter des carrés adaptatifs en CSS ? Existe-t-il un code ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现自适应正方形</title>
<style>
/*使用padding-bottom实现正方形*/
#test7{
width: 400px;
background: gray;
}
.placeholder {
width: 30%;
padding-bottom: 30%;/* padding百分比相对父元素宽度计算,用padding去填充height*/
height: 0;/*避免被内容撑开多余的高度 */
background: #4acfff;
}
.vw {
width: 10%;
height: 10vw;
background: pink;
}
</style>
</head>
<body>
<!-- 使用padding-bottom实现正方形 -->
<!--
padding百分比相对父元素宽度计算,用padding去填充height
-->
<p id="test7">
<p class="placeholder">使用padding-bottom实现正方形</p>
</p>
<!-- 使用css3单位vw -->
<!--
原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦
-->
<p class="vw"></p>
</body>
</html>Ce qui précède est l'introduction complète. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web PHP chinois.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Introduction à l'utilisation du code complet VBS
Quelles sont les conditions pour ouvrir un compte en monnaie numérique ? C'est gratuit?
fichier_get_contents
Introduction au logiciel de calcul en ligne
Comment résoudre le problème de l'impossibilité d'ouvrir la partition du disque dur
qu'est-ce que ça veut dire
Comment résoudre le problème de téléchargement lent de Baidu Netdisk
Qu'est-ce que le réseau local
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
