区块
占据一整行的标记叫做区块。例如:
<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 | 十六进制/英文 | 滚动条的拖动区域 |