CSS学习day1布局一（浮动布局）

略过了安装教程以及htm的介绍。
这里使用的是sublime进行html的编译。
首先是在html的学习中，布局是首先要熟悉的，就像雕刻和画画一样，你不可能从头开始，把所有的细节都刻画上去。这样做会导致效率低下，而且很有可能会让布局出现问题，所以，要先做的应该是把大体的模块规划完成以后再去刻画细节部分，html也是这样。首先我们创建一个普通的html页面，有三个div通过css来控制

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#test1{
	width: 800px;
	height: 200px;
	background: gray;
}
#test2{
	width: 800px;
	height: 200px;
	background: red;

}
#test3{
	width: 800px;
	height: 200px;
	background: blue;

}
				</style>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
</body>
</html>

如上是创建了一个普通的网页，大致效果如下 CSS学习day1布局一（浮动布局）这时如果我们需要让不同模块进行左右相对要怎么办呢？比如说我想让第一个模块和第二个模块在同一行需要怎么做呢？
这时就需要使用浮动布局—float。
浮动布局通俗点来讲，按照英文本身的意思float有漂浮浮动的意思，如果在模块的css里添加float属性，我们就可以看到两个模块的变化。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#lside{
			height: 100px;
			width: 20px;
			background: red;
			float: left;
		}
		#rside{
			height: 100px;
			width: 20px;
			background: blue;
			float: left;
		}
	
	</style>
</head>
<body>
		<div id="lside">我是左边</div>
		<div id="rside">我是右边</div>
	
</body>
</html>

效果图大致如下
CSS学习day1布局一（浮动布局）既然说到了float有浮动的意思，那么该怎么理解float属性本身呢，你可以理解为在添加了这个属性之后，div模块就会漂浮起来，这里只需要添加一个简单的无float属性的div即可验证。

#test1{
			height: 300px;
			width: 200px;
			background: green;
		}
		<div id=test1>我是测试</div>

此时的效果图如下
CSS学习day1布局一（浮动布局）我们可以看到，test1的div模块有一部分被我是左边和我是右边挡住了，其实就可以理解为我是左边和我是右边漂浮起来以后，这时在插入了test1以后，test1就相当于在他们下面。

CSS学习day1布局一（浮动布局）

相关推荐