CSS定位
position
1.相对定位--相对于正常位置--relative
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
2.绝对定位--absolute
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
3.固定定位--fixed--相对于屏幕
4.溢出元素--滚动条显示
overflow: scroll;
5.隐藏溢出元素
overflow: hidden;
overflow：auto；自动处理
6.设置元素形状
clip:rect(top,right,bottom,left)
clip:rect(0px 50px 200px 0px)
7.设置图像堆叠顺序
Z-index默认是0，-1更低，1更高
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。float
行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面
应注意浮动元素不占据空间，因此需要在container中添加一个用于clear的空div或直接对container进行浮动
ul{
/*float: left;*/
width: 100%;
padding: 0;
margin:0;
list-style-type: none;
}
a{
background-color: purple;
color: white;
float: left;
text-decoration: none;
width: 10em;
border-right:1px solid white;
}
a:hover{
background-color: orange;
}
<ul>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four</a></li>
</ul>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#big{
border:1px solid lightgray;
margin:0px;
/*line-height: 150%;*/
}
#head{
background-color: lightgray;
color: white;
margin: 0;
clear: left;
padding: 0;
border:1px solid lightgray;
line-height: 200%;
}
#container{
float: left;
margin-top: 0px;
}
#left{
float: left;
width:10%;
border-right: 1px solid lightgray;
text-align: left;
padding-left: 5px;
padding-right: 5px;
margin-top: 0px;
height: 200px;
}
#right{
float: left;
padding: 5px;
margin-left: 5px;
}
#foot{
margin-top: 300px;
background-color: lightgray;
color: white;
text-align: center;
clear: both;
border:1px lightgray solid;
height: auto;
}
</style>
</head>
<body >
<div id="big">
<div id="head">
<h1>W3Scholl.com.cn</h1>
</div>
<div id="container">
<div id="left">
<p>
"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)
</p>
</div>
<div id="right">
<h3>Free Web Building Tutorials</h3>
<p>At W3School.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>
W3School.com.cn - The Largest Web Developers Site On The Net!
</p>
</div>
</div>
<div id="foot">
<p>Copyright 2008 by YingKe Investment.</p>
</div>
</div>
</body>
</html>
emmm一个head和foot边框可以改变好多....
CSS多类选择器
.类名.类名{
}
