CSS盒子模型

概念

在css当中，一个div就相当于一个盒子模型，就相当于盖房子用的一个砖头。网页上的元素就可以看成为一个个的盒子。盒子模型主要涉及到四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）

举例

如图所示是两个盒子（div），表明了四个元素的位置。

 

外边距（margin）

外边距是两个元素之间的距离。

外边距的四种写法如下，一个盒子有四个方向，按照顺时针来说是上、右、下、左。

margin:value(四个方向相同);
margin:value(上下) value(左右);
margin:value(上) value(左右) value(下);
margin：value(上) vlaue(下) value(左) value(右);

如果想让块儿居中显示则使用auto：

margin：10px auto;

注意：外边距是可以合并的，一个盒子的外边距是20px，另外一个盒子的外边距是30px，则这两个盒子之间的距离就是30px，只适用于上下边距。父像素会随着子像素外边距发生变化，子像素上边距为10，如果不设置边框的话，父边距和子边距都会距离上面为10；

不设置边框的效果图：

设置边框的效果图：

边框（border）

边框就是盒子外面的那个框框，如果想为盒子设置边框，则需要下面三个属性：

 border-width：5px;
 border-color：red;
 border-style：solid;

在设置时，不能没有border-style；

一个盒子有四个边框，也可以分别设置四个边框的属性，以右边为例：

 border-right-width:5px; 
 border-right-color:red;
 border-right-style:solid;

内边距（padding）

内边距和外边距用法很相似，内边距是内容到边框的距离，外边距是盒子到盒子之间的距离。需要注意的是：padding、border的宽高要记录在盒子模型的宽高之内，margin不记录在盒子模型的宽高之内。在设置padding的值的时候需要考虑边框的宽度。

以上是简单的总结，欢迎指导。