盒子模型基础

一、任务目标

理解什么是盒子模型

掌握盒子模型组成部分

掌握标准盒模型与怪异盒模型的区别
 

二、任务背景

所有的HTML元素都可以看做是一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。

三、任务内容

1、什么是盒子模型

当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。

2、盒子模型的组成部分

盒模型由里到外包括四个部分：内容部分，padding（内边距），border（边框），margin（外边距）

内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置

• padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小

• border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色

• margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小

3、标准盒模型与怪异盒模型的区别

3.1标准盒模型

在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小

标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小

• 例：将div设置为标准盒模型box-sizing：content-box，CSS设置如下

检查元素如下图所示，div设置的width和height是200×100，div的实际大小是236×136，div的实际宽度 = width + padding-left + padding-right + border-left + border-right = 200 + 15 + 15 + 3 + 3 = 236，div的实际高度计算同理

 

 

3.2怪异盒模型

 

在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding

怪异盒模型的实际大小 = 盒模型设置的width、height（包含border和 padding）

在怪异盒模型中，内容部分的实际宽高是盒模型的宽高减去padding和border

例：将div设置为怪异盒模型box-sizing：border-box，CSS设置如下

 

检查元素如下图所示，div设置的width和height设置为200×100，实际大小也是200×100，div的实际宽度 = width，div的实际高度 = height

 

 

不管是标准盒模型还是怪异盒模型，margin都不计入盒子的实际大小。但是margin会影响盒模型所占空间，即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将margin计入其中。

浏览器默认使用标准盒模型，如需使用怪异盒模型，可用通过将盒模型设置为box-sizing: border-box实现