純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文件不能自動提示解決方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。