web前端开发--_前端竖直排列-优快云博客

本文链接：https://blog.youkuaiyun.com/2403_87427886/article/details/143960387

1、绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style type="text/css">
			.box{/*定义大盒子的样式*/
				width: 200px;
				height: 100px;
				background: #CCCCCC;
				position: relative;/*对父元素设置相对位置*/
			}
			/*定义三个小盒子的样式*/
			.one,.two,.three{
				width: 50px;
				height: 50px;
				background-color: #AAFFFF;
				border: 1px solid #333333;
				/*如果盒子2和盒子3高度相同边框为1px导致的不对齐*/
			}
			.two{
				position: absolute;/*设置绝对位置*/
				left: 50px;/*相对于父元素的左边缘的水平偏移50px*/
				top: 30px;/*相对于父元素的上边缘的垂直偏移30px*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">one</div>
			<div class="two">two</div>
			<div class="three">three</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 500px;
				background-color: #CCCCCC;
				position: relative;/*设置相对变量，但不设置偏移量*/
			}
			.one,.two,.three{
				width: 100px;
				height: 100px;
				background-color: #00FF00;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		</div>
	</body>
</html>

2、清除浮动的影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的影响</title>
		<style type="text/css">
			.one{/*定义一个盒子*/
				width: 200px;
				height: 100px;
				background-color: #00FF00;
				float: left;
			}
/*clear表删除，后跟left表示清除左侧浮动的影响，rigth表示清除右侧浮动的影响，both，表示左右浮动都删除*/
			.two{/*定义一个盒子*/
				height: 100px;
				width: 200px;
				background-color: #F00;
				float: left;
			}
			p{
				clear: both;/*清除浮动的影响*/
			}
		</style>
	</head>
	<body>
		<div class="one">第一块盒子</div>
		<div class="two">第二块盒子</div>
		<p>默认条件下，网页中的块元素会以标准流的方式竖直排列，即块元素一一罗列。但在网页实际排版时，有时需要，将块元素水平排列，之就需要为元素设置浮动属性。</p>
	</body>
</html>

3、清除左浮动对元素的影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除左浮动对元素的影响</title>
		<style type="text/css">
			.a1{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
			}
			
			.a2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				float: left;
			}
			.a3{
				width: 200px;
				height: 200px;
				background-color: green;
				float: left;
			}
			p{
			    clear: left;/*清除文字对左侧浮动的影响*/
			}
		</style>
	</head>
	<body>
		<div class="a1">
			one
		</div>
		<div class="a2">
			two
		</div>
		<div class="a3">
			three
		</div>
		<p>
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		   
		</p>
	</body>
</html>

4、清除右浮动对元素的影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除右浮动对元素的影响</title>
		<style type="text/css">
			.a1{
				width: 200px;
				height: 200px;
				background-color: red;
				float: right;
			}
			
			.a2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				float: right;
			}
			.a3{
				width: 200px;
				height: 200px;
				background-color: green;
				float: right;
			}
			p{
			    clear: right;/*清除文字对左侧浮动的影响*/
			}
		</style>
	</head>
	<body>
		<div class="a1">
			one
		</div>
		<div class="a2">
			two
		</div>
		<div class="a3">
			three
		</div>
		<p>
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		   
		</p>
	</body>
</html>

5、清除浮动影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动影响</title>
		<style type="text/css">
			.a1{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
			}
			
			.a2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				float: right;
			}
			.a3{
				width: 200px;
				height: 200px;
				background-color: green;
				float: left;
			}
			p{
			    clear: both;/*清除浮动的影响*/
			   /*清除元素左右的影响*/
			}
		</style>
	</head>
	<body>
		<div class="a1">
			one
		</div>
		<div class="a2">
			two
		</div>
		<div class="a3">
			three
		</div>
		<p>
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
			我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
		   
		</p>
	</body>
</html>

