css几种常见的布局

太难了我叫CZ
234 阅读1分钟

效果在这里


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width ,initial-scale=1">
	<title>网页布局</title>
	<style>

		html,body{
			padding: 0px;
			margin: 0px;
		}

		.tc{
			text-align: center;
		}

		.dib{
			display: inline-block;
		}

		.pubbox{
			border: 3px solid;
			height: 200px;
			margin: 5px;
		}

		.pubitem{
			height: 40px ;
			width: 40px;
			border: 3px solid red;
			margin: 5px;
		}

		.box2{
			display: flex;
			flex-direction: column;
			/* 这个属性 */
			justify-content: center;
		}

		.box3{
			display: flex;
			flex-direction: column;
			/* 这个属性 */
			justify-content: space-between;
		}

		.box4{
			display: flex;
			flex-direction: column;
			/* 这个属性 */
			justify-content: space-around;
		}

		.box5{
			display: flex;
			flex-direction: column;
			/* 这个属性 */
			justify-content: space-evenly;
		}
		.box11{
			display: flex;
			flex-direction: column;
			/* 这个属性 */
			justify-content: center;
			align-items: center;
		}

		.box6{

		}
		.box6-item1{
			display: inline-block;
		}


		.box7{
			text-align: center;
		}
		.box7-item1{
			display: inline-block;
		}

		.box8{
			display: flex;
			flex-direction: row;
			/* align-items: center; */
			justify-content: center;
		}

		.box9{
			display: flex;
			flex-direction: row;
			align-items: center;
			/* justify-content: center; */
		}

		.box10{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

		.box12{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.box13{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}

		.box14{
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
		}


		.box15{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
		}

		.box16{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.box17{

		}
		.box17-item1{
			display: inline-block;
		}

	</style>
</head>
<body>

	<h2>布局</h2>

	<p>
		这里主要用到的 css 知识有: <br>
		display:flex; <br>
		flex-direction:row/column<br>
		justify-content:center/space-between/space-around/space-evenly<br>
		align-items:center<br>
	</p>
	<p>
		这里主要用到的 css 知识还有: <br>
		display:inline-block/block; 的一些特性 <br>
	</p>

	<code>
		<p>所有的父盒子我们都用.box 这个类标识</p>
		<P>所有的子元素都用.item 这个类标识</P>
		<p>统统以最简单的形势来写 不涉及嵌套</p>
		<p>嵌套其实也就是将.item子元素作为父盒子写另一种布局</p>
	</code>

	<h3>1列布局-啥都不做</h3>
	<div class="pubbox box1">
		<div class="pubitem box1-item1"></div>
		<div class="pubitem box1-item1"></div>
		<div class="pubitem box1-item1"></div>
	</div>

	<h3>2列布局-绝对上下居中</h3>
	<div class="pubbox box2">
		<div class="pubitem box2-item1"></div>
		<div class="pubitem box2-item1"></div>
		<div class="pubitem box2-item1"></div>
	</div>

	<h3>3列布局-绝对上下对称</h3>
	<div class="pubbox box3">
		<div class="pubitem box3-item1"></div>
		<div class="pubitem box3-item1"></div>
		<div class="pubitem box3-item1"></div>
	</div>

	<h3>4列布局-绝对上下间隔相等</h3>
	<p>指得是子元素和子元素之间的间隔相等</p>
	<div class="pubbox box4">
		<div class="pubitem box4-item1"></div>
		<div class="pubitem box4-item1"></div>
		<div class="pubitem box4-item1"></div>
	</div>

	<h3>5列布局-绝对上下间隔相等</h3>
	<div class="pubbox box5">
		<div class="pubitem box5-item1"></div>
		<div class="pubitem box5-item1"></div>
		<div class="pubitem box5-item1"></div>
	</div>

	<h3>11列布局-绝对上下左右居中</h3>
	<div class="pubbox box11">
		<div class="pubitem box11-item1"></div>
		<div class="pubitem box11-item1"></div>
		<div class="pubitem box11-item1"></div>
	</div>

	<code>
		从上3、4、5 可以看出 父盒子的间距越来越大是一个特点。
		<br/>
		接下来看行布局
	</code>

	<h3>6行布局-display</h3>
	<div class="pubbox box6">
		<div class="pubitem box6-item1"></div>
		<div class="pubitem box6-item1"></div>
		<div class="pubitem box6-item1"></div>
	</div>

	<h3>7行布局-display-左右居中</h3>
	<div class="pubbox  box7">
		<div class="pubitem  box7-item1"></div>
		<div class="pubitem  box7-item1"></div>
		<div class="pubitem  box7-item1"></div>
	</div>

	<h3>8行布局-flex-左右居中</h3>
	<div class="pubbox box8">
		<div class="pubitem box8-item1"></div>
		<div class="pubitem box8-item1"></div>
		<div class="pubitem box8-item1"></div>
	</div>

	<h3>9行布局-flex-上下居中</h3>
	<div class="pubbox box9">
		<div class="pubitem box9-item1"></div>
		<div class="pubitem box9-item1"></div>
		<div class="pubitem box9-item1"></div>
	</div>

	<h3>10行布局-flex-上下左右绝对居中</h3>
	<div class="pubbox box10">
		<div class="pubitem box10-item1"></div>
		<div class="pubitem box10-item1"></div>
		<div class="pubitem box10-item1"></div>
	</div>

	<h3>12行布局-flex-左右对称</h3>
	<div class="pubbox box12">
		<div class="pubitem box12-item1"></div>
		<div class="pubitem box12-item1"></div>
		<div class="pubitem box12-item1"></div>
	</div>

	<h3>13行布局-flex-左右间隔相等</h3>
	<p>指得是子元素和子元素之间的间隔相等</p>
	<div class="pubbox box13">
		<div class="pubitem box13-item1"></div>
		<div class="pubitem box13-item1"></div>
		<div class="pubitem box13-item1"></div>
	</div>

	<h3>14行布局-flex-左右间隔相等</h3>
	<div class="pubbox box14">
		<div class="pubitem box14-item1"></div>
		<div class="pubitem box14-item1"></div>
		<div class="pubitem box14-item1"></div>
	</div>

	<h2>换行</h2>

	<p>
		这里主要用到：<br/>
		flex-warp:warp<br/>
		overflow:auto;/overflow-y:auto;/overflow-x:auto;
	</p>

	<h3>15 flex列布局换行</h3>
	<div class="pubbox box15">
		<div class="pubitem box15-item1"></div>
		<div class="pubitem box15-item1"></div>
		<div class="pubitem box15-item1"></div>
		<div class="pubitem box15-item1"></div>
	</div>

	<h3>16 flex行布局换行</h3>
	<div class="pubbox box16">
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
		<div class="pubitem box16-item1"></div>
	</div>


	<h3>17 普通行布局换行</h3>
	<div class="pubbox box17">
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
		<div class="pubitem box17-item1"></div>
	</div>

</body>
</html>
avatar
文章
阅读
粉丝