CSS 盒子模型（CSS Box Model）

最新推荐文章于 2025-05-05 10:33:31 发布

原创最新推荐文章于 2025-05-05 10:33:31 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #.net

Java基础专栏收录该内容

51 篇文章

订阅专栏

本文详细解析HTML CSS中的盒子模型概念，通过代码实例深入探讨元素边框、填充、内边距、外边距等关键属性，并揭示它们在布局设计中的作用与相互影响。同时，展示如何巧妙利用CSS实现复杂布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果你不能理解什么盒子，那我们这里暂且把一组<div> </div>当作一个盒子，一个用来存放内容的容器。

范例：

相关代码如下：

以下是代码片段：[www.xlnv.net]
.boxModel {
    width:200px;
    height:150px;
    padding:20px;
    color:#FF0000;
    border:1px solid #000000;
    background-image:url(../tutorial/divcss/top_bg5.gif);
    background-color:#6699FF;
    margin:15px;
}

<div class="boxModel">
    有了这个盒子模型你还会搞不清楚例如"border","padding","margin"之间的层次、关系和相互影响吗？
</div>

在以上的CSS代码中，设置了背景色，但是实际效果中并没有显示出来，是因为背景图片覆盖了背景色。另外margin的效果也不明显，让我们将两个盒子放到一起时候，效果会明显点。

在这个例子中，实际看到的盒子边框的宽度是200px + 20px + 20px = 240px，同样，高度是150px + 20px + 20px = 190px;

其中padding，包括了padding-top,padding-right,padding-bottom,padding-left，可以单独设置每个属性的值，当四个属性的值一样时候，可以只用一个padding实现同样的效果，"border","margin"也是同样的道理。更多的CSS属性介绍我们将在以下部分学习到。