CSS 从零开始（三）盒模型

收藏

本帖最后由 ClarkPan 于 2019-4-19 11:36 编辑

CSS2.1中提出了盒模型的概念，盒模型总结概括了所有元素的基本特征，那么盒模型究竟是一个什么样的概念呢，我们通过下面这张图来了解（图片转载自W3school）

从上图来看，一个完整的盒模型有上面四部分组成，即border(边框)、margin(外边距)、padding(内边距)、element(元素)。简而言之，任何元素都具有上面四个特征。
在计算盒模型的高度宽度时候有两个计算标准分别是：标准盒模型、IE盒模型

标准盒模型：

该模型宽度和高度仅仅是其中element(元素)的宽度与高度，不包括内外边距以及边框的宽度与高度，上面这样图就是标准盒模型的计算方式，其中width、height指的是element的宽度和高度
IE盒模型：

早起的IE浏览器（IE6.0以前）使用的盒模型与其他浏览器有差异，我们称之为IE盒模型
IE盒模型与标准盒模型的不同在于，该模型的宽度与高度是将元素与内边距、边框累加起来的总和才是整个模型占用的宽度和高度。
简而言之就是width = element + padding + border

CSS中也支持手动设置模型类型，即box-sizing属性，content-box为标准盒模型，border-box为IE盒模型
设置之后宽度高度遵循上方的规则。

/* 标准盒模型 */
box-sizing:content-box;
/*IE盒模型*/
box-sizing:border-box;

复制代码

外边距合并：

当两个盒模型相遇时，其中垂直相遇的部分的外边距（margin）将会被合并，形成一个新的外边距，新的外边距的高度等于两个发生合并的外边距的高度中的较大者。下面的图可以做一个很好的说明（图片转载自W3school）。
image.png560379333.png

上图中两个盒模型，上面的有一个20px的margin-bottom，下面的有一个10px的margin-top，当两个模型垂直相遇时，相遇的部分会被合并，形成一个新的外边距，高度为20px。这是可以看到两个element之间的margin是20px，而不是想象中的30px。

当一个元素包含在另一个元素中时，它们的上和/或下外边距也会发生合并。如下图所示（图片转载自W3school）：

image.png442913512.png

		自动登录	找回密码
密码			立即注册

CSS 从零开始（三）盒模型

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