前端基础——CSS盒子模型

Myth丶恋晨 2022-08-13 12:37 191阅读 0赞

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。

为了更好的说明，先举个通俗的例子：在一个仓库中放了10个纸箱，每个纸箱之间有一定距离，每个纸箱内放的是一台电脑并且纸箱和电脑之间都有一层泡沫来隔绝防震（这里假设纸箱和电脑都是正方体），以这个例子为背景接着说盒子模型。

其实一张图片就可以把CSS盒子模型形象地表述出来，网上一搜一大堆：

![Center][]

正如上图所示：CSS中的盒子模型通常由四部分组成：内容（content）、填充（padding）、边框（border）、边界（margin）。

这里的**内容**就相当于箱子里的电脑，**填充**就相当于泡沫，**边框**就相当于纸箱，**边界**就相当于每个纸箱之间的距离。

对这四部分进行说明：

内容（content）：盒子模型中的内容，可以是文字、图片、表格等等；

填充（padding）：内容与盒子边框的距离，可拆分为padding-top;padding-right;padding-bottom;padding-left；

边框（border）：盒子的边框，可拆分为border\-top;border\-right;border\-bottom;border\-left；

边界（margin）：盒子与其他相邻元素之间的距离，可拆分为margin-top;margin\-right;margin\-bottom;margin\-left；

如下图：

![Center 1][]

图中需要注意的是，虚线部分表示的是该“盒子”中存放的内容的宽度（width）和高度（height），也就是上例箱子中电脑的宽度和高度。

通常情况下可以设置填充和边界四个方向的宽度（即厚度），对边框的设置有样式（style）、颜色（color）、宽度（width）几个属性。

在CSS中，认为网页中的所有元素都包装在一个矩形盒子中，比如常用的div、span、ul、li、img、table等，都可以在CSS中对它们的内容（content）、填充（padding）、边框（border）和边界（margin）进行格式化。

如果一个盒子的margin为30px，border为5px，padding为20，width为240，height为160px，那么这个盒子实际上占用的空间为  宽：（30+5+20）×2+240=350px，高（30+5+20）×2+160 =270px

![Center 2][]

以往的网页都是用表格来布局，但是表格布局有很多缺点，限于篇幅，下篇将介绍易于控制和互动的CSS+DIV布局方式。

[Center]: /images/20220810/7bc2585640dc400eae1463f762fe7fb1.png
[Center 1]: /images/20220810/ca65ba488206402a98d4b32545364dff.png
[Center 2]: /images/20220810/022dd6c9be9a445ea57a1837e356a8a5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关【Web前端】CSS-盒子模型

文章目录一、盒子模型 1、网页布局的本质 2、盒子模型（Box Model）组成 3、边框（border）

谁践踏了优雅/ 2024年04月07日 12:53/ 0 赞/ 88 阅读

相关 CSS盒子模型(css盒子模型的理解)

CSS+DIV写盒子模型图网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。在两种不同模型网页里，定义了相同CSS属性的

短命女/ 2023年09月26日 13:53/ 0 赞/ 85 阅读

相关 web前端学习10-css盒子模型

学习10-css盒子模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我就是我/ 2023年02月17日 06:29/ 0 赞/ 180 阅读

相关 CSS基础——盒子模型【学习笔记】

盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 ![在这里

曾经终败给现在/ 2022年12月23日 00:44/ 0 赞/ 217 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明，先举个通俗的例子：在一个仓库中放了

女爷i/ 2022年08月13日 12:40/ 0 赞/ 200 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明

Myth丶恋晨/ 2022年08月13日 12:37/ 0 赞/ 192 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 287 阅读

相关 CSS开发基础——CSS盒子模型

1、CSS的盒子模型 ![CSS盒子模型][CSS] height：高度 width：宽度 padding：内边距 margin：外边距

朱雀/ 2022年07月13日 15:26/ 0 赞/ 181 阅读

相关前端基础-04-盒子模型

盒子模型 1.盒子模型简介他是由内容、内边距、外边距、边框 border:边框类型颜色; border-width borde

ゝ一纸荒年。/ 2022年06月05日 02:16/ 0 赞/ 182 阅读

相关前端盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封

谁借莪１个温暖的怀抱￠/ 2021年12月08日 22:19/ 0 赞/ 273 阅读