Maison > Article > interface Web > Comment implémenter des carrés adaptatifs en CSS ? Y a-t-il un code ?

Comment implémenter des carrés adaptatifs en CSS ? Y a-t-il un code ?

云罗郡主avant: 2018-10-19 15:33:472495parcourir

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!

php css

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Plusieurs divs sont disposés verticalement, centrés et horizontalement (avec code)Article suivant：Plusieurs divs sont disposés verticalement, centrés et horizontalement (avec code)

Articles Liés

Voir plus