关于图片格式中的那些“小”事---- 由编辑图片格式时所想到的

:关于图片格式中的那些“小”事---- 由编辑图片格式时所想到的:

前言

我们都知道，当我们想给网页中插入一张图片时，是非常简单的，但当我专门制作一个关于图片的界面时，即当我将大量的图片用相同的大小排列在一个页面中时，在插入图片的同时却要注意很多点，比如各个图片之间的间距，每个图片本身的格式修饰，与此同时，也就联系了对行内元素，块级元素的理解；图片的“四要素”；图片的上下左右间距的产生以及设置等知识点的理解……
我制作的图片界面

这是一个图片界面的简单样式，即将若干张图片插入在一个大“盒子”中，并且每张图片采用统一的格式，每张图片之间的间距都设置了相同的间距（margin）,相同的边框，相同的圆角，并且统一设置了鼠标悬停时的效果……
整个界面虽说简单，但仔细琢磨也会有很多需要注意和了解的知识点，下面我来具体做一个介绍。

关于外层“盒子”的一些设置

在这里我所说的最外层的盒子，也就是这些图片之后的一个“小背景”，我们可以将它看成是一个大盒子，而这个大盒子中的若干的图片可以看成是很多的小盒子，也就是“盒子套盒子”的模式。
那我们需要设置这个盒子的哪些属性呢?
我们知道，在我们不做任何处理时，每一个盒子都有一个默认的margin值，即8px，所以，在我们设置格式之前，应先对所有盒子的格式进行一个重置，重置时，我们需要使用一个通配符来设置，具体代码为：

*{margin:0px;padding: 0px;
}

关于“大盒子”的设置
设置好之后，我们便可以开始给我们的大盒子进行一些设置啦！
首先，我们先一起看一下设置好的代码：

#many{margin: 10px;width:1065px;   overflow: hidden;background-color: mistyrose;margin:10px auto;
}

由上图可知，大盒子的宽度为三张图片宽度的三倍多一点，这个可以根据自己的情况来设置。
因为我们要得到的效果是若干张图片包含在这个背景中，所以这个大盒子的高度应比所有图片的高度之和再高一些。理论上，我们应该计算出所有图片的高度之和再来估计盒子的高度。但当图片数量及其多时，这样设置会很麻烦，且当我们想增加图片或者删除图片时，盒子的高度随之又需要改变。
所以，我们需要引入一个属性：即overflow：hidden，它的作用是超出隐藏，即能将每张图片都包含在盒子中。
设置好大盒子的大小之后，我们需要设置盒子的布局，根据这个界面的，我们需要将盒子设置为居中的状态，而居中的格式，需要通过设置margin的属性来设置。
那么关于margin属性的设置，可以分为什么？我们在设置时可以怎样设置？
设置margin时，我们可以采用单独设置边距和统一设置边距的方式。
1.单独设置

margin-top 上
margin-left 左
margin-bottom 下
margin-right 右
2.统一设置边距
在我们统一设置时，我们可以设置1~4个属性值。但分别设置1,2,3，4个属性值时，对应的意义也是不同的，举例说明如下：
margin: 10px; 上下左右外边距都为10px；
margin：10px 20px；上下为10px 左右为20px
margin：10px 20px 30px；上为10px，左右为20px 下为30px
margin：10px 20px 30px 40px；上右下左（顺时针方向）
了解了关于margin属性值的使用后，我们来设置其居中，这里设置其居中只需要设置两个属性值即可。即 margin:10px auto;先设置一个上下的边距值，左右用auto来设置，auto即自适应，用这一个属性值可以得到居中的效果。
这些属性设置好之后，我们只需给其设置一个我们自己喜欢的颜色即可。

关于“图片”的设置

基本的大盒子设置好之后，我们可以开始设置盒子中的图片的属性。
先来看一下所有代码：

#many img{display:block;float:left;margin:10px;border:2px solid  #cccccc;border-radius:10px;/*vertical-align: middle;*//*vertical-align: top;*/
}

首先，我们要在html文件中插入若干图片，并对它们的图片大小进行统一设置。
当图片初始插入之后，我们可以看到的界面是这样的：

观察红色箭头所标注的地方可以观察到，在插入图片并不对其进行处理时，每一张图片之间都存在上下和左右方向的间距！
那这上下和左右之间的间距是如何形成的？形成的原因是否相同？我们又可以使用什么方法来分别消除这些间距？
关于左右间距
为什么默认每张图片左右都会产生一些间距呢？我们先来一起看一下插入图片的部分代码：

