[译]跟我学CSS（11）：盒模型

原文地址： https://developer.mozilla.org/zh-CN/docs/CSS/getting_started/Boxes

 

 

 

前一节
列表

这是 CSS Getting Started 教程的第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

• Arctic
• Atlantic
• Pacific
• Indian
• Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

挑战

给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：

(A) The oceans

• Arctic
• Atlantic
• Pacific
• Indian
• Southern

(B) Numbered paragraphs

. . .

 

（不必完全保证宽度和颜色和这里的一模一样。）

看答案。

下一节?

下一节：
布局
通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的布局 。