1. CSS定位属性允许你对元素进行定位。
2. CSS定位和浮动
2.1. CSS为定位和浮动提供了一些属性, 利用这些属性, 可以建立列式布局, 将布局的一部分与另一部分重叠, 还可以完成多年来通常需要使用多个表格才能完成的任务。
2.2. 定位的基本思想很简单, 它允许你定义元素框相对于其正常位置应该出现的位置, 或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
2.3. 另一方面, CSS1中首次提出了浮动, 它以Netscape在Web发展初期增加的一个功能为基础。浮动不完全是定位, 不过, 它当然也不是正常流布局。
3. 一切皆为框
3.1. div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容, 即"块框"。
3.2. span和strong等元素称为"行内元素", 这是因为它们的内容显示在行中, 即"行内框"。
3.3. 行内框在一行中水平布置, 这样由一行形成的水平框称为行框(Line Box), 行框的高度总是足以容纳它包含的所有行内框。不过, 设置行高可以增加这个框的高度。
3.4. 但是在一种情况下, 即使没有进行显式定义, 也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如: div)的开头。即使没有把这些文本定义为段落, 它也会被当作段落对待:
<div>
some text
<p>Some more text.</p>
</div>3.5. 在这种情况下, 这个框称为无名块框, 因为它不与专门定义的元素相关联。
3.6. 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式, 因为没有可以应用样式的地方。但是, 这有助于理解在屏幕上看到的所有东西都形成某种框。
3.7. 行内框例子
3.7.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内框</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
margin: 10px;
border: solid 1px;
}
span {
background: #FF0000;
line-height: 120px;
}
img {
background: #FFFF00;
}
</style>
</head>
<body>
<div>
<span>行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素</span>
<img src="MagicBtn.png" />
<span>行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素</span>
</div>
</body>
</html>3.7.1. 效果图
4. display属性
4.1. display属性规定元素应该生成的框的类型。这意味着, 通过将display属性设置为block, 可以让行内元素(比如: 元素)表现得像块级元素一样。还可以通过把display设置为 none, 让生成的元素根本没有框, 这样的话, 该框及其所有内容就不再显示, 不占用文档中的空间。
4.2. display属性默认值
4.3. display可能的值
5. CSS定位机制
5.1. CSS有三种基本的定位机制: 普通流、浮动和绝对定位。
5.2. 除非专门指定, 否则所有框都在普通流中定位。也就是说, 普通流中的元素的位置由元素在(x)html中的位置决定。
6. position属性
6.1. 通过使用position属性, 我们可以选择4种不同类型的定位, 这会影响元素框生成的方式。
6.2. 默认值
6.3. 可能值
7. top属性
7.1. 定义和用法
7.1.1. top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
7.1.2. 如果"position"属性的值为"static", 那么设置"top"属性不会产生任何效果, 它的值始终为auto。
7.2. 默认值
7.3. 可能的值
8. right属性
8.1. 定义和用法
8.1.1. right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
8.1.2. 如果"position"属性的值为"static", 那么设置"right"属性不会产生任何效果, 它的值始终为auto。
8.2. 默认值
8.3. 可能的值
9. bottom属性
9.1. 定义和用法
9.1.1. bottom属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
9.1.2. 如果"position"属性的值为"static", 那么设置"bottom"属性不会产生任何效果, 它的值始终为auto。
9.2. 默认值
9.3. 可能的值
10. left属性
10.1. 定义和用法
10.1.1. left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
10.1.2. 如果"position"属性的值为"static", 那么设置"left"属性不会产生任何效果, 它的值始终为auto。
10.2. 默认值
10.3. 可能的值
11. overflow属性
11.1. 定义和用法
11.1.1. overflow属性规定当内容溢出元素框时发生的事情。
11.1.2. 这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll, 不论是否需要, 用户代理都会提供一种滚动机制。因此, 有可能即使元素框中可以放下所有内容也会出现滚动条。
11.2. 默认值
11.3. 可能的值
11.4. 例子
11.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>overflow属性</title>
<meta charset="utf-8" />
<style type="text/css">
div {
background-color: #00FFFF;
width: 150px;
height: 150px;
margin: 20px;
}
</style>
</head>
<body>
<div style="overflow: visible; float: left;">
visible默认值。内容不会被修剪, 会呈现在元素框之外。
visible默认值。内容不会被修剪, 会呈现在元素框之外。
visible默认值。内容不会被修剪, 会呈现在元素框之外。
</div>
<div style="overflow: hidden; float: left;">
hidden内容会被修剪, 并且其余内容是不可见的。
hidden内容会被修剪, 并且其余内容是不可见的。
hidden内容会被修剪, 并且其余内容是不可见的。
</div>
<div style="overflow: scroll; float: left;">
scroll内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容。
scroll内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容。
scroll内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容。
</div>
<div style="overflow: auto; float: left;">
auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容。
</div>
<div style="overflow: auto; float: left;">
auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容。
</div>
</body>
</html>11.4.2. 效果图
12. visibility属性
12.1. visibility属性规定元素是否可见。
12.2. 即使不可见的元素也会占据页面上的空间。请使用"display"属性来创建不占据页面空间的不可见元素。
12.3. 当在表格元素中使用时, 此值可删除一行或一列, 但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上, 会呈现为"hidden"。
12.4. 默认值
12.5. 可能的值
12.6. 例子
12.6.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>规定元素是否可见</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
visibility: hidden;
}
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>visibility属性规定元素是否可见。</h1>
<h2 style="visibility: visible;">即使不可见的元素也会占据页面上的空间。请使用"display"属性来创建不占据页面空间的不可见元素。</h2>
<table>
<tr><td>visible默认值。元素是可见的。</td></tr>
<tr style="visibility: collapse;"><td>hidden元素是不可见的。</td></tr>
<tr><td>当在表格元素中使用时, 此值可删除一行或一列, 但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上, 会呈现为"hidden"。</td></tr>
</table>
</body>
</html>12.6.2. 效果图
13. vertical-align属性
13.1. vertical-align属性设置元素的垂直对齐方式。
13.2. 默认值
13.3. 可能的值
13.4. 例子
13.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元素的垂直对齐方式</title>
<style type="text/css">
td {
width: 500px;
height: 90px;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<table>
<tr><td>不使用vertical-align</td><td style="vertical-align: inherit;">inherit规定应该从父元素继承vertical-align属性的值。</td></tr>
<tr><td>super<span style="vertical-align: super;">垂直对齐文本的上标。</span></td><td>sub<span style="vertical-align: sub;">垂直对齐文本的下标。</span></td></tr>
<tr><td>text-top把元素的顶端与父元素<img style="vertical-align: text-top;" src="MagicBtn.png" />字体的顶端对齐。</td><td>text-bottom把元素的底端与父元素<img style="vertical-align: text-bottom;" src="MagicBtn.png" />字体的底端对齐。</td></tr>
<tr><td style="vertical-align: baseline;">baseline把元素放置在父元素的基线上。</td><td style="vertical-align: top;">top把此元素放置在父元素的顶端。</td></tr>
<tr><td style="vertical-align: middle;">middle把此元素放置在父元素的中部。</td><td style="vertical-align: bottom;">bottom把此元素放置在父元素的底端。</td></tr>
</table>
</body>
</html>13.4.2. 效果图
14. cursor属性
14.1. cursor属性规定要显示的光标的类型(形状)。
14.2. 默认值
14.3. 可能的值
14.4. 例子
14.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>规定要显示的光标的类型</title>
<meta charset="utf-8" />
</head>
<body>
<h1>cursor属性规定要显示的光标的类型(形状)。</h1>
<p style="cursor: default;">default默认光标(通常是一个箭头)。</p>
<p style="cursor: auto;">auto默认。浏览器设置的光标。</p>
<p style="cursor: crosshair;">crosshair光标呈现为十字线。</p>
<p style="cursor: pointer;">pointer光标呈现为指示链接的指针(一只手)。</p>
<p style="cursor: move;">move此光标指示某对象可被移动。</p>
<p style="cursor: text;">text此光标指示文本。</p>
<p style="cursor: wait;">wait此光标指示程序正忙(通常是一只表或沙漏)。</p>
<p style="cursor: help;">help此光标指示可用的帮助(通常是一个问号或一个气球)。</p>
</body>
</html>14.4.2. 效果图
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
