初步理解CSS盒子模型

本人是一名后端程序员，本来是做Java的，由于实习公司用的是C#，不得不重头开始学，由于在之前的很多面试笔试中有关于盒子模型的问题，加上现在程序员的发展都在往全栈走，所以还是打算学习一下前端，话不多说，开始进入正题。

盒子模型，空说意义不大，必须上图才能更加深刻的体会它的含义。

如图，我们简单的称盒子模型为“三矩形，四要素” 三矩形就是它由三个矩形嵌套而成，四个要素就是它的4个属性。我们由内到外介绍他们。

content：这里是陈放内容的地方，它位于最中间的位子，它还有height和weight两个决定content大小的关键属性。

padding：内边距，由于它所在矩形在中间，所以它和content中间的部分叫做内边距。

border：边框，可以理解为隔开中间矩形和外面矩形的一堵墙。

margin：外边距，边框外到第三个矩形边界的所有位置。

注意，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的（加粗！！）

基本情况我已经介绍完了，那么这个盒子模型到底用来干嘛呢？且听我慢慢道来。

我们来看两张图片

我们对可以用F12进行页面调试的浏览器（谷歌、火狐等）进行调试，可以发现几乎处处都有盒子模型的存在，比如在第三张图片中，我们看到的盒子模型中的content属性，就是整个HTML页面。所以，一个全局的HTML页面，就 是一个盒子模型的例子。（先写到这里，以后有更多的感悟了再更新。）