盒模型一二三（一）：盒世界，知几何

tuantuan 发布于2019-08-28 18:15 / 2699人阅读

摘要：比如表示上下左右都是像素块元素居中的样式，表示上下表示左右而表示上，左右，下。浏览器对块元素的默认样式问题如下块元素的盒模型样式复合属性写法如果我们想给添加样式，可以这样写为了精简代码，也可以采用如下的复合属性写法

学习 HTML 和 CSS 将近一个月，我以为：层级（嵌套）关系和盒模型（Box Model）是理解和学习这两门语言的基石，正如图层概念是 Photoshop 的基础。因此，充分理解盒模型有助于对于布局的掌控。

以上是我在网上随手截取一张盒模型的示意图，可以看出盒模型主要分为四部分：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。网络上对盒模型有各种各样的比喻，简而言之，可以将盒模型理解为二维世界的盒子（正如其中文字面意思），内容=盒子盛放的东西，内边距=盒内物品与盒壁的空隙，边框=盒子四壁，外边距=盒子与盒子之间的空隙。

这里提一个不太相关的翻译问题，由于很多东西都是外来物（比如HTML），以英语为主，因此在翻译上会存在分歧。比如 Box Model 在 W3C 中文官网上翻译为“框模型”，也有人翻译为“盒子模型”；而对于 padding 和 margin 的翻译也存在较大的差异，比如有人将其翻译为“填充”和“边界”。如何翻译，问题不大，但是一要选择自己易于理解的；二要前后一致，如不能翻译为“填充“和”外边距”，这样就显得不伦不类了（就像在缩进时同时使用空格和Tab），时尚界可以混搭，但前端开发依然属于严谨规范的比特世界。另外，这也告诫我们还是要尽可能多读英文原版内容。

盒模型

回归盒模型的话题，图片中的T、R、B、L分别代表Top、Right、Bottom、Left，比如TP=Top padding，可以看出除content外，padding/border/margin都有上、右、下、左这四个属性。记住上、右、下、左的顺序也很重要，这牵涉到复合的问题。为何是上、右、下、左的顺序？因为外国人在指认方向时通常采用顺时针的顺序（如某物在你的9点钟方向）。

盒模型的大小：
Box Width = LB + LP + Content Width + RP + RB
Box Height = TB + TP + Content Height + BP + BB

盒模型的常用属性有：

3个：padding/border/margin

4个：top/right/bottom/left

3个：color/style/width （radius/image 是 CSS3 新增属性）

这些属性大多可以进行复合，如padding-top、border-left-width，但是有几点需要注意：

padding 和 margin 只有 top/right/bottom/left 四个属性。
如 padding-top = the top width of padding，以上面所提盒子的比喻来理解，间隙本来就只是空间属性而已。

盒模型的属性值通常成对出现。
比如margin: 10px 表示上下左右都是10像素；块元素居中的样式margin: 0 auto，0 表示上下、auto表示左右；而margin: 0 auto 10px 表示上=0，左右=auto，下=10px。

浏览器对块元素的默认样式问题：如 IE7 下块元素的盒模型样式：

复合属性写法：
如果我们想给 div 添加样式，可以这样写：

div {
    border-width:5px;
    border-style: solid;
    border-color: red;
}

为了精简代码，也可以采用如下的复合属性写法：

div {
  border:5px solid red;
}

私有云超融合服务器盒模型盒模型html吗简述html盒模型盒遥控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111119.html

【图像配准】基于matlab OpenSUFT图像配准【含Matlab源码 1232期】

摘要：图像配准技术是红外图像处理中最关键的技术之一配准的结果直接影响到故障的检测与定位。图像配准可分为基于灰度的图像配准和基于特征的图像配准。利用算法分别检测标准图像与待配准图像的特征点形成维的特征点描述子。 ...

stormjun 2021-11-15 11:38 评论0 收藏0
[译] 关于 `ExpressionChangedAfterItHasBeenCheckedErro

摘要：本文将解释引起这个错误的内在原因，检测机制的内部原理，提供导致这个错误的共同行为，并给出修复这个错误的解决方案。这一次过程称为。这个程序设计为子组件抛出一个事件，而父组件监听这个事件，而这个事件会引起父组件属性值发生改变。原文链接：Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedE...

andong777 2019-08-22 15:43 评论0 收藏0
当 Python 邂逅 POV-Ray

摘要：本文介绍了使用为编写代码生成器的基本思路。所实现的代码生成器重视的建模功能，而忽视其光线追踪渲染功能。至于点的尺寸，可将其视为包围盒外接球空间的最小长度单位，并使之与包围盒外接球半径成固定比例。 showImg(https://segmentfault.com/img/bVX1x8?w=600&h=450); 引言 POV-Ray 是一种专业的三维场景描述语言，它描述的三维场景可交由 ...

summerpxy 2019-07-30 14:53 评论0 收藏0
前端（二）之 CSS

摘要：前端之前端之前言前言昨天学习了标记式语言，也就是无逻辑语言。今天学习，被称之为网页的化妆师。为前端页面的样式，由选择器作用域与样式块组成。年初，组织负责的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了年月出版的规范第二版。前端之 CSS 前言昨天学习了标记式语言，也就是无逻辑语言。了解了网页的骨架是什么构成的，了解了常用标签，两个指令以及转义字符；其中标签可以分为两大类：一类...

张率功 2019-04-23 13:08 评论0 收藏0
【CSS基础】CSS常见概念

摘要：在中主要通过四个部分来描述，分别为。对于元素，负值会完全覆盖前一个元素，会影响后面元素一起移动对于元素，元素脱离了普通文档流，对其他元素没有影响对于元素，可以通过负值进行覆盖，最常见的应用是三列布局。浏览器渲染过程不同的浏览器渲染过程实际上并不相同，但是依旧存在相一致的部分，大致过程如下所示：showImg(https://segmentfault.com/img/bVHJfZ?w...

hsluoyz 2019-08-30 14:07 评论0 收藏0