Heim > Artikel > Web-Frontend > Wie implementiert man adaptive Quadrate in CSS? Gibt es einen Code?

Wie implementiert man adaptive Quadrate in CSS? Gibt es einen Code?

云罗郡主nach vorne: 2018-10-19 15:33:472451Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierung adaptiver Quadrate in CSS. Gibt es einen Code? Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

<!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>

Das Obige ist die vollständige Einführung. Wenn Sie mehr über das CSS-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie implementiert man adaptive Quadrate in CSS? Gibt es einen Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Mehrere Divs werden vertikal, zentriert und horizontal angeordnet (mit Code)Nächster Artikel：Mehrere Divs werden vertikal, zentriert und horizontal angeordnet (mit Code)

In Verbindung stehende Artikel

Mehr sehen