CSS盒子模型

1.概念

  CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型



　　　　　　　　　　　　　　　　　　Box-Model 1

　　说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

　　内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

2.盒模型作用

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于外边距(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

3.详细解释

  http://m.blog.csdn.net/article/details?id=51227170

前台代码：

nav是标记导航的元素，他可以明确表示主导航链接的区域，ul是无序列表的结构

<nav role="navigation"> <%--导航--%>
<ul class="navli">
<li><a href="/" class="current-page">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

CSS样式：

<pre name="code" class="css"><pre name="code" class="html">/*导航栏样式*/
.navli {
border-top: 5px solid #019443; /*绿色*/
border-bottom: 1px solid #c8c8c8; /*灰色*/
padding: .45em 0 .5em; /*7 0 8*/
}

.navli a {
color: #292929;
display: inline-block;
padding: .5em 1.15em .5em 1.4em;                                                                                                                          font-family: sans-serif;
        font-weight: 700;
        text-transform: uppercase;
}

.navli li {
border-left: 1px solid #c8c8c8;
display: inline-block;
}

.navli li:first-child {
/*对第一个li使用了下边的属性，取消左边框，即改回至默认样式*/
border-left: none;
}

最终效果：

简单讲解：

设置上边框为绿色，5像素的粗线
设置下边框为灰色，1像素的细线
没有左右边框
设置上下内边距的宽度，分别为7像素和8像素（em是相对长度），没有所有内边距，设置内边距是为了让水平线和垂直线分开，如果没有内边距，上下就没有距离了，就太紧凑了（如右下图所示）
外边距是默认的值

a元素(链接)讲解：

display:inline-block是让他们可以水平显示，而且具有块级元素的性质，如果没有这一条，那么就不会有外边距了
下图显示的是内边距的设置，其中em是相对距离，相对的是默认字体的数值，字体默认是16px,所以.5em就是8px,以此类推，四个值的顺序是按照钟表指针的走向，分别是上，右，下，左
font-family:可以理解为字体集合，如果浏览器不支持第一个字体，可以选择第二个，第三个，我这里就设置了一个字体
font-wight：是字体粗细
text-transform:uppercase都是大写字母

li元素讲解：

首先设置列表的左边框，为1像素 实体 灰色线，两个箭头代表横向排版和纵向排版时的左边框
设置列表横向排列，让元素显示为行内元素，同时具有块内元素的特征
去掉第一个LI，也就是HOME的左边框
如果没有display和first-child的设置，那么显示就如同下图中的第二张图





　　　　　　　　　　　　　　　　　　Box-Model 1

　　说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

　　内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。