6、大盒子包含小盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大盒子包含小盒子</title>
		<style type="text/css">
			.box{         /*设置大盒子 的样式，不设置高度*/
				width: 450px;
				background: #FF0000;
				overflow: hidden;
				/*清除浮动影响，使父元素适应子元素的影响*/
			}
			.one{/*定义小盒子样式*/
				width: 200px;
				height: 100px;
				background-color: #FF0000;
				float: left;/*设置左浮动*/
				margin: 10px;
			}
			.two{/*定义小盒子样式*/
				width: 200px;
				height: 100px;
				background-color: #00FF00;
				float: left;/*设置左浮动*/
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">第一个块</div>
			<div class="two">第二个块</div>
		</div>
	</body>
</html>

7、固定位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定位置</title>
	</head>
	<body>
		<img style="position: fixed;right: 0;top: 200px;z-index: 999;width: 100px; src="img/cao.jpg";
	</body>
</html>

8、新年快乐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新年快乐</title>
		<style type="text/css">
			.box{
				position: relative;
				width: 400px;
				height: 400px;
				background: url(img/happy.png) no-repeat;
				margin: 50px auto;
			}
			.one,.two,.three,.four{
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: #f00;
				font-size: 38px;
				font-weight: bold;
				text-align: center;
				line-height: 50px;
			}
			.one{
				left: 0;
				top: 0;
			}
			.two{
				right: 0;
				top: 0;
			}
			.three{
				right: 0;
				bottom: 0;
			}
			.four{
				left: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">新</div>
			<div class="two">年</div>
			<div class="three">快</div>
			<div class="four">乐</div>
		</div>
	</body>
</html>

9、块元素的水平外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>块元素的水平外边距</title>
		<style type="text/css">
			.one{
				width: 200px;
				height: 100px;
				background: #FF0000;
				float: left;/*设置块左浮动*/
				margin-right: 10px;/*定义第一块的右外边距*/
			}
			.two{
				width: 200px;
				height: 100px;
				background: #00FF00;
				float: left;/*设置块左浮动*/
				margin-left: 30px;/*定义第二块的左外边距*/
			}
		</style>
	</head>
	<body>
		<div class="one">第一个块</div>
		<div class="two">第二个块</div>
	</body>
</html>

10、块间距的垂直外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>块间距的垂直外边距</title>
		<style type="text/css">
			.one{
				width: 200px;
				height: 100px;
				background: #FF0000;
				margin-bottom: 10px;/*定义第一块的下外边距*/
			}
			.two{
				width: 200px;
				height: 100px;
				background: #00FF00;
				margin-top: 30px;/*定义第二块的上外边距*/
			}
		</style>
	</head>
	<body>
		<div class="one">第一个块</div>
		<div class="two">第二个块</div>
	</body>
</html>

11、元素不浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素不浮动</title>
		<style type="text/css">
			.one{/*定义第一个盒子的样式*/
				width: 200px;
				height: 100px;
				background-color: #F00;/*红色*/
			}
			.two{   /*定义第二个盒子样式*/
				width: 200px;
				height: 100px;
				background-color: #0F0;/*绿色*/
			}
		</style>
	</head>
	<body>
		<div class="one">第一块</div>
		<div class="two">第二块</div>
		<p>默认情况下，网页中的块元素，会以标准流的方式竖直排列，及块元素从上到下一一罗列。但在网页实际排版时，有时需要将块元素水平排列，这就为元素设置浮动属性。</p>
	</body>
</html>

12、大盒子包含小盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大盒子包含小盒子</title>
		<style type="text/css">
			.box{/*定义大盒子样式，不设置高度*/
				width: 700px;
				background: green;
				overflow: hidden;
				/*清除浮动影响，使父元素适应子元素的高*/
			}
			.one{/*定义子盒子的样式*/
				width: 300px;
				height: 200px;
				background-color: red;
				float: left;/*设置左浮动*/
				margin: 10px;
			}
			.two{/*定义子盒子的样式*/
				width: 300px;
				height: 200px;
				background-color: yellow;
				float: left;/*设置左浮动*/
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one"></div>
			<div class="two"></div>
		</div>
	</body>
</html>

13、overflow验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>overflow验证</title>
		<style type="text/css">
			#a1{
				width: 500px;
				height: 200px;
				background-color: red;
				overflow: hidden;/*溢出的内容会被裁减，裁剪内容不可见*/
			}
			#a2{
				width: 400px;
				height: 200px;
				background-color: yellow;
				overflow: auto;/*产生滚动条，即自适应产生的内容*/
			}
			#a3{
				width: 300px;
				height: 200px;
				background-color: greenyellow;
				overflow: scroll;/*溢出内容容易被裁剪，浏览器会始终产生滚动条*/
			}
			#a4{
				width: 300px;
				height: 200px;
				background-color: pink;
				overflow: visible;/*对元素内容不做处理，内容可能会超出容器*/
			}
		</style>
	</head>
	<body>
		<p id="a1">
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
		虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
		击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		</p>
		<p id="a2">
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
		虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
		击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		</p>
		<p id="a3">
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
		虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
		击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		</p>
		<p id="a4">
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
		虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
		击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
		</p>
	</body>
