css样式学习

目录

本文内容参考自如何用一行 CSS 分别实现 10 种现代布局？。

1.可解构的自适应布局(The Deconstructed Pancake)

<html>
	<head>
		<style type='text/css'>
			.parent{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.blue{
				background-color: blue;
			}
			.coral{
				background-color: coral;
			}
			.box{
				/* flex:1 1 150px; */
				flex:0 1 150px;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="parent blue">
			<div class="box coral">1</div>
			<div class="box coral">2</div>
			<div class="box coral">3</div>
		</div>
	</body>
</html>

设置了150px作为最小值，三个box三分parent区域，跟随着浏览器的大小的改变而改变，当浏览器缩小到一定程度时，浏览器无法改变，相当于确定了浏览器的最小窗体大小。

2.超级居中

<head>
		<style type='text/css'>
			.parent{
				display: grid;
				place-items: center;
				resize: both;
				overflow: auto;
			}
			.blue{
				background-color: blue;
			}
			.coral{
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<div class="parent blue">
			<div class="box coral" contenteditable>
				:)
				</div>
		</div>
	</body>

鼠标拖拽外面的parent框的右下角改变parent的大小，里面的框是垂直水平居中，且能改变框中文字的值。

posted @ 2020-07-11 18:39  园糯  阅读(143)  评论(0)  编辑  收藏  举报