📄 fd74.htm
字号:
<html>
<head>
<title>CSS2快速参考之三</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<p align="center"><script src="../../1.js"></script></a>
<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center>
<table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
<tbody>
</tr>
</tbody>
</table>
<table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0
cellspacing=0 width=680 align="center">
<tbody>
<tr>
<td bgcolor=#F9D23C height=14>
<div align=center class=H1><font color="#FFFFFF">CSS2快速参考之三</font></div>
</td>
</tr>
<tr valign=top>
<td class=H1 height=36>
<p class=H1> </span></p>
<p> <span
style="FONT-SIZE: 9pt">3、布局（Layout）属性：<br>
<br>
在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。<br>
<br>
position属性：<br>
position属性用来决定元素的位置类型，详见属性：<br>
属性名称: 'position' <br>
属性值: absolute | relative | static <br>
初始值: static <br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止<br>
其属性值分别代表：<br>
absolute：屏幕上的绝对位置。<br>
relative：屏幕上的相对位置。<br>
static：固有位置。<br>
<br>
direction属性：<br>
direction属性决定BOX的排列方向，详见属性：<br>
属性名称: 'direction' <br>
属性值: ltr| rtl <br>
初始值: ltr <br>
适合对象: 所有元素 <br>
是否继承: yes <br>
百分比备注: 被禁止<br>
<br>
float和clear属性：<br>
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：<br>
属性名称: 'float' <br>
属性值: left| right|none<br>
初始值: none<br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止<br>
例如：<br>
<STYLE type="text/css"><br>
IMG { float: left }<br>
BODY, P, IMG { margin: 2em }<br>
</STYLE><br>
<BODY><br>
<P><br>
<IMG src=img.gif><br>
Some sample text that has no other...<br>
</BODY><br>
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：<br>
属性名称: 'clear' <br>
属性值: left| right|both|none<br>
初始值: none<br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止<br>
<br>
绝对位置属性：<br>
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：<br>
属性名称: 'top'、'right'、'bottom'、'left' <br>
属性值: <length>|<percentage>|auto<br>
初始值: none<br>
适合对象: 所有元素 <br>
是否继承: no <br>
百分比备注: 被禁止<br>
利用以上属性，用户就可以精确定义元素的位置，如：<br>
<P style="position: relative; margin-right: 10px; left: 10px;"><br>
I used two red hyphens to serve as a change bar. They<br>
will "float" to the left of the line containing THIS<br>
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN><br>
word.</P><br>
<br>
z-index属性：<br>
在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。<br>
属性名称: 'z-index'<br>
属性值: auto|<integer><br>
初始值: auto<br>
适合对象: 使用position属性的元素 <br>
是否继承: no <br>
百分比备注: 被禁止<br>
<br>
width属性：<br>
规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少：<br>
属性名称: 'width' <br>
属性值: <length> | <percentage> | auto <br>
初始值: auto <br>
适合对象: 块元素<br>
是否继承: no <br>
百分比备注:根据父元素的width而定 <br>
在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。<br>
属性名称: 'min-width' <br>
属性值: <length> | <percentage> <br>
初始值: 0 <br>
适合对象: all<br>
是否继承: no <br>
百分比备注:根据父元素的width而定<br>
<br>
属性名称: 'max-width' <br>
属性值: <length> | <percentage><br>
初始值: 100% <br>
适合对象: all<br>
是否继承: no <br>
百分比备注:根据父元素的width而定 <br>
<br>
height属性：<br>
相同的BOX还有height属性来控制本身的高度：<br>
属性名称: 'height' <br>
属性值: <length> | <percentage> | auto <br>
初始值: auto <br>
适合对象: 块元素<br>
是否继承: no <br>
百分比备注:根据父元素的height而定 <br>
在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。<br>
属性名称: 'min-height' <br>
属性值: <length> | <percentage> <br>
初始值: 0 <br>
适合对象: all<br>
是否继承: no <br>
百分比备注:根据父元素的height而定<br>
<br>
属性名称: 'max-height' <br>
属性值: <length> | <percentage><br>
初始值: 100% <br>
适合对象: all<br>
是否继承: no <br>
百分比备注:根据父元素的height而定 <br>
<br>
overflow属性：<br>
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性：<br>
属性名称: 'overflow' <br>
属性值: visible | hidden | scroll | auto <br>
初始值: visible <br>
适合对象: 元素的position属性 <br>
是否继承: no <br>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -