0047.htm
来自「新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编」· HTM 代码 · 共 305 行 · 第 1/2 页
HTM
305 行
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>CSS2快速参考之三</strong></big></p>
<div align="right">---(编译/周晓阳)</div>
<span class="text">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>
百分比备注: 被禁止<br>
属性值含义如下：<br>
visible：扩大面积以显示所有内容。<br>
hidden：隐藏超出范围的内容。<br>
scroll：在元素的右边显示一个滚动条。<br>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?