The CSS Box Model 盒式模型

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/limichange/blog/72992

文章标签：

#python

本文深入讲解了CSS盒模型的基本原理，包括如何计算盒子的尺寸、不同属性对盒子的影响及浮动属性的作用等。通过实例帮助读者理解盒模型的概念。

2019独角兽企业重金招聘Python工程师标准>>>

The CSS Box Model

作者： Chris Coyier

译者：耀耀

注：虽然文章的内容取自原文章，但基本上每句话都加上了本人的想法，再加上本人英语欠佳，可以说是改的面目全非。如果您发现什么根本性的错误或什么关键地方没有提及请告知我，我将快速更改，谢谢阅读。

我们必须深刻的认识到：每一个在WEB设计中的元素都是一个矩形的盒子（将设计具体化）。在真正了解了这个概念后，我们就能够真正开始明白CSS的基础WEB设计和实现自己想要实现的布局和设计。接下来我们将讨论一下这些盒子的布置和他们的行为。

我们往往忽视的就是盒子本身，所以让我们想想怎么才能恰到好处的计算这些盒子的位置和大小呢？让我们来看两个例子：

如果你是一个Firebug（注：Firebug是firefox下的一个插件,能够调试所有网站语言）的使用者，你也许会习惯于这样的图表，他能够很好的展示这些盒子在页面上的效果。

也许大家能够注意到，在这两个例子中，他们的边缘都是处在白色之中。虽然边缘不能够影响这个盒子的大小，但是边缘能够对其他的盒子造成影响，改变其他盒子的位置。所以我们可以知道，边缘是CSS盒式模型的一个重要的组成部分。

我们通常使用下列的方式来计算盒子的大小：

------------------------------------------------------------------------------------------------------------

Box of Width = width + padding-left + padding-right + border-left + border-right

Box of Height = height + padding-top + padding-bottom + border-top + border-bottom

------------------------------------------------------------------------------------------------------------

通过下面的示例图，大家可以对这个模型有更加好的把握。

如果我们没有设定这些值的话会发生什么？

如果你没有设定padding或者是border，系统就会默认为0，但有的浏览器有自己的默认值（这些默认值不一定是0，所以我建议无论是否要使用这些值，请将他们他们重置为默认值）

默认Width的块级盒子

如果你没有声明一个宽度（ Box of Width ），而且这个盒子的位置是静态（static），或者是相对的（relative），那么这个盒子（Box of Width）的宽度将会100%的填充在padding、border、width中，其是向内部延伸，而不是向外部。但是如果你明确的设置了一个盒子的宽度，那么这个盒子的填充通常将会是向外部。

如果你对此还是概念模糊的话（我也感觉上面的解释含糊不清），可以将下面的代码复制进你喜欢的编辑器内，并运行它。

<hr align="left" width="240px"/>
 <div style=" height:250px; width:50%; border:#03F solid 20px; padding:20px #093; margin:0px; left: 0px; top: 21px;">
            
        <div style="position:absolute; background-color:#9C3; border:#43F solid 10px; padding:5px; margin:10px; left: 38px; top: 273px; width: 82px;">
                 1
        </div>
        <div style=" background-color:#9C3;width:300px;border:#03F solid 10px; padding:5px; margin:10px">
                 2
        </div>        
        <div style=" background-color:#9C3; position:relative; border:#03F solid 10px; padding:5px; margin:10px">
                 3
        </div>
        <div style=" background-color:#9C3; position:static; border:#03F solid 10px; padding:5px ; margin:15px">
                 4
        </div>
         
    </div>

没有宽度的盒子（设定position属性为absolute的盒子）

往往 position属性为absolute且没有设定宽度的盒子会表现的有些奇怪。这样的盒子的宽度往往取决于其自身内容的大小。也就是说当这个盒子里只有一个单词的时候，这个盒子的宽度就是一个单词的宽度。如果是两个单词的话，那他就会变成两个单词的宽度。如果不断的增加，最终就会溢出，很有可能会冲出你的浏览器窗口（笑）。

在此之上我们还要关注一下兼容性的问题，毕竟这些代码是要运行在各式各样的浏览器上的（话说国内的IE6着实让人头痛啊╮(╯_╰)╭）。

对于浮动属性的盒子

同样精准的行为也在没有设定宽度的浮动元素上被发现。这个盒子仅仅和他容纳的内容一样宽，直到和他的父亲元素一样（并不需要去进行相对位置摆放）。由于这些缺少Width属性的盒子有易碎的性质，所以我们不能轻易的拿走他们依赖的关键脚本，像是在整体的页面布局中。如果你悬浮一些列去当工具条，依靠一些元素（像是图片）去对保持宽度负责，那我想你是在找麻烦。