经过前段时间的学习，快速入门了HTML和CSS，已经基本掌握相关知识。接下来就是对于CSS布局的总结。

一、盒子布局

 盒子布局在本质上是一个盒子，用于封装周围的HTML元素，包括边距、边框、填充和内容。

 盒子模型可以通过border、margin、padding这三个属性进行设置布局样式。

HTML5怎么设置盒子 html盒子布局及效果_css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子布局</title>
	<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
	<div id="border1">
	<span id="ss1" class="s1">margin-top</span>
	<span id="ss1" class="s2">margin-bottom</span>
	<span id="ss1" class="s3">margin-left</span>
	<span id="ss1" class="s4">margin-right</span>
	<div id="border2">
	<span id="ss2" class="s5">border-top</span>
	<span id="ss2" class="s6">border-bottom</span>
	<span id="ss2" class="s7">border-left</span>
	<span id="ss2" class="s8">border-right</span>
	</div>
	<div id="border3">
	<span id="ss3" class="s9">padding-top</span>
	<span id="ss3" class="s10">padding-bottom</span>
	<span id="ss3" class="s11">padding-left</span>
	<span id="ss3" class="s12">padding-right</span>
	</div>
	<div id="border4">
	<span id="ss4" class="s13">content</span>
	</div>
	</div>
</body>
</html>
*{
		margin: 0 auto;
		padding: 0;
	}
	#border1{
		width: 800px;
		height: 400px;
		border: 1px solid #e0ffff;
		background-color: #e0ffff;
	}
	#border2{
		width: 700px;
		height: 300px;
		border: 1px solid #afeeee;
		background-color: #afeeee;
		margin-top: -235px;
	}
	#border3{
			width: 600px;
			height: 200px;
			border: 1px solid #00ffff;
			background-color: #00ffff;
			margin-top: -250px;
	}
	#border4{
			width: 500px;
			height: 100px;
			border: 1px solid #00cede;
			background-color: #00cede;
			margin-top: -150px;
	}
	#ss1{
		font-size: 22px;
		color: #7fffd4;
	}
	#ss2{
		font-size: 22px;
		color: #008b8b;
	}
	#ss3{
		font-size: 22px;
		color: #66cdaa;
	}
	#ss4{
		font-size: 22px;
		color: blue;
	}
	.s1{
		position: relative;
		left: 350px;
	}
	.s2{
		position:relative;
		bottom: -350px;
		left: 200px;
	}
	.s3{
		writing-mode:tb-rl;
		position:relative;
		bottom: -120px;
		left: -380px;
		display: block;
		}
	.s4{
		writing-mode:tb-rl;
		position:relative;
		bottom: 20px;
		left: 380px;
		display: block;
	}
	.s5{
		position: relative;
		left: 300px;
	}
	.s6{
		position:relative;
		bottom: -270px;
		left: 170px;
	}
	.s7{
		writing-mode:tb-rl;
		position:relative;
		bottom: -70px;
		left: -335px;
		display: block;
		}
	.s8{
		writing-mode:tb-rl;
		position:relative;
		bottom: 65px;
		left: 335px;
		display: block;
	}
	.s9{
		position: relative;
		left: 250px;
	}
	.s10{
		position:relative;
		bottom: -168px;
		left: 100px;
	}
	.s11{
		writing-mode:tb-rl;
		position:relative;
		left: -280px;
		display: block;
		}
	.s12{
		writing-mode:tb-rl;
		position:relative;
		bottom: 130px;
		left: 280px;
		display: block;
	}
	.s13{
		position: relative;
		top: 40px;
		left: 200px;
	}

盒子模型的重要属性

属性

描述

border

边框，用来将一个盒子的边距与周围其它盒子相分离，即使不可见，每个盒子也都有边框。

margin

从盒子边框到下一个盒子的距离（即外边距）

padding

元素内容与盒子边距的距离（即内边距）

二、浮动布局

通过设置float属性进行的布局。float属性能够将某个元素从正常流中抽取出来，并将其尽可能远地放置在包含盒子的左侧或右侧。包含元素中的其他内容则会围绕关联有float属性的元素进行流动。

                                 

HTML5怎么设置盒子 html盒子布局及效果_边距_02

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float布局</title>
	<link rel="stylesheet" type="text/css" href="css2.css">
</head>
<body>
	<div id="d1">首页</div>
	<div id="d2">新闻动态</div>
	<div id="d3">关于我们</div>
</body>
</html>
#d1{
		width: 100px;
		height: 20px;
		background-color: red;
		float: left;
		text-align: center;
	}
	#d2{
		width: 100px;
		height: 20px;
		background-color: pink;
		float: left;
        text-align: center;
	}
	#d3{
		width: 100px;
		height: 20px;
		background-color: yellow;
		float: left;
        text-align: center;
	}

 

float的取值

值

描述

none

默认值，盒子不发生浮动，并保持在正常流中应处的位置。

left

盒子浮动到包含元素的左侧，而包含元素的其他内容浮动至其右侧。

right

盒子浮动到包含元素的右侧，而包含元素的其他内容浮动至其左侧。

三、定位布局

定位就是将指定元素摆放到页面的任意位置，通过定位可以任意摆放元素。
通过position属性来设置元素的定位。

定位布局在写前面已经用过了，就不在展示。

position的取值

值

描述

static

与正常流相同，并且为默认值。

relative

盒子的位置可以相对其在正常流中的位置出现偏移，对象不可层叠，可根据left、right、top和bottom等属性的值在正常流中偏移。

fixed

固定在屏幕的某个位置，位置通过left、right、top和bottom属性指定，并且不随用户滚动窗口而改变位置。

四、弹性盒子

弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex而定义为的弹性容器。 

HTML5怎么设置盒子 html盒子布局及效果_HTML5怎么设置盒子_03

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<link rel="stylesheet" type="text/css" href="css3.css">
</head>
<body>
	<div id="big">
	<div id="d1">首页</div>
	<div id="d1">新闻动态</div>
	<div id="d1">关于我们</div>
	</div>
</body>
</html>

 

#big{
		width: 400px;
		height: 40px;
		display: flex;
		flex-wrap: nowrap;
		background-color: blue;
	}
	#d1{
		width: 100px;
		height: 20px;
		background-color: #f1f1f1;
		text-align: center;
		margin: 10px;
	}
	</style>

弹性盒子属性

属性

描述

flex-direction

指定弹性子元素的排列方式

flex-wrap

设置弹性子元素超出父容器时是否换行

flex-flow

flex-direction和flex-wrep的缩写

align-items

设置弹性子元素在侧轴（纵轴）方向上的对齐方式

align-content

在弹性子元素没有占用交叉轴上所有可用的空间时对齐弹性子元素（垂直）

justify-content

设置弹性子元素在主轴（横轴）方向上的对齐方式

注意：弹性盒子只是规定了弹性子元素如何在弹性容器内布局，其他时候（弹性容器外，弹性子元素内）都是正常渲染的。并且默认弹性子元素只在弹性盒子的一行展示，默认每个容器只有一行