📄 8.3.5.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">定位和显示属性</h2>
<p>定位和显示属性用于控制页面元素的位置和显示。</p>
<p>
1. 定位属性<p>
CSS 定位属性包括 position、top、bottom、left、right 和 z-index。其中 bottom 和 right属性并不常用。<p>
position 属性用来规定元素怎样在 Web 页上定位，它的取值为：static（默认值）、relative 或 absolute。"static"表示按照
HTML 格式规则正常定位，"relative"是指某元素将定位在相对于Web页上前一个元素的尾端位置，"absolute"是指某元素将定位在框架或浏览器窗口本身的左上角绝对位置。<p>
top 和 left 属性用来规定某个元素与其父或其他元素之间的距离。这两个属性按像素来设定元素位置往下或往右的距离，这里既包括与其父的左上角的（绝对定位）之间的距离，也包括相对于前一个元素尾端之间（相对定位）的距离。<p>
使用 top 和 left 属性可能会造成元素相互堆叠在一起，此时可以使用 z-index 属性。z-index 属性用来控制元素的堆叠，值较高的元素将覆盖值较低的元素。如果使用值
-1，则表示元素将置于页面默认文本的后边，这对于设置背景图案是很有用的。
<p> 以下示例展示了 CSS 定位属性的强大功能，获得了一种类似图像的效果。
<p><a href="../src/tu8.11.htm" target="_blank">示例</a>
<p>2. 宽高和剪裁属性
<p>
在 CSS 中，可以用 width 和 height 属性控制元素的宽度和高度（在前面的定位属性示例中已经用到了 width 属性），用 clip 和 overflow
属性控制元素的剪裁。使用这些属性时，position 属性必须指定为 absolute。<p>
width 和 height 属性的取值可以是长度值，也可以是百分比。如果说 left 和 top 属性定义了元素的位置，那么 width 和 height
属性则规定了元素所占空间的大小。<p>
clip 属性可以确定可视定位对象的剪裁区域，取值为 rect(top right bottom left) | auto。其中 top、right、bottom
和 left 用于指定上、右、下、左 4 个方向上的剪裁长度，取值为长度值或 auto。如果任意一边使用 auto，则相当于该边没有进行剪裁。<p>
overflow 属性用于设置当元素的内容超出它的高度和宽度限制时，浏览器如何进行处理，取值可以是 visible | hidden | scroll |
auto，其中 visible 是默认值。值 visible 表示不剪裁内容，也不添加滚动条，强制显示元素内容；hidden 表示剪裁内容，既不显示超出对象尺寸的内容；scroll
表示剪裁内容，同时提供滚动条；auto 表示只有在必要时才剪裁内容并添加滚动条。
<p> 以下示例显示了这些属性的作用。
<p><a href="../src/tu8.12.htm" target="_blank">示例</a>
<p>
3. 显示属性<p>
在 CSS 中，有两个属性可以控制元素的显示和隐藏，即 display 属性和 visibility 属性。<p>
display 属性确定一个元素是否应绘制在页面上，它的取值有多个，但在一般的浏览器中，只有一个 none 值可以使用。当使用 display 属性隐藏元素时，不但元素看不见，而且元素也将退出当前的页面布局层，不占用任何空间。<p>
visibility 属性有时也被分类为定位属性，它控制定位的元素是否可见，取值包括：visible（可见）、hidden（隐藏）和 inherit（继承），默认值为
inherit。与 display 属性的不同之处在于：当隐藏元素时，仍然为元素保留原有的显示空间。<p>
静态设置这两个属性并没有什么实际意义，但当动态更改这两个属性时，却可以获得很多实用的效果，详细信息请参见本书第 9 章。
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -