笔记23 2021-09-04

C1任务-23：盒子模型

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

任务目标

理解什么是盒子模型
掌握盒子模型组成部分
掌握标准盒模型与怪异盒模型的区别

任务训练
1.什么是盒子模型
当对一个页面进行布局（layout）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。

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

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

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

border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外