📄 8.3.4.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">布局属性</h2>
<p>布局属性主要包括 4 类：边框（border）属性、边界（margin）属性、填充（padding）属性和浮动属性。</p>
<p>
在任何一个 HTML 元素的周围，都包含边框、边界和填充这三种空白。最接近元素内容的是填充，接下来是边框，最外围是边界。边界区总是透明的，可以显示出背景色或背景图像；而填充总是采用标记符的背景色或背景图像；边框则可以使用自己的颜色。
<p> 例如，使用以下示例可以看出这三种空白的区别。
<p><a href="../src/tu8.6.htm" target="_blank">示例</a></p>
<p>此示例的效果文字周围的黄色空白为填充距（padding），黑色部分为边框（border），而再向外与浏览器窗口或其他内容相临的空白（以文档的背景颜色显示）则是边界（margin）。
<p>
<p>1. 边框属性
<p>
CSS 边框属性包括 border、border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-color、border-left、border-left-color、border-left-style、border-left-width、border-right、border-right-color、border-right-style、border-right-width、border-style、border-top、border-top-color、border-top-style、border-top-width
以及 border-width。<p>
根据属性的命名可以看出，有关边框的设置包括三项：边框颜色（color）、边框样式（style）和边框宽度（width），而边框又包括四个方向：上（top）、下（bottom）、左（left）和右（right）。将边框设置和方向组合起来，则构成了多种属性。<p>
border-bottom-color、border-left-color、border-right-color、border-top-color 属性分别用于指定下、左、右、上边框的颜色，取值可以使用各种指定颜色的方式。也可以使用
border-color 属性同时指定 4 个边框的颜色。如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框的颜色一样；如果指定了
2 或 3 个值，则未指定颜色的边框采用相对边框的颜色值。<p>
border-bottom-style、border-left-style、border-right-style、border-top-style 属性分别用于设置下、左、右、上边框的样式，取值可以是：none
| dotted | dashed | solid |double | groove | ridge | inset | outset，默认值是 none。none
指示无边框（即使已设置了其边框宽度）；dotted 指定边框由点线组成；dashed 指定使用划线表示边框；solid 指边框由实线组成；double 指使用双线；groove
和 ridge 利用元素的颜色属性值描出具有三维效果的边框；类似地，inset 和 outset 利用修饰元素的颜色值描出边框效果。也可以用 border-style
属性同时指定 4 个边框的样式。如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框的样式一样；如果指定了 2 或 3 个值，则未指定样式的边框采用相对边框的样式。需要注意的是，如果浏览器（例如
IE5）不支持边框样式的属性值，则除了 none 以外的所有属性值都用 solid 代替。<p>
border-bottom-width、border-left-width、border-right-width、border-top-width 属性分别用于设置下、左、右、上边框的宽度，取值可以是：thin
| medium | thick | <length>，其中 <length> 是可以使用的长度单位数值。这 4 个属性的默认值是
medium，并且取值不能是负数。也可以用 border-width 属性同时指定 4 个边框的宽度。如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框的宽度一样；如果指定了
2 或 3 个值，则未指定宽度的边框采用相对边框的宽度。<p>
border-left、border-right、border-top 和 border-bottom 属性可以用来一次性指定左、右、上、下边框的宽度、样式和颜色，其取值可以是
border-width、border-color 和 border-style 属性的取值。如果没有指定某个值，则该值采用默认值。当指定宽度、样式和颜色时，并没有顺序要求。<p>
border 属性可以用来一次性设置 4 个方向上边框的宽度、样式和颜色，它是指定元素边框各个边的简捷方式。用 border 属性指定边框时，4 个边框都具有相同的设置。同样，指定宽度、样式和颜色时，也没有顺序要求。
<p> 以下示例将前面的颜色与背景示例进一步完善，为标题和内容增加了边框设置。
<p><a href="../src/tu8.7.htm" target="_blank">示例 </a>
<p>2. 边界属性
<p>
CSS 边界属性包括 margin、margin-bottom、margin-left、margin-right 以及 margin-top。<p>
margin-left、margin-right、margin-top 和 margin-bottom 属性可以分别用来设置左、右、上、下边界的宽度，它们的取值可以是长度、百分比或
auto。当使用百分比时，表示相对于父元素宽度的百分比。<p>
margin 属性可以同时指定上、右、下、左（以此顺序）边界的宽度。如果只指定一个值，则四个方向都采用相同的边界宽度；如果指定了 2 或 3 个值，则没有指定边界宽度的边采用对边的边界宽度。指定边界宽度时也可以使用负值，以便获得特殊的效果。
<p> 以下示例将前面的边框属性示例进一步完善，为"标题"和"作者"文字增加了一定的边界空间。
<p><a href="../src/tu8.8.htm" target="_blank">示例</a>
<p>
3. 填充属性<p>
CSS 填充属性包括 padding、padding-left、padding-right、padding-top 以及 padding-bottom。<p>
padding-left、padding-right、padding-top 和 padding-bottom 属性这四个属性与对应的四个边界属性类似，用于设置左、右、上、下填充区的宽度，取值可以是长度和百分数，但不允许使用负值。当使用百分比时，表示相对于父元素宽度的百分比。<p>
padding 属性用于同时指定上、右、下、左四个方向（以此顺序）填充的宽度。如果只指定一个值，则四个方向都采用相同的填充宽度；如果指定了 2 或 3 个值，则没有指定填充宽度的边采用对边的填充宽度。
<p> 以下示例将前面的边界属性示例进一步完善，为"标题"和"作者"文字增加了一定的填充空间。
<p><a href="../src/tu8.9.htm" target="_blank">示例</a></p>
<p> 4. 浮动属性
<p>
CSS 浮动属性包括 float 和 clear。通过 float 属性可以将元素的内容浮动到页面左边缘或右边缘，该属性的取值为：none | left |
right，默认值为none，指示元素不浮动到任一边缘。clear 属性指定了元素是否允许浮动元素在它旁边，取值可以是：none | left | right
| both，默认值为 none，表示允许浮动元素在其旁边；值 left 表示跳过左边的浮动元素，right 表示跳过右边的浮动元素，both 表示跳过所有的浮动元素。
<p> 以下示例显示了这两个浮动属性的效果。
<p><a href="../src/tu8.10.htm" target="_blank">示例</a></p>
<p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -