【前端笔试总结】href、src和url的区别、如何让一个图片铺满整个div

1、 分析href、src、url的区别

• href：用来建立当前元素和文档之间的链接。常用的有：link、a。并行下载该文档，并且不会停止对当前文档的处理。

<link href="./css/main.css" type="text/css" rel="stylesheet">

• src：src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的组件标签有：img、src、iframe。当浏览器解析到该元素的时候，会暂停浏览器的渲染，直到该资源加载完成。js脚本也是会用src。所以尽量将引入的js脚本放到页面的底部。

<style>
background:url(../img/pic01.jpg)no-repeat;
</style>
<script src ="script.js"></script>

• URL：是资源定位规则，而src、href是标签的属性，而且scr可以利用url进行页面请求。

  注意：href用于在当前文档和引用资源之间确立关系，
  scr引用的路径使用img、video、audio等要加载的路径，
  即，href引用的路径是要跳转的地方，scr引用的是页面所使用的图片视频等资源。
  

2、background-size的属性

值	描述
length	设置背景图像的高度和宽度; 第一个值设置宽度，第二个值设置高度;如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度；第一个值设置宽度，第二个值设置高度；如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。图片比例不会改变
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。图片的比例不会改变

这里涉及到一个笔试的问题：有一张宽度为500px，高度为281px的图片，如果把下列选项的属性添加给div盒子，其中无法让该图片完全铺满整个div区域的是

<style>
	div{
		 width: 600px;
        height: 281px;
        background: url(../哈哈.jpg) no-repeat;
	}
</style>
<div> </div>

可以看出图片并没有沾满整个div盒子。

1、如果将background-size:100%，会怎样？

可以看出宽度没有任何的改变，只是高度上在原图是上裁剪了一部分，这是因为第一个100%是宽度。
第二个参数隐藏了，是auto，按照宽度等比例放大高度，而多出的一部分则无法显示。但是两个100%，则会改变图片的比例

2、如果将background-size:auto，会怎样？

跟原图一样，但是盒子的宽度并没有满足，因此可以看出这个属性，是按照图片的原始宽高进行展示。图片比例没有变化

3、如果将background-size:contain，会怎样？

可以看出高度满足了，但是右侧有空白，并没有占满整个盒子。

4、如果将background-size:cover，会怎样？

可以看出图片站满足整个盒子，但是底部的一部分并没有显示

总结：

• background-size：100%;总是X轴100%铺满整个容器，Y轴可能被裁剪会出现空白填不满部分，图片不变形。
• background-size：cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。
• background-size：contain;图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。

总结这块参考的是：
https://blog.csdn.net/caicai1171523597/article/details/105876002