</html>

14、段落浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>段落浮动</title>
		<style type="text/css">
			.one{/*设置第一个盒子的样式*/
				width: 200px;
				height: 100px;
				background-color: #FF0000;
				float: left;
			}
			.two{/*设置第二个盒子的样式*/
				width: 200px;
				height: 100px;
				background-color: #00FF00;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="one">第一个盒子</div>
		<div class="two">第二个盒子</div>
		<p>默认情况下，网页中的块元素，会以标准流的方式竖直排列，及块元素从上到下一一罗列。但在网页实际排版时，有时需要将块元素水平排列，这就为元素设置浮动属性。</p>
	</body>
</html>

15、相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background: #ccc;
			}
			.one,.two,.three{
				width: 50px;
				height: 50px;
				background-color: #AAFFFF;
				border: 1px solid #333333;
			}
			.two{
				position: relative;/*设置相对位置*/
				left: 50px;/*相对于原来的位置水平偏移50px*/
			    top: 30px;/*相对于原来的位置垂直偏移30px*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">one</div>
			<div class="two">two</div>
			<div class="three">three</div>
		</div>
	</body>
</html>

16、相对定位:相对于自身的定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位:相对于自身的定位</title>
		<style type="text/css">
			#box{
				width: 400px;
				height: 400px;
				background: #ccc;
			}
			#one,#two,#three{
				width: 100px;
				height: 100px;
				background: #00FF00;
				border: 1px solid #333333;
			}
			#two{
				position: relative;/*设置一个相对定位*/
				left: 30px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="one"></div>
			<div id="two"></div>
			<div id="three"></div>
		</div>
	</body>
</html>

17、静态定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>静态定位</title>
		<style type="text/css">
			/*定义一个大盒子的样式*/
			.box{
				width: 200px;
				height: 200px;
				background: #ccc;
			}
			/*定义一个小盒子的样式*/
			.one,.two,.three{
				width: 50px;
				height: 50px;
				background-color: #aaffff;
				border: 1px solid #333;
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="one">one</div>
		<div class="two">two</div>
		<div class="three">three</div>
		</div>
	</body>
</html>

18、z-index只对定位元素有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>z-index只对定位元素有效</title>
		<style type="text/css">
			.one{
				width: 200px;
				height: 200px;
				background-color: yellow;/*定位元素中的相对定位*/
				position: relative;
				z-index: 10;
			}
			.two{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
				left: 10px;
				bottom: 100px;
				z-index: 20;
			}
		</style>
	</head>
	<body>
		<div class="one">1</div>
		<div class="two">2</div>
	</body>
</html>