牛腩 之盒子模型

之前看牛腩的时候对于盒子模型一直不是很理解，今天我彻底解决了一下这个问题。关于盒子模型其实就是把我们的网页看做一个盒子，用盒子的方式来对网页进行布局，对于网页的设计理解起来要形象很多！

一 定义：

盒子模型：日常生活中所见的盒子就是能装东西的一种箱子，具有内容（content），填充(padding)，边框（border），边界（margin）属性。

二 理解：




盒子模型：像盒子一样，里面需要装东西就是要有content，东西和盒子之间又有一定的距离就是要有padding，盒子需要有大小厚度就是要有border，盒子需要和其他物品区分开就是需要有margin。这就是盒子，我们把网页看成盒子来设计，盒子里面还可以套小盒子。盒子模型解决的是如何决定某一个元素的最终尺寸和在网页上定位的问题，主要适用于块级元素。

三 盒子尺寸的计算：

块级元素只能是矩形形状的，当我们需要计算一个块级元素的整体尺寸时，需要同时把内容区域的长宽，连同元素的外边距，内边距以及边框都计算在内。

我们可以通过声明宽和高来定义一个元素的内容的宽度和高度。如果没有做任何的声明，宽度和高度的默认值是自动的。对于浮动和绝对定位元素来说，自动状态的宽度会使generated box收缩到紧贴它内容大小。

我们将一个块级元素于页面上，不设置定位属性，或设置position:relative时，块的宽度延伸，自动填满它的父级元素的宽度区域：




设置了绝对定位或浮动宽度：






四 总结：

做网页设计，外观很重要，要简洁、清晰、明了，这就少不了我们的盒子模型。盒 子模型主要是对网页的排版进行设计的，学好盒子模型对于网页前台设计很有帮助！盒子模型最主要的属性就是content，padding，border，margin，很常用，但是需要我们细心才能用好这几个属性！