开发者学堂课程【零基础学前端 HTML+CSS ：盒子模型概念】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5139
盒子模型概念
内容介绍
一、CSS 盒子模型
二、网页的布局
一、CSS 盒子模型
1、重要性
此概念十分重要，如若不了解透彻则无法理解 DIV+CSS 形式的网页布局。
2、定义
（1）盒子模型：CSS 的基石之一
它指定着元素的显示以及(在某种程度上)如何相互交互页面。早期大多情况下使用的是表格形式以改变布局，但当今表格仅作为表格进行使用，故全部的布局内容被融入到DIV模块之中，盒子模型为 DIV 模型的其中之一。
（2）组成
页面上的每个元素都被浏览器看成一个矩形的盒子,此盒子由元素的内容、填充、边框和边界组成。
在样式表中曾进行过 border 边、填充等的书写，能够体会到其为一个个、一块块的矩形样式网页。
（3）网页的排列方式
网页由许多个盒子通过不同的排列方式(上下排列、并列排列、嵌套排列)堆积而成，即其为数个简单盒子到复杂盒子组合。
二、网页的布局
1、主要内容
主要为 DIV+CSS 布局内的 CSS 的盒子模型概念。
2、原理
于 Dreamweaver 软件中写入 DIV 后，浏览器将认为其为一个矩形，即类似于盒子，改变其大小、位置、嵌套关系后即可呈现出页面的模样。
平时访问的任何网站都是以盒子模型为基础的，例如网站中的选项边框：形成了大盒子包含小盒子的状态。每个盒子内都可添加图片、文字，而小盒子与大盒子同时存在距离的调整，需要操作者单独进行设计。
3、盒子模型示意图
（1）表述
如图的大框为一个盒子，其中有四个画框作为小盒子，每一个画框的小盒子边内（border内）可进行内容（画）的存在。
表格中存在填充间距。
1填充：即内容与边框之间的距离
2距离：即一个单元格与另一个单元格之间的距离。
另外还存在两个未接触到的、与表格十分相似的值。上图的四个边框可理解为四个单元格，以表格形式进行查看，则可将其理解为一个两行两列的表格，padding即填充，margin即间距。
（2）改变盒子模型示意图的模型
1border 2padding 3margin
4、结论
（1）网页组成
网页是由多个小盒子组成的，其中通过设置盒子的大小、位置、边框（填充和间距）以改变每个位置的定位。
（2）表格嵌套与盒子模型概念的区别
初次理解时可将其想象为表格嵌套，但表格嵌套是直接修改其中的属性，更为直观；而当前是使用样式表控制其尺寸，较为间接。
（3）盒子模型
1每个 HTML 元素都可以看作是一个装了东西的盒子。
2盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(margin)
3默认情况下盒子的边框为无，背景色是透明,故在默认情况下无法观察到盒子。
即盒子本身为布局，与表格相同无法被触摸、观察到，但其本身是存在的。需要使用到设置的手法才能将其打开观察到内容。
