|
一、浮动
div是块级元素，独占一行。
浮动可以理解为将一个块级元素脱离标准流，漂浮在标准流之上。
浮动的设置方法：
Float:left/right;
不想标准流之中的元素受影响，可以设置：
Clear:both;不允许有浮动对象。
Left;不允许有左浮动对象。
Right;不允许有右浮动对象。
如果多个元素设置浮动，被设置浮动的元素会组成一个流，并且会横着排队，知道父元素的宽度不够才会换一行排列。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>浮动</title>
<style type="text/css">
#div1{
width:200px;
height:100px;
background:#99cc33;
float:left}
#div2{
width:150px;
height:150px;
background:#cc33cc;
float:left;}
#div3{
width:200px;
height:100px;
background:#33ffff;
float:left;}
#div4{
width:350px;
height:60px;
background:#999966;
clear:both;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</body>
</html>
二、相对定位与绝对定位
相对定位：
position：relative;
再设置left，right，top，bottom的值，就是它相对于原来位置进行偏移。
绝对定位：
Position :absolute;
再设置left，right，top，bottom的值，就是它相对于body位置进行偏移。为元素设置了绝对偏移之后，元素就脱离了原来的队伍。
固定定位：
Position : fixed;
再设置left，right，top，bottom的值，设置了绝对定位之后，不会随着滚动条移动。
可以通过z-index的值来设置已经经过定位的元素的层级，数值越大所在的层越靠上。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>相对定位于绝对定位</title>
<style type="text/css">
body{
height:2000px;}
#div1{
width:200px;
height:100px;
background:#99cc33;}
#div2{
width:150px;
height:150px;
background:#cc33cc;
position:relative;
left:30px;
top:120px;}
#div3{
width:200px;
height:100px;
background:#33ffff;
position:absolute;
left:30px;
top:500px;}
#div4{
width:350px;
height:60px;
background:#999966;
position:fixed;
//top:180px;
clear:all}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</body>
</html>
| 
转播
