第十一节：微调
相信大家都想得到一个满意的照片墙，而我们上节做的距离满意显然还有一定的差距。
细节差距主要体现在：
- 第四组盒子的照片下方有个小白边
- 第一组盒子大小不一致
- 第二排盒子的高度不一致
- margin设置的不合理
- border设置的不合理
- 父盒子没有进行设置
我们按下面的顺序解决上述问题：
去白边
由于在照片截取时，我们不小心多截取了2象素的高度，所以白边就有了。在这，我们对其盒子的高度进行设定，使其盒子的高度比照片的高度小2个像素.
.paddingStyle4 {
height: 107px;
} <!-- 2.2 -->
<div class="left photoBorder paddingStyle4 img"><img src="8.png" /></div>效果：
统一大小
在图片的截取中，我们并没有提供尺寸完全一致的照片，这导致了，在相同设置的前提下，同组照片的大小不一。
问题是由于照片大小不一样(不仅高度不一样，其实宽度也不一样)。
解决方法：强制规定照片的大小，即宽与高的值。
.paddingStyle1 {
padding:8px 12px;
height: 78px;
width: 50px;
}效果：
注意：当我们对盒子的宽与高进行设置时，实际只是设置的盒子中照片的大小。并不包含padding、margin及border:
统一高度
第二行中的照片高度明显不一致，而第四组照片由于没有办法增加padding值，所以，我们重新设置第一组照片的上下padding。
.paddingStyle1 {
padding:14px 12px;
height: 78px;
width: 50px;
}效果：
对齐竖缝
调整好第二行后，我们以第二行为基准，来调整其它元素。比如这两个竖缝的对齐问题：
解决方案：增加第一组盒子的左右padding
.paddingStyle1 {
padding:14px 20px;
height: 78px;
width: 50px;
}效果：
统一行距
解决方案：减小1.1.2的上margin，或增加1.2.2的上margin。在这，我们采用后者，即增加1.2.2的上margin。
<!-- 1.2.2 -->
<div class="photoBorder paddingStyle1 img" style="margin-top:10px"><img src="5.png" /></div>效果：
对齐大盒子
我们通过调整内边距的方法，对齐最后的两个大盒子:
.paddingStyle2 {
padding:27px 20px;
}
.paddingStyle3 {
padding:32px 42px;
}效果：
增加渐变背景色
为盒子增加一个属性值:
<!-- 画一个大框 -->
<div class="main">增加一个main样式：
.main {
}main样式当然需要及其它样式一样，增加到
<style type="text/css">与</style>标签之间了.
为这个样式设置样式值：
.main {
background: -webkit-linear-gradient(left top, #F6F6F6 , #9F4C21); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #F6F6F6, #9F4C21); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #F6F6F6, #9F4C21); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #F6F6F6 , #9F4C21); /* 标准的语法 */
}效果：
参考：菜鸟教程
照片墙居中
下面，我们为这个照片墙设置一个大小，并使得这个照片墙在页面中左右居中显示。
在css中，使盒子左右居中常使用设置左右margin为auto的方法。
.main {
background: -webkit-linear-gradient(left top, #F6F6F6 , #9F4C21); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #F6F6F6, #9F4C21); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #F6F6F6, #9F4C21); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #F6F6F6 , #9F4C21); /* 标准的语法 */
width: 606px;
height: 410px;
margin: 0 auto;
}效果：
设置大框的padding
为最大的框设置padding，以使其与原图更加匹配
.main {
background: -webkit-linear-gradient(left top, #F6F6F6 , #9F4C21); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #F6F6F6, #9F4C21); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #F6F6F6, #9F4C21); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #F6F6F6 , #9F4C21); /* 标准的语法 */
width: 606px;
height: 410px;
margin: 0 auto;
padding: 15px 20px;
}效果：
增加阴影
阴影能够极大的增加盒子的立体感。我们为每张照片都增加上阴影效果，照片墙就真的变成照片墙了。
.img {
margin: 5px;
box-shadow: 4px 4px 10px
}效果：
具体这个属性的3个数值都是起什么作用，自己查一下吧。
参考: http://www.runoob.com/cssref/css3-pr-box-shadow.html http://www.w3school.com.cn/cssref/pr_box-shadow.asp
总结：
通过十一节的努力，我们最终完成了这个简单的照片墙。涉及的知识并不多：盒子模型的几个属性、浮动流都是非常基础与常见的知识点。但如果我们全程都是自己进行的代码的编写，一些细节的像素值也是自己一点点的尝试出来的话。那么，你会发现想实现到完美的效果也并不简单。计算机科学就是这样，每个知识点并不难，我们只需要认真一点，仔细一点，多练习几遍，最后都能很好的掌握。其实别的学科又何尝不是呢？
有人说：
我觉得人生就是这样，每个人都是通过自己的努力，去决定自己生活的样子。要得到，你就必须要付出；要付出，你还要学会坚持。如果，你真的觉的很难，那你就放弃。但是你放弃了就不要抱怨。因为世界真的是平衡的。
我说：
成功的秘诀很简单：重复、认真、坚持。
简单的事情重复做，重复的事情认真做。今天，你坚持做到了吗？