什么是盒模型

学习前端的第二周。
总结一下本周在逆战班所学知识，温故并希望能知新。谈一谈本周学习到的盒模型。
根据所学网页中所有的元素对象都被放在一个盒子里，我们可以通过CSS来控制这个盒子的显示属性，这就是盒模型。
盒模型的作用在于规定了网页元素如何显示以及元素之间的相互关系。

每个盒子都有：边界（外边距margin）、边框（border）、填充（内边距padding）、内容（content）4个属性，每个属性包括上、右、下、左4个部分，设置时可以分别设置也可以同时设置。

引用一段H5入门书中的一段话：
内容（content）就是盒子里装的东西，而填充（padding）就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震辅料，边框（border）就是盒子本身了，边界（margin）则说明盒子摆放的时候不能全部堆在一起。

在定义内容区域大小时使用width（宽）和height（高）；
在分别设置属性时，我们通过top、right、bottom、left分别设置属性的上、右、下、左4个部分，下面以margin为例：

margin-top:5px；//元素的上外边距为5px
margin-right:5px; //元素的右外边距为5px
margin-bottom:5px; //元素的下外边距为5px
margin-left:5px; //元素的左外边距为5px

而在同时设置4部分的属性时，当设置了4个值时按顺时针分别对应上、右、下、左；3个值则对应上、左右、下；2个值对应上下、左右；一个值则代变4个全部。还是以margin为例：

margin: 10px 20px 30px 40px; //元素上外边距10px，右外边距20px，下外边距30px，左外边距40px
margin: 10px 20px 30px; //元素上外边距10px，左外边距和右外边距20px，下外边距30px
margin: 10px 20px; //元素上下外边距10px，左右外边距20px
margin: 10px; //元素上下左右外边距均为10px

下面说一下padding（内边距）和margin（外边距）这两个属性。
padding的作用是用来控制父元素和子元素之间的位置关系或用来控制元素和内容之间的位置关系。
margin的作用是用来控制同辈之间的位置关系的，如两个同辈的div之间的间距就可以使用margin调整。
在设定padding值时应注意，当我们添加了元素的padding值（内边距）时，元素本身的大小会发生改变，变成元素原有宽高（width、height）值+我们添加的padding（内边距）值的大小，也就是说元素被padding给“撑大”了，而margin不会影响元素的宽高。但是margin会在元素外额外占据区域，这点是我们需要注意的。
CSS盒模型是网页布局的基础，基础正是重中之重，在以后的学习中会反复用到，所以这周的学习必须牢记在心，以便今后在逆战班的学习。
下一周，加油！