CSS学习（五）——区块、浮动、定位、溢出、滚动条
区块
占据一整行的标记叫做区块。例如：
<p>...</p>
<div>...</div>
只要是区块，可以使用如下属性名称：
| 属性名称 | 设定值 | 说明 |
| width | 像素/百分比 | 区块的宽度 |
| height | 像素/百分比 | 区块的高度 |
| min-height | 像素/百分比 | 区块的最小高度 |
| max-height | 像素/百分比 | 区块的最大高度 |
| min-width | 像素/百分比 | 区块的最小宽度 |
| max-width | 像素/百分比 | 区块的最大宽度 |
下面例子可以体现区块的含义以及各种属性的意义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>区块、浮动、定位、溢出、滚动条</title>
<style type="text/css">
div{background-color:pink;width:50%;min-height:50px;max-height:100px}
</style>
</head>
<body>
<div>CSS区块、浮动、定位、溢出、滚动条<br />
CSS区块、浮动、定位、溢出、滚动条<br />
CSS区块、浮动、定位、溢出、滚动条<br />
CSS区块、浮动、定位、溢出、滚动条<br />
CSS区块、浮动、定位、溢出、滚动条<br />
CSS区块、浮动、定位、溢出、滚动条<br />
CSS区块、浮动、定位、溢出、滚动条<br />
</body>
</html>
浮动
| 属性名称 | 设定值 | 说明 |
| float | none | 正常显示 |
| left | 元件往左边浮动 | |
| right | 元件往右边浮动 | |
| clear | none | 允许元件左右浮动 |
| left/right | 不允许元件往左/右边浮动 | |
| both | 不允许元件两边浮动 |
往左/右边浮动的意思是：如果视窗足够宽，那么元件会尽量挤占上面的位置，与前面的元件并列显示。
注意，如果有多个元件，前面的元件使用了float属性，后面的元件如果不使用float，那么需要添加clear:both属性，否则该元件会被前面的元件覆盖。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>区块、浮动、定位、溢出、滚动条</title>
<style type="text/css">
.div1{width:100px;height:100px;background-color:red;float:left;}
.div2{width:100px;height:100px;background-color:pink;float:left;}
.div3{width:100px;height:100px;background-color:black;clear:both;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
定位
| 属性名称 | 设定值 | 说明 |
| position | relative | 设置区块左上角为基准点来移动 |
| absolute | 设置网页左上角为基准点来移动 | |
| left | 像素/百分比 | 基准点距离左边界移动多少 |
| top | 像素/百分比 | 基准点距离上边界移动多少 |
| right | 像素/百分比 | 基准点距离右边界移动多少 |
| bottom | 像素/百分比 | 基准点距离下边界移动多少 |
| z-index | 数字 | 数字越大层级越高。 |
注一：position属性与margin-left/right/top-bottom属性的区别在于，position让元件在移动的过程中不影响周围其他元件的位置，不会让其他元件的位置发生变化，而margin属性在移动元件时，会让其他紧挨着该元件的元件位置也一起发生变化。
注二：设定值relative与absolute的区别在于：1.当设定为relative时，left/top/right/bottom里设置的数值是元件距离外部边框的水平或垂直距离，当设置为absolute时，left/top/right/bottom里设置的数值是元件距离外部边框左上角的斜角距离；2. 当设定为relative时，元件移动后，紧挨元件的其他元件不会占用该元件原本的位置，也即元件原本的位置仍然保留在网页上，当设置为absolute时，元件移动后，紧挨元件的其他元件会自动顶上占据它的位置。
注三：属性z-index的作用是，当position的设定值为absolute时，决定重叠的元件叠放的顺序。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0;}
#contion{height:300px;width:300px;border:1px solid black;background:pink;position:relative;left:20px;top:20px;}
#contion p{position:absolute;left:10px;top:10px;}
</style>
<title>复习</title>
</head>
<body>
<div ID="contion">
<p>PHP100.COM中文网</p>
</div>
</body>
05/11补充例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0;}
#contion{height:300px;width:300px;border:1px solid black;background:pink;position:relative;left:20px;top:20px;}
#contion p{position:absolute;left:10px;top:10px;}
</style>
<title>复习</title>
</head>
<body>
<div ID="contion">
<p>复习区块</p>
</div>
</body>
溢出
当对象（区块）内放置的内容溢出了对象时，可以通过以下属性自动给区块添加滚动条：
| 属性名称 | 设定值 | 说明 |
| overflow | auto | 在必需时对象内容才会被裁切或添加滚动条 |
| hidden | 不显示超过对象尺寸的内容 | |
| scroll | 总是显示滚动条 | |
| overflow-x | （同上） | |
| overflow-y | （同上） |
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>区块、浮动、定位、溢出、滚动条</title>
<style type="text/css">
div{width:200px;height:100px;background-color:pink;overflow:auto;}
</style>
</head>
<body>
<div>CSS区块、浮动、定位、溢出、滚动条
CSS区块、浮动、定位、溢出、滚动条
CSS区块、浮动、定位、溢出、滚动条
CSS区块、浮动、定位、溢出、滚动条
</div>
</body>
</html>
滚动条的外观属性
| 属性名称 | 设定值 | 说明 |
| scrollbar-3dlight-color | 十六进制/英文 | 滚动条亮边框 |
| scrollbar-highlight-color | 十六进制/英文 | 滚动条3D 界面亮边 |
| scrollbar-face-color | 十六进制/英文 | 滚动条3D 表面 |
| scrollbar-arrow-color | 十六进制/英文 | 滚动条方向箭头 |
| scrollbar-shadow-color | 十六进制/英文 | 滚动条3D 暗边 |
| scrollbar-darkshadow-color | 十六进制/英文 | 滚动条暗边框 |
| scrollbar-base-color | 十六进制/英文 | 滚动条基准颜色 |
| scrollbar-track-color | 十六进制/英文 | 滚动条的拖动区域 |