纯css写正方形

时间 2019-11-25

标签 css 正方形栏目 CSS 繁體版

原文原文链接

效果图：html

<!doctype html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#body {
			width: 100%;
			border: 1px solid #000;
		}

		.square {
			position: relative;
			box-sizing: border-box;
			float: left;
			width: 20%;
			border: 1px solid #000;
		}

		.square::before {
			content: "";
			display: block;
			padding-top: 100%;
		}

		.square>.square-inner {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

	</style>
</head>

<body>
	<div id="body">
		<div class="square">
			<div class="square-inner"></div>
		</div>
		<div class="square">
			<div class="square-inner"></div>
		</div>
		<div class="square">
			<div class="square-inner"></div>
		</div>
		<div class="square">
			<div class="square-inner"></div>
		</div>
		<div class="square">
			<div class="square-inner"></div>
		</div>
	</div>
	<div style="clear"></div>
	<!--.square 内部一个块级元素 padding-top: 100%;
	（::before
	这个元素就正好是一个正方形
	而后实际内容根据 .square 绝对定位
	这算是一个比较经常使用的技巧
	利用了一个特性
	子元素的垂直百分比 margin padding 是基于父元素宽度计算的
	利用这个能够实现宽高任意比例
	就这样（ -->

</body>

</html>

1. 纯 CSS 实现自适应正方形
2. 纯CSS实现自适应正方形
3. 纯css 写三角形
4. 纯CSS写三角形-border法
5. css如何搞正方形
6. css 实现正方形
7. 纯CSS写轮播
8. 纯 Css 绘制扇形
9. 纯css制做三角形
10. 纯CSS画三角形
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• PHP Ajax 跨域问题最佳解决方案
• SpringBoot中properties文件不能自动提示解决方法