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!
Einführung in die Verwendung des gesamten VBS-Codes
Was ist eine Bak-Datei?
Prinzip der bidirektionalen Datenbindung
Dogecoin-Handelsplattform
Kann Microsoft Visual C++ deinstalliert werden?
So aktivieren Sie das Win7 Professional-Versionssystem
Was sind die Vor- und Nachteile der Dezentralisierung?
Wort zu ppt
