关于浮动和边距的一个综合案例

那么，浮动和边距我们在上一篇文章中已经做出了一个详细的讲解。但是纯粹的理论知识点讲解可能对于新手来讲不是特别的容易理解。这里我就给大家写一个综合例子，来加深同学们对浮动和边距的理解。

首先，我们建立一个DIV盒子，盒子里有4个小div盒子：

给他们设立样式：

效果如下：

下面没有完全显示，但是展示的内容大家应该能想象出来，因为div是一个块级元素，在不加任何浮动的情况下，块级元素有独占一行的特性。
接下来，我们给这4个小div加上浮动。让他们平均的分配在黑色的div中：

效果如下：

我们可以看到，加了浮动以后，4个小div已经脱离了html的文档流。浮动到了黑色div的上方。这里有一个知识点，没加浮动之前，块级元素是独占一行的，等于说display:block。但是在加了浮动以后，display就变成了inline-block。也就是说并不是独占一行的。浮动会破坏当前的文档流。也会破坏元素的内部结构，这句话我在上文中给大家提到过。
那么如何证明这4个小div是浮动到黑色div的上方了呢？我们可以加入外间距margin来验证一下：

这边的margin:10px 采用了简写的格式。意思是上下左右都对外边距有10px的距离。效果如下：

这个时候，我们会发现，我们的确验证了黑色div在浮动div下方的理论。但是，我们同时也发现了。红色div被挤到了下方，这是为什么呢？
原因就是：我们黑色div的宽度为960px,4个小div，我设的内部宽度为25%，也就是说240px,注意，这里的25%是一种响应式的写法。这在工作项目中非常的常用，能够很好的兼容大小屏幕的浏览器。比如手机，ipad，PC登各种不同屏幕分别率的显示器。回归到正题，这里的一个div的宽度是25%，那么4个div的宽度加起来就是100%，已经完美的充满了黑色div的整个宽度，这个时候，我们突然加入了10px的边距距离，所以，原本的黑色div已经撑不下当前的元素内容，自然就溢出了多余的内容，这个时候，我们就要对小div的宽度做一些改变：

效果如下图：

有些人会问，为什么是23%而不是24%？ 我们不是设了1%的边距吗？注意！这里的1%指的是左边和右边都是1%的距离，有2个边，所以加起来是2%，而这个2%要从之前的25%当中减去，所以就只剩23%了。接下来，我们解决了横向距离，我们还需要解决一下纵向距离。那么，按照上面的经验，我们是不是可以把高度设成98%呢？我们来试一试：

效果如下图：

我们会发现，高度竟然溢出了黑色的div，刚才说了，上下左右都是1%的距离，那为什么左右减去2%可以成立，上下会溢出呢？
这里有一个盲点：大家要注意，这个1%是多少！我们用浏览器的F12工具来看一下：

选中一个小div，我们发现，右边的肉色框呢，上下左右都是9.6px，也就是宽度的1%，但是注意了！我们的高度只有300px，而9.6px对于300px来说并不是1%的距离。已经接近了3%。所以，这里我们需要减去6%的距离，高度为94%，我们再来看一下：

效果如下图：

我们会发现，4个小div已经很完美的融入了黑色div中。这是一种布局的思维，那么布完局，接下来我们要做的就是往小div里加入内容，我们来加入一些文字，效果如下图：

之前我提到过，div盒子溢出有一种解决办法：overflow:hidden;我们加上这个样式：

大家会发现，文字和边框之间挨的太紧了，我们需要加入内边距：padding：

效果如下图：

那么，这样的情况上文中已经介绍过了，这里就不多做详细解释了。我们只需知道，这边的padding:1%,这个1%仍然是9.6px。所以，我们还需要从width中减去2%，从height中减去6%：

效果如下图：

这样调试下来以后，这个就已经非常的好看了。
那么接下来，我要跟大家讲一下关于图片的插入，首先，还是这4个盒子。我这次不往里面放文字，我放的是图片，我再定义一组div：

然后，往div中插入图片：

效果如下图：

我们会发现，图片过大，导致了图片的溢出，但是我们之前加了overflow:hidden的样式，所以，溢出的部分被隐藏掉了，我们要对图片的大小进行调整:

注意，这里的width和height的100%针对的是他的父级div。效果如下图：

我们会发现，图一有一些失真。因为图一的高度并没有那么高，我们把该图给强行拉伸了。那么如果解决这个失真的问题呢？
第一：等比例缩放，之前的文章中我们有介绍过如何看一个图片的大小。比如这张图片是1920*720的，如果我们要把宽度设为960，那么高度都一定要是360。这叫做等比例缩放。
第二：只设定width:100%：

效果如下图：

我们会发现，只设定widht:100%的话，高度是随着宽度走的。也就是第一种我们说的等比例方案。这样就很好的解决了图片失真的问题。
但是，这边还有一个问题可能大家没有察觉，比如，我把图3换成一个很小的图标，大家来看一下会是什么效果：

我截了一个非常小的google的浏览器图标。放入了width:100%的img里。但是，大家会发现，这个图标被变大了，撑到了这个div盒子的100%宽度，同样造成了失真的问题，那么对于这种宽度小于div盒子的图片，我们要怎么处理呢？这个时候，我们需要用到max-width：

把之前的width:100%换成max-width:100%，我们再来看一下效果：

我们发现，这个图标的大小变成了原图的大小，解决了失真的问题。
我们来总结一下：当容器里面的图片加上了max-width:100%，他首先会判断你图片的尺寸是否超过了外层元素的宽度，如果超过那么就用外层元素的宽度和高度进行等比例缩放，如果这个图片的宽度没有超过外层元素的宽度，就用图片自身的大小进行展示。