第十节：抽象
我们在上节中对所有的照片都进行了一遍设置，如果你还没有做到，请返回继续上一节的操作。如果你做到了，那么恭喜你。因为只有经历过疾病才知道健康的重要；经历过饥饿才知道温饱的重要；经历过战乱才知道和平的重要。而我们，刚刚经历了大量重复代码的折磨，才能知道 抽象 的重要。
对每张照片都进行一遍设置，显然的，我们编写了很多重复的代码，这时候就要发挥我们抽象的天份了。什么是抽象呢？简单来说就是找规律。
我的抽象能力比你好，但你找规律找的比我好 — 经典假话。
找border的规律
我们在设置border时，其实大家已经偷偷的找了一遍规律了，我们的发现的规律就是：大家的border都一样！所以，最后，我们新建了一个样式，然后让所有的照片都应用上了这个样式。一下解决了照片没有边框的问题。
找padding的规律
padding的规律大概是这样的：
如图，我们共可以分成四类。 按上面的四类，我们建立四个样式.
<style type="text/css">
/* 这里是样式表中的注释 */
/* 左浮动 */
.left {
float: left;
}
/* 清除浮动影响 */
.clear {
clear: left;
}
/* 为照片设置统一border */
.photoBorder {
border-width: 10px;
border-style: solid;;
border-color: #060504;
}
.paddingStyle1 {
}
.paddingStyle2 {
}
.paddingStyle3 {
}
.paddingStyle4 {
}
</style>然后，依次调整每个样式并应用：
paddingStyle1
此样式，我们在进行第一张照片的padding定制时，已经设计过了，计上面各8px 左右各12px.
.paddingStyle1 {
padding:8px 12px;
}然后，我们应用到对应的盒子上。
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<!-- 以下是CSS代码，放到<style>标签中 -->
<style type="text/css">
/* 这里是样式表中的注释 */
/* 左浮动 */
.left {
float: left;
}
/* 清除浮动影响 */
.clear {
clear: left;
}
/* 为照片设置统一border */
.photoBorder {
border-width: 10px;
border-style: solid;;
border-color: #060504;
}
.paddingStyle1 {
padding:8px 12px;
}
.paddingStyle2 {
}
.paddingStyle3 {
}
.paddingStyle4 {
}
</style>
</head>
<body>
<!-- 画一个大框 -->
<div>
<!-- 行1 -->
<div>
<!-- 1.1 -->
<div class="left">
<!-- 1.1.1 -->
<div>
<!-- 1.1.1.1 -->
<div class="left photoBorder paddingStyle1"><img src="1.png" /></div>
<!-- 1.1.1.2 -->
<div class="left photoBorder paddingStyle1"><img src="2.png" /></div>
<!-- clear -->
<div class="clear"></div>
</div>
<!-- 1.1.2 -->
<div class="photoBorder"><img src="3.png" /></div>
</div>
<!-- 1.2 -->
<div class="left">
<!-- 1.2.1 -->
<div class="photoBorder paddingStyle1"><img src="4.png" /></div>
<!-- 1.2.2 -->
<div class="photoBorder paddingStyle1"><img src="5.png" /></div>
</div>
<!-- 1.3 -->
<div class="left photoBorder"><img src="6.png" /></div>
<!-- clear -->
<div class="clear"></div>
</div>
<!-- 行2 -->
<div>
<!-- 2.1 -->
<div class="left photoBorder paddingStyle1"><img src="7.png" /></div>
<!-- 2.2 -->
<div class="left photoBorder "><img src="8.png" /></div>
<!-- 2.3 -->
<div class="left photoBorder paddingStyle1"><img src="9.png" /></div>
<!-- 2.4 -->
<div class="left photoBorder paddingStyle1"><img src="10.png" /></div>
<!-- clear -->
<div class="clear"></div>
</div>
</div>
</body>
</html>效果：
paddingStyle2
上右下左均20px
.paddingStyle2 {
padding:20px;
}应用到第二组盒子上
<!-- 1.1.2 -->
<div class="photoBorder paddingStyle2"><img src="3.png" /></div>效果：
paddingStyle3
上右下左均20px
.paddingStyle3 {
padding:20px;
}应用到第三组盒子上
<!-- 1.3 -->
<div class="left photoBorder paddingStyle3"><img src="6.png" /></div>效果：
paddingStyle4
上下左右各0px
是的，由于盒子默认的就是0px,所以我们什么也不需要做。
抽象margin
margin抽象的时候，我们用一个小技巧： 我们首先假设，所有的盒子都在一个大盒子中（事实上也是这样的），如下图：
红框外面没有框进来的部分，我们用设置父盒子的padding来解决。此时，当我们给父盒子一些padding后，我们发现，竟然所有相片的margin都一样！ 是的，的确是这样。
我们增加一个img样式, 用来对所有的相框进行设置.
.img {
margin:5px;
}被将img样式应用于所有的照片上：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<!-- 以下是CSS代码，放到<style>标签中 -->
<style type="text/css">
/* 这里是样式表中的注释 */
/* 左浮动 */
.left {
float: left;
}
/* 清除浮动影响 */
.clear {
clear: left;
}
/* 为照片设置统一border */
.photoBorder {
border-width: 10px;
border-style: solid;;
border-color: #060504;
}
.paddingStyle1 {
padding:8px 12px;
}
.paddingStyle2 {
padding:20px;
}
.paddingStyle3 {
padding:20px;
}
.paddingStyle4 {
}
.img {
}
</style>
</head>
<body>
<!-- 画一个大框 -->
<div>
<!-- 行1 -->
<div>
<!-- 1.1 -->
<div class="left">
<!-- 1.1.1 -->
<div>
<!-- 1.1.1.1 -->
<div class="left photoBorder paddingStyle1 img"><img src="1.png" /></div>
<!-- 1.1.1.2 -->
<div class="left photoBorder paddingStyle1 img"><img src="2.png" /></div>
<!-- clear -->
<div class="clear"></div>
</div>
<!-- 1.1.2 -->
<div class="photoBorder paddingStyle2 img"><img src="3.png" /></div>
</div>
<!-- 1.2 -->
<div class="left">
<!-- 1.2.1 -->
<div class="photoBorder paddingStyle1 img"><img src="4.png" /></div>
<!-- 1.2.2 -->
<div class="photoBorder paddingStyle1 img"><img src="5.png" /></div>
</div>
<!-- 1.3 -->
<div class="left photoBorder paddingStyle3 img"><img src="6.png" /></div>
<!-- clear -->
<div class="clear"></div>
</div>
<!-- 行2 -->
<div>
<!-- 2.1 -->
<div class="left photoBorder paddingStyle1 img"><img src="7.png" /></div>
<!-- 2.2 -->
<div class="left photoBorder img"><img src="8.png" /></div>
<!-- 2.3 -->
<div class="left photoBorder paddingStyle1 img"><img src="9.png" /></div>
<!-- 2.4 -->
<div class="left photoBorder paddingStyle1 img"><img src="10.png" /></div>
<!-- clear -->
<div class="clear"></div>
</div>
</div>
</body>
</html>效果：
至此，一个照片墙的模样就出来了。