深度了解盒子模型的原理以及结构

为了使我们充分理解div+css模型的定位功能，就是利用盒子模型这样的布局方式代替了传统的表格布局方式。盒子模型是在学习div+css布局方式中必须要学会的一个模型，通过这个模型你就可以明白网页中div和div之间的相对位置是如何布局的。今天我们就来学习一下盒子模型！

一、盒子模型的定义是什么呢？

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）。转换到我们日常生活中，可以拿红酒来对比，红酒=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个红酒之间的距离。

通常我们设置的宽和高是指“红酒”content的宽度，一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。

代码示例：

< head lang="en">

​ < title>认识盒子< /title>

​ < style>

​ div{

​ border:2px soild red;

​ height:50px;