前言
在这几篇文章中，我们主要来聊一聊如何在页面中添加一些常见的css3样式，以便让页面效果更加的丰富，从而用户体验更好。顺便说一句，这些文章将会是一个系列的文件，这些文章将会带你走向前端之路~~
主要内容
这个案例中的css3样式内容，主要涉及到：盒模型，边框圆角，文本阴影和边框阴影 ，背景样式，伪元素，字体图标的使用等方面，我们会延续上一篇文章的完成效果，在这个完成效果的基础上根据需要添加我们想要的css3样式。对于每个涉及到的css3样式，我们主要会从三个方面来进行描述：它是什么，它如何使用，它的使用场景，让我们能够掌握它的使用，并能够在以后的开发过程中使用到正确的样式。
这篇文章我们先来详细学习盒模型的使用
之前完成的效果
首先我们来说下之前样式中的一个问题
1.我们将主体内容左侧的宽度设置为：width: 845px;
2.然后我们计划每一个放置4个li元素，所以计算每一个li元素的宽度，并为其设置了一个你认为相对合理的值：width: 185px;
3.在设置li元素宽度的时候，我们已经考虑了如何为其设置边距，通过margin样式设置每个li元素左右的边距
这样做看上去没有什么问题，但是假如现在有一个需求：我们希望每个li元素能够展示得更大一些，这个看似简单的需求如何实现呢？一般情况下我们会修改li元素的大小，但是这样会直接造成页面的混乱，因为845的宽度已经无法放置完增加了宽度的4个li元素了，那么这个时候我们就会被迫修改li元素的margin-right值，以满足我们的需要。
我们可以看到，这个简单的需求，操作起来并不简单，它可以分为这么几步：
1.修改li元素的宽度
2.重新计算合适的margin-right值
这样很明显，如果后期还有类似的更改，那源代码就需要不停的计算和设置，太不方便了。有没有更简单的实现方式呢？下面我们就来介绍一种实现方式，这种实现方式里面使用到了盒模型
首先，我们不再为li设置具体的宽度了，而是按需要设置width为25%（~~211px）,效果如下：
接下来我们需要让他们产生li元素之间的边距，这个时候当前不能再使用之前的margin-right来实现了，我们可以换一种思路，为li元素添加内间距padding
.grame .grame_content li { float: left; width: 25%; /* 为li元素添加内间距：上下为0，左右分别为10px */ padding: 0 10px; margin-bottom: 26px;}仅仅是这样的设置会造成一个问题：这一行不能再放置四个li元素了：
我们来仔细的分析一下原因，我们打开element面板，观察li元素的样式，发现，li元素实际占据的宽度已经不再是父容器宽度的1/4了，而是在原先宽度的基础上再增加了20，这20就是padding值的设置。这就是元素的默认的占据空间的计算方式-传统模式。我们一直在写的元素的盒子模型，默认就是传统模式（ box-sizing: content-box;）
什么是传统模式呢？以宽度为例，传统模式 宽度计算人公式为：盒子的宽度 = css中设置的width + border + padding，这就是为什么我们设置了padding之后，li元素的宽度变大的原因。怎么做到设置了padding这样的样式后不会改变元素所占据的空间大小呢？这里就需要使用一以盒模型中的另外一个模式了：内减模式（box-sizing: border-box;）。
什么是内减模式呢？以宽度为例，元素所的占据的宽度 = css中设置的宽度width ，后期设置了padding或border所占据的宽度已经包含在这个width中了。换言之，设置padding或border并不会改变这个元素实际占据的空间大小。
这里的box-sizing:border-box就是盒模型中的内减模式了。设置了这个样式之后，再为元素添加border或者padding样式，不会增加元素所占据的实际空间大小，而是已经包含在元素的width中，意味着元素实际的内容空间需要从原始的Width/height中减去padding或border的大小，也就意味着border-box可能会造成内容占据空间减小。
至此，我们就已经清楚的看到了盒模型的基本使用方式了。盒子模型分为两种：1 传统模式 2 内减模式 。两者的区别主要是计算元素的宽度或者高度的方式不一样。我们可以通过 box-sizing 属性来控制
传统模式：我们一直在写的元素的盒子模型，默认就是传统模式 ： box-sizing: content-box，
以宽度为例：盒子的宽度 = css中设置的width + border + padding
内减模式：盒子的宽度 = css中设置的宽度width
元素真实的宽度就是css中设置的宽度
当css中的width定好了之后，动态的改变 border 或者 padding，只有内容的宽度减小
盒模型常用在样式的初始化中，避免一个像素之差导致的布局换行
预告：在下篇文章中，我们将会详细的介绍边框圆角和阴影的添加
