出于 CSS 精确定义网页样式的本意,在格式化页面对象时, CSS 将所有的元素都放置在一个“容器”里面,这个“容器”叫做 BOX。对于容器的格式化,CSS 提供了强大的支持,现在,首先了解一下与格式化“容器”有关的属性。 “容器”的属性共有以下的几类: l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。 l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空间的距离。 l 边框(border)类的属性定义了一个元素边距的样式。 l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。
<HTML> <head> <title>CSS Demo</title> <style type="text/css"> p{ margin-top:0em; margin-right:2em; margin-bottom:3em; margin-left:6em; } </style> </head> <body> <p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p> </body> </HTML>
<HTML> <head> <title>CSS Demo</title> <style type="text/css"> p{ padding-top:0em; padding-right:2em; padding-bottom:3em; padding-left:6em; } </style> </head> <body> <p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p> </body> </HTML> [page] border-top-width 属性值:thin | medium | thick | <length> 初始值:“medium” 适用于:所有元素 百分比值:不适用 继承:否 该元素设置了元素顶端边框的宽度,其属性值可以使用关键字或数字来指定。关键字共有三个:其中thin表示为最细的边框,thick表示为最粗,medium表示为中等宽度。
float 属性值:left | right | none 初始值:none 适用于:所有元素 继承:否 百分比值:不适用 使用 float 元素可以使文字环绕在一个元素的四周。当属性值是 right 或 left 时,该元素就会相应地出现在右边或边,即:文字环绕于该元素的左边或右边。
clear 属性值:none | left | right | both 初始值:none 适用于:所有元素 继承:否 百分比值:不适用 这个属性是与 float 有关的,它可以指定在一个元素的某一边是否允许有环绕的文字(或其它对象)出现。如果指定属性值是“right”,那么该元素右侧的所有空间都不会放进任何对象。如果属性值是“none”,那么该元素四周都有对象环绕,这也是默认的属性值。