CSS学习笔记（十）--定位

使用 display 属性改变生成的框的类型

通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位
position 属性值的含义：

• static
  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative
  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute
  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对位置

这是位于正常位置的标题
这个标题相对于其正常位置向左移动
这个标题相对于其正常位置向右移动
相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

绝对位置

这是带有绝对定位的标题
通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。

固定定位

一些文本。
更多的文本。

固定值或者百分数设置图像的上边缘

This is a Heading
![](/i/eg_smile.gif)
一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。

如何使用滚动条来显示元素内溢出的内容

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。


这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。如果其值overflow: hidden，则自动隐藏溢出的内容。若为auto，则让计算机自动处理溢出内容。

设置元素的形状clip

clip 属性剪切了一幅图像：
![](/i/eg_bookasp.gif)

垂直排列图象vertical-align

这是一幅![](/i/eg_cute.gif)位于段落中的图像。
 


这是一幅![](/i/eg_cute.gif)位于段落中的图像。