<div id="many"><img src=".idea/12.21/6BA6FD258673E2554EC34592E67DB7CA.png" width="330" height="210"><img src=".idea/12.21/26A77A36F7C388E8F599C14B91530C9C.png"  width="330" height="210"><img src=".idea/12.21/32CC81F401B690F1B9DA538974B887A2.png" width="330" height="210"><img src=".idea/12.21/49B5CA476B0CF1BFF5FF018723893678.png"  width="330" height="210"><img src=".idea/12.21/99FB15090E63FA14EA12680B631B4E76.png"  width="330" height="210"><img src=".idea/12.21/72559A79C835F9B76216F80DC0C216C3.png"  width="330" height="210">……</div>

可以看到，我们每插入一个图片标签之后，便后进行换行来插入下一个图片标签。其实，每张图片之间的左右间距正是因为"换行"所造成的。
由于图片属于行内元素，而行内元素在一行之内显示解析了换行的一个空格，也就有了左右之间的间距。
那么，如何消除这些左右的间距？
根据上面所分析的，要想消除这些间距，只要将每一个图片标签的代码都放在同一行显示即可。但这种方法只适用于少量图片之间的设置，当遇到大量图片时，还需要引入别的方法。
关于图片之间的上下间距

如果直接分析上下间距的原因，可能很难分析出，所以，我们可以在代码中加一些文字来进行观察。
即：

<div id="many"><img src=".idea/12.21/6BA6FD258673E2554EC34592E67DB7CA.png" width="330" height="210"><img src=".idea/12.21/26A77A36F7C388E8F599C14B91530C9C.png"  width="330" height="210"><img src=".idea/12.21/32CC81F401B690F1B9DA538974B887A2.png" width="330" height="210">哈哈哈哈哈<img src=".idea/12.21/49B5CA476B0CF1BFF5FF018723893678.png"  width="330" height="210"><img src=".idea/12.21/99FB15090E63FA14EA12680B631B4E76.png"  width="330" height="210"> ……</div>

插入之后，我们所能得到的界面为：

仔细观察便能知道，这一串文字刚好超出图片一小部分，这便是图片有上下之间的间距的原因。即行内元素拥有默认文本垂直的对齐方式，即默认基线对齐。
所以，我们只要修改一下文本垂直对齐方式就可以消除“间距”。
在设置文本对齐方式时，我们要用到vertical-align，这时我们可以设置其属性为：bottom/top/middle,如果在只有图片没有文字的情况下，这三个看起来是没有区别的，为了区分它们，我们可以加入一些文字来区分它们：

这张图片显示的是vertical-align:top之后的样式，即文字置顶显示，但对于图片来说没有了上下间距，同理，如果设置其属性为bottom，middle分别得到的效果是文字和图片底部在同一“直线”上显示，图片居中显示的效果，对于图片来讲，效果是相同的，即均为无上下间距。如下：

消除上下左右间距的方法
现在，在设置图片和图片之间的间隙之前，我们的目的是同时消除它们的上下左右间距，如果要同时消除上下左右间距，需要进行什么设置呢？
首先，我们知道，块级元素之间默认依次排列并且没有间距（每个块级元素独占一行），而图片是行内元素，这里我们可以先将图片这个行内元素转为块级元素。这样便能消除间距，但要想得到一行显示三个的效果，还需要进行非常关键的一步：让其浮动。
为什么需要设置浮动呢？
我们先来理解一下浮动。
浮动：与父元素的左端对齐，依次的往右端显示，浮动元素漂浮起来了，标签所拥有的默认行为不起作用了。
所以，即使代码中每两个图片标签会有一个换行，也不会解析出“间隙”了。也就消除了间隙。具体代码为：

#many img
{display:block;float:left;
}

消除之后的样式为：

关于图片的圆角设置
（设置图片间隙，边框部分省略）
在设置好图片之间的间隙之后，我们可以对图片进行更加深层的一个美化，比如，我们可以为图片设置一个圆角属性，让我们的网页界面更加美观。
在设置图片圆角时，需要使用 border-radius来设置，关于它属性的个数，也是有多种的。
关于圆角属性设置之后的效果
我们知道，设置大小程度不同的圆角属性，所得到的效果也是不同的。
假设一张图片原本是这样的（假设这张图片是正方形图片）：

如果我进行一个设置border-radius:30%
得到的效果是这样的：

如果我增大它的值，先增大到百分之50： border-radius:50%，得到的效果是这样的：

