mozilla
您的搜索结果

    Boxes

    这是 开始学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

    . . .

     

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

    看答案。

    下一节?

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

    文档标签和贡献者

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