定位#
div+css
定位
position: 把元素放在一个静态的、相对的、决定对、或固定的位置中
值：static relative absolute fixed
top: 元素向上偏移量
left: 元素向左偏移量
right: 元素向右偏移量
bottom: 元素向下偏移量
overflow: 设置元素溢出其区域发生的事情
clip: 设置元素显示的形状(主要是图片)
vertical-align: 设置元素垂直对齐方式
z-index: 设置元素的堆叠顺序 值大得放在前面 无上限
元素定位：
1.普通流定位(normal)
页面元素自上而下、从左到右的排列次序
2.相对定位(relative)
对偏移量属性：top、bottom、left、和right，使该元素相对于它的起点产生位移
注意：使用相对定位时，元素无论是否进行移动，元素仍然占据原来的空间。
使用：
#divSecond{
width:400px;
height:50px;
background-color:red;
position:relative;
top:20px;
left:50px;
}
3.绝对定位(absolute)
绝对定位的元素的偏移根据该元素最近的已定位的包含元素的位置来计算。如果不存在该包含元素，就把浏览器窗口作为包含元素。
绝对定位是元素的位置与文档刘无关，因此不占空间。
使用：
#left{
width:150px; height:200px; background-color:red;
position:absolute;top:0px;left:0px;
}
#right{
width:200px; height:200px; background-color:red;
position:absolute;top:0px;left:600px;
}
#main{
width:400px; height:200px; background-color:red;
position:absolute;top:0px;left:170px;
}
浮动######
css控制元素位置较为常用的方式，浮动元素的定位还是基于长长的文档流，
然后从文档流中抽出并尽可能远的移动值左侧或者右侧，
直到他的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的边框表现得就像浮动框不存在一样。
float属性可用的值：
left: 元素向左浮动
right: 元素向右浮动
none: 元素不浮动
inherit: 从父级继承浮动属性
clear: 去掉浮动属性(包括继承来的属性)
eg：######
<html>
<head>
<title>使用浮动实现分栏</title>
<style type="text/css">
body{ text-align:center;}
#father{width:800px;height:auto; background-color:red;}
#left{width:150px;height:200px;background-color:blue; float:left}
#right{ width:200px;height:300px;background-color:gray;float:left}
#main {
width:420px;
height:500px;
margin-left:15px;
margin-right:15px;
background-color:yellow;
float:left;
}
#header{width:800px; height:auto; background-color:green;}
#footer{width:800px;height:auto;background-color:#0000ff;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="father">
<div id="left">B</div>
<div id="main">A</div>
<div id="right">C</div>
/*要清除浮动效果，否则会对“#footer产生混乱的影响”*/
<div class="clear"></div>
</div>
<div id = "footer">footer</div>
</body>
</html>
网友评论