这时，如果我将它的值改为百分之60,70,80……只要是大于百分十50的属性，得到的效果都是相同的。这是为什么呢？
首先理解圆角，圆角，即将图片的一个或多个角都变成“圆的形式”，而圆的程度就要由对它所设置的属性值来决定。
当我们对一个图片的圆角设置为百分之五十时，便会取其上下边和左右边的一半来画内切的圆弧，而在一张图片里，我们可以画出的最大的圆即为内切圆：

这时我们相当于分别取了上下边和左右边的一半来进行设置，也就是百分之50，当超出百分之50时，虽然设置的值超出了百分之五十，但由于不能在图片内画出比内切圆更大的圆，所以设置出的效果是相同的。
关于圆角属性设置的个数

关于 border-radius 属性的属性个数，可以设置1~8个，

（设置8个属性：）
border-radius:5px 10px 15px 20px/15px 20px 30px 50px;

（斜杠前面的属性全部是对水平边的设置，斜杠后的属性全部是对竖直边的设置，且前后的四个值分别代表上，右，下，左，仍然代表顺时针的方向设置它的值。）如果用1，2，3，4来表示斜杠前面的值，用5,6,7,8来表示斜杠后面的值，可用图表示为：

当我们要使用1~4个属性时
（1） border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;

上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提供了小于四个的数据。这种情况下，数据依然按照“左上角右上角右下角左下角(顺时针方向)”的顺序进行排列，没有涉及到的角方向按照其对角的圆角数据进行设置。
因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为右上角的像素设置，即5px。
根据这样的方法，也就不难理解组（3）中的含义。
组（4）就设置了一个数据，这表示四个方向的角半径均为10px。

代码实现

该页面的html代码为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>好多图片</title><link rel="stylesheet" href="样式.css" type="text/css"></head>
<body bgcolor="lightpink">
<div id="many"><img src=".idea/12.21/6BA6FD258673E2554EC34592E67DB7CA.png" width="330" height="210"><img src=".idea/12.21/26A77A36F7C388E8F599C14B91530C9C.png"  width="330" height="210"><img src=".idea/12.21/32CC81F401B690F1B9DA538974B887A2.png" width="330" height="210"><img src=".idea/12.21/49B5CA476B0CF1BFF5FF018723893678.png"  width="330" height="210"><img src=".idea/12.21/99FB15090E63FA14EA12680B631B4E76.png"  width="330" height="210"><img src=".idea/12.21/72559A79C835F9B76216F80DC0C216C3.png"  width="330" height="210"><img src=".idea/12.21/5103076f8dfeb.jpg"  width="330" height="210"><img src=".idea/12.21/192880585.jpg"  width="330" height="210"><img src=".idea/12.21/20151030184433_Kw8yn.jpeg"  width="330" height="210"><img src=".idea/12.21/1132113361925281_b.jpg"  width="330" height="210"><img src=".idea/12.21/A3EB824FBA7D5E5AB7D3A3FC273F231E.png"  width="330" height="210"><img src=".idea/12.21/BD059142F4561F6998F3BFFF57429A6A.png" width="330" height="210"><img src=".idea/12.21/BSL1544378516690.png"  width="330" height="210"><img src=".idea/12.21/DFA0B80A1845A744F0D01644EA1001EB.png"  width="330" height="210"><img src=".idea/12.21/E2672310DDCF214DCC60F65E5A392D4A.png"  width="330" height="210"><img src=".idea/12.21/gif.gif" width="330" height="210"><img src=".idea/12.21/glossandbloom.jpg"  width="330" height="210"><img src=".idea/12.21/IMG_5026(20181013-064456).jpg"  width="330" height="210"><img src=".idea/12.21/IMG_5081.JPG"  width="330" height="210"><img src=".idea/12.21/IMG_7039.JPG"  width="330" height="210"><img src=".idea/12.21/IMG_7184(20181124-201008).jpg"  width="330" height="210"><img src=".idea/12.21/IMG_8184.JPG"  width="330" height="210"><img src=".idea/12.21/IMG_8358.JPG"  width="330" height="210"><img src=".idea/12.21/IMG_8359.JPG"  width="330" height="210">……
</div></body>
</html>

css代码为：

*{margin:0px;padding: 0px;
}
#many{width:1065px;overflow: hidden;background-color: mistyrose;margin:10px auto;
}
#many img{display:block;float:left;margin:10px;border:2px solid  #cccccc;border-radius:10px;/*vertical-align: middle;*//*vertical-align: top;*/
}
#many img:hover{opacity: 0.5;
}