一、介绍
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
二、知识点介绍
1、定位元素
2、光标的类型
3、浮动
4、定位类型
5、上边缘、右边缘，下边缘，左边缘
6、内容溢出
7、元素可见
8、堆叠顺序
三、上课对应视频的说明文档
1、定位元素
clip 属性剪裁绝对定位元素
实例：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>
</html>
2、光标的类型
cursor 属性规定要显示的光标的类型（形状）
实例：
<html>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
</html>
3、浮动
float 属性定义元素在哪个方向浮动
实例：
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
4、定位类型
position 属性规定元素的定位类型
实例：
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
5、上边缘、右边缘，下边缘，左边缘
5.1：top 属性规定元素的顶部边缘
实例：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:0px
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
5.2：right 属性规定元素的右边缘
实例：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
right:0px
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
5.3：bottom 属性规定元素的底部边缘
实例：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
bottom:0px
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
5.4：left 属性规定元素的左边缘
实例：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:100px
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
6、内容溢出
overflow 属性规定当内容溢出元素框时发生的事情
实例：
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
7、元素可见
visibility 属性规定元素是否可见
实例：
<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>
<body>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
</body>
</html>
8、堆叠顺序
z-index 属性设置元素的堆叠顺序
实例：
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
网友评论