css样式学习

时间:2020-07-11
本文章向大家介绍css样式学习,主要包括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的大小,里面的框是垂直水平居中,且能改变框中文字的值。

$flag 上一页 下一页