Go to Previous Section:
列表这是 CSS入门教程 的第11节,本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中,你可以修改元素占据的空间并增加装饰规则。
信息:盒模型
当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。
中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距,外边距将该元素与其它元素分开。
外边距 边框 内边距 元素 浅灰色标出了布局的几个部分。 |
元素 你在浏览器看到的样子。 |
内边距,边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。
颜色
内边距总是跟元素的背景色一样,所以当你设置背景色时,你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。
外边距 边框 内边距 元素 元素有绿色的背景。 |
元素 你在浏览器看到的样子。 |
边框
你可以用边线或者边框来装饰元素。
用 border
属性给元素四周指定统一的边框。在属性值中指定边框的宽度(通常是以显示到屏幕上的像素为单位), 样式, 还有颜色。
样式包括:
solid |
dotted |
dashed |
double |
inset |
outset |
ridge |
groove |
你也可以通过设置样式为 none
或 hidden
来明确地移除边框,或者设置边框颜色为 transparent
来让边框不可见,后者不会改变布局。
如果一次只指定某一个方向的边框,就用属性: border-top
, border-right
, border-bottom
, border-left
。 你可以用这些属性指定某个方向上的边框,或者不同方向上的不同边框。
下面的规则设置了一个标题元素的背景色和顶部边框:
h3 { border-top: 4px solid #7c7; /* 中绿 */ background-color: #efe; /* 浅绿 */ color: #050; /* 深绿 */ }
结果如下:
样式化后的标题 |
下面的规则通过给图片四周设置中灰色边框,使得图片元素更好辨认:
img {border: 2px solid #ccc;}
结果如下:
图片: |
外边距和内边距
使用外边距和内边距调整元素的位置,并在其周围创建空间。
用 margin
属性或者 padding
属性分别设置外边距和内边距的宽度。
如果你指定一个宽度,它将会作用于元素四周(上、右、下、左)。
如果你指定两个宽度, 第一个宽度会作用于顶部和底部,第二个宽度作用于右边和左边。
你也可以按照顺序指定四个宽度: 上、右、下、左。
下面的规则通过给元素四周设置红色边框,标记出了类名为 remark
的段落元素。
文本周围的内边距将边框与文字拉开一点距离。
左外边距使得段落相对于其余文本产生缩进:
p.remark { border: 2px solid red; padding: 4px; margin-left: 24px; }
结果如下:
这是一个普通的段落。 这是一个标记段落。 |
当你使用外边距和内边距来调整元素的布局时,你的样式规则会与浏览器的默认规则以复杂的方式相互作用。
不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式,结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。
为了达到理想的效果,你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。
欲知更多关于内边距,外边距和边框的细节, 请看 盒模型 参考页。
实践:添加边框
编辑你的CSS文件,style2.css
。添加下面的规则,给页面中每个标题元素上面画一条线:
h3 {border-top: 1px solid gray;}
如果你做了前一页的挑战题,现在修改你已经创建的规则,或者添加这条新规则,给每个列表项的下面增加一定的空间:
li { list-style: lower-roman; margin-bottom: 8px; }
刷新你的浏览器看看效果:
(A) The oceans
(B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
给你的样式表添加一个规则,为下面的海洋列表增加 一个四面环绕且带有颜色的边框,来突出海洋——如下图所示:
(A) The oceans
(B) Numbered paragraphs . . . |
(不必完全保证宽度和颜色和这里的一模一样。)
下一节?
Go to Next Section:
布局通过指定外边距和内边距,你已经能修改文档的布局了。下一页,你将使用别的方式来改变文档的布局 。