CSS学习篇核心之——盒子模型
概述
关于CSS的一些基础知识我们在前面文章中已经有所了解，这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。
盒子模型
元素框的最内部分是实际的内容（element），直接包围内容的是内边距（padding），内边距呈现了元素的背景，内边距的边缘是边框（border），外边距（margin)默认是透明的，因此不会遮挡其后的任何元素，对于这个图边框外的部分就是margin，边框内内容外地部分就是padding。
在CSS中我们一般习惯性的将外边距和内边距设置为0，即
* {
margin: 0;
padding: 0;
}
element元素
在CSS中，width和height是element区域的宽度和高度，对padding、border、margin增加尺寸不会影响element的宽度和高度，只会增加整个框的尺寸。
下面我们看个例子：假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
这样的话对于element、padding、border、margin的尺寸就更加的一目了然了，这里需要注意下的是，padding、border、margin即可以应用于一个元素的所有边，也可以应用于单独的边，还有一点就是，margin可以是负值。
内边距（Padding）
元素的内边距是再边框和内容区之间，padding属性设置用长度值或者百分比值，但不允许用负值。关于用百分比的话，有一点需要注意是，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
对于padding的设置，可以设置它的上下左右这四个边距。
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
h1 {padding: 10px0.25em 2ex 20%;}
上述这两种方法实现的效果是一致地，如果我们的四个边距是一样的话可以用下面这句话。
h1 {padding: 10px;}
边框（border）
元素的边框（border)是围绕元素内容和内边距的一条或多条线，可以规定元素边框的样式、宽度和颜色，这样可以创建出效果更佳出色的边框。
样式
样式是边框的最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
border可以先设置样式，设置样式的顺序为op-right-bottom-left，设置样式的属性为border-style；
如果想设置单边样式则为：
border-top-style
border-right-style
border-bottom-style
border-left-style
宽度
边框宽度属性设置用border-width设置；
如果想单独设置各边的宽度则用：
border-top-width
border-right-width
border-bottom-width
border-left-width
对于同一个边框宽度我们可是用三种方式来设置如下，效果是一样的。
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
p {border-style:solid; border-width: 15px 5px 15px 5px;}
p {border-style:solid; border-width: 15px 5px;}
颜色
设置边框颜色的原理与设置设置边框宽度的原理是相同的，设置颜色用border-color;
如果设置个边宽度则用：
border-top-color
border-right-color
border-bottom-color
border-left-color
外边距（margin）
margin围绕在元素边框外地空白区域就是margin，设置margin会在元素外创建额外的“空白”，margin属性接收任何长度单位、百分数值甚至负值。
在这里先讲解一个值复制的规则，就是如果缺少左外边距的值，则使用右外边距的值；如果缺少下外边距的值，则使用上外边距的值；如果缺少右外边距的值，则使用上外边距的值。
换句话说，如果为外边距指定了 3个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
如果我们想设置单边外边距属性，可以用下面的属性
margin-top
margin-right
margin-bottom
margin-left
下面这两种方式效果是一致地
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
p {margin: 20px 30px30px 20px;}
总之
在这里我也是简单将盒子模型的基础知识进行了基础的总结，这些知识只有我们经常用，慢慢的轻车熟路了，对于盒子模型的知识的讲解我可能有太不全面的地方，也请大家多多指正。
