前端杂记 5 （box-sizing，background-size :contain/cover）

一、box-sizing

最近整理网页布局的时候，用到这个属性，在此做个记录。

首先我们知道CSS的盒子模型（W3C标准）

指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度

例如我们设置一个元素的宽度是200px

  border: 5px solid black;
  padding:20px;
  width:200px;

实际上展示的元素宽度是
5+20+200+20+5=250px（不包括margin）


这就会容易导致一个问题：得到一个比预期还要大的容器，容易破坏网页布局。

解决方案：我们定义一个容器的 box-sizing 属性为 border-box

  border: 5px solid black;
  padding:20px;
  width:200px;

  box-sizing:border-box;

会进行内容区域content进行压缩，使之得到一个宽度确切为200px的容器

对比图
对比没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)
普通div就是content-box

二、图片背景（background-size: cover和contain）

用background-image 属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

再做以下调整

  background-repeat: no-repeat;
  background-position: center center;

接下来我们要考虑一个比较感兴趣的background-size属性
例如说，我想要填充这个div有什么做法？

  background-size: cover;

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
意思就是说，就图片等比例放大，直到能够完全覆盖元素大小，但是不管是否图像能不能显示完整

  background-size: contain;

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
意思和cover相反，等比放大直到某一边与元素接壤，不一定会完全覆盖元素

但是我们毕竟需要100%的背景填充，不考虑是不是需要所谓的等比，可以这么调整

  background-size: 100% 100%;