盒模型

这是 CSS入门教程 的第11节,本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中,你可以修改元素占据的空间并增加装饰规则。

信息:盒模型

当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距,外边距将该元素与其它元素分开。

外边距

边框

内边距

元素

浅灰色标出了布局的几个部分。

 

 

 

元素

你在浏览器看到的样子。

内边距,边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

颜色

内边距总是跟元素的背景色一样,所以当你设置背景色时,你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

外边距

边框

内边距

元素

元素有绿色的背景。

 

 

 

元素

你在浏览器看到的样子。

边框

你可以用边线或者边框来装饰元素。

border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度(通常是以显示到屏幕上的像素为单位), 样式, 还有颜色。

样式包括:

solid
dotted
dashed
double
inset
outset
ridge
groove

你也可以通过设置样式为 nonehidden 来明确地移除边框,或者设置边框颜色为 transparent 来让边框不可见,后者不会改变布局。

如果一次只指定某一个方向的边框,就用属性: border-topborder-rightborder-bottomborder-left。 你可以用这些属性指定某个方向上的边框,或者不同方向上的不同边框。

例子

下面的规则设置了一个标题元素的背景色和顶部边框:

h3 {
  border-top: 4px solid #7c7; /* 中绿 */
  background-color: #efe;     /* 浅绿 */
  color: #050;                /* 深绿 */
  }

结果如下:

样式化后的标题

下面的规则通过给图片四周设置中灰色边框,使得图片元素更好辨认:

img {border: 2px solid #ccc;}

结果如下:

图片: Image:Blue-rule.png

外边距和内边距

使用外边距和内边距调整元素的位置,并在其周围创建空间。

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

. . .

 

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

看答案。

下一节?

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

文档标签和贡献者

 此页面的贡献者: Robinx, Harvesty, ziyunfei, teoli, Chajn, hxl
 最后编辑者: Robinx,