一天一个面试题

1.document.ready跟window.load区别？

	1.概念
		ready：表示文档解构已经加载完成，不包括图片、文件等其他信息。
		load:  是onload, 指的是页面里面文档，图片，文件都已全部加载完成。
		一般情况，一个页面响应的顺序是：域名解析→加载html→加载js、css→加载图片、文件等其他信息。
		所以document.ready触发的位置是在加载js、css完成跟还未加载图片文件其他信息之间的步骤，而document.load是在页面全部加载完图片文件所有信息之后触发的。

	2. 生否会覆盖
		window.load方法如果编写多个，后面会覆盖前面的，只会订阅一次
		document.ready编写多个后，浏览器会根据出现的顺序依次去执行
	
	3. 代码使用
		$(document).ready(function() {
		 //  console.log("ready加载已完成")
		})
		window.onload = function() {
		 //  console.log("onload 加载已完成")
		}
		
	4. load可以对图片进行操作，当图片加载完成之后执行，用法如下：
		document.getElementById("imgId").onload = function() {
		 //  console.log("图片加载已完成")
		}

2. flex定宽原理（flex:1）

	1.使用方法
		一般左边固定宽度，右边自适应宽度用flex：1实现。代码逻辑就是给父元素设置display:flex，使内部子元素一行显示，然后给需要自适应宽度的子元素添加flex:1样式
	2.原理
		子元素设置flex:1样式后，它的宽度（width） =  （父元素的宽度 - 同级别dom未设置flex:1的dom元素宽度之和 ） /  同级别设置flex:1样式的dom元素个数

3. 媒体查询

	1.介绍
		媒体查询是css3提供的新特性，用户可以根据不同分辨率来实现不同的样式效果，所以媒体查询主要是做响应式布局的。
		响应式布局是什么呢？简单来说，就是在不同的屏幕上显示不一样的效果，比如在超大屏幕上面，避免空间浪费我们可以多放一些东西，在屏幕比较小的时候，我们可以隐藏一些东西，因为屏幕太小了，信息展示多了反而显得过于臃肿。不同屏幕有不同的相应，即为响应式布局
		
	2.观察浏览器页面分辨率方式，如图：
		![开发者工具获取body的尺寸，就是当前分辨率的值](https://img-blog.csdnimg.cn/6f117427de8b462a8a93fe52d180ed45.jpeg#pic_center)
		也可以通过js window.screen对象获取屏幕宽高
	
	3.媒体查询写法
	（ ps:  max-width最大宽度，也就是小于等于的时候,
			min-width最小宽度，也就是大于等于的时候 ）
		1. 当，是屏幕设备，并且，最大宽度不超过480px的时候，让文字的颜色变成绿色,代码如下：
		<style>
	        @media screen and (max-width: 480px) {
	            div {
	                color: green;
	            }
	        }
    	</style>
    	解析@media screen and (max-width: 480px)写法，意思如下：
		@media: 使用媒体查询
		
		screen: 屏幕设备（比如电脑手机什么的），也可以不写，不写的话，默认就是屏幕screen 设备，不写screen 语法如下：
			@media (max-width: 480px) { 相应css语句 } 效果是一样的，只不过省去默认值罢了
		
		and: 且 的意思，and后面一般会跟限定条件，表示在什么条件下才会触发相应的媒体查询的样式。可以写多个and，表示多个条件的意思，举例子如下：
			@media screen and (max-width: 480px) and (min-width: 360px) { 相应css语句 }
		上述案例的意思是：当为屏幕设备的时候，且屏幕宽度大于等于360像素，小于等于480像素的时候，执行相应的css语句

		! 条件的话用括号来包裹，括号里写上相应的条件语句，实现对应样式效果的语句
    	
    	2. 三个逻辑运算符 and、 not 、only（使用少，浏览器也有兼容问题，不做说明）
    		1. and已解释如上，意思就是可以添加多个条件。
    		2. ont表示取反的意思，字符加在@media后面，如下图代码：
    		<style>
			    /* 小于等于360px的变成绿色 */
			    /* @media screen and (max-width: 360px) {  */
			
			    /* 加上not取反就是表示 就变成大于等于360px的变成绿色加粗字体了 */
			    @media not screen and (max-width: 360px) { 
			        div {
			            color: green
			        }
			    }
			</style>
			4.补充 （或） 关键字（使用逗号 , 隔开即可）:
				如果我们有这样的一个需求：当屏幕的宽度小于360px或者屏幕的宽度大于480px的时候，才让字体变成绿色样式，此时，我们就需要使用或的语法，代码如下：
				<style>
				    @media 
				        screen and (max-width: 360px) ,  /* 多个或的条件使用逗号隔开就行了 */
				        screen and (min-width: 480px) {
				            div {
				                color: green;
				                font-weight: bolder;
				            }
				        }
				</style>
			ps: 这边使用逗号方式跟上面直接使用and的写法区别在于，上面之恶后面跟and的表示获取的是当处于a尺寸到b尺寸之间的值时触发的样式，而逗号隔开的这种，表示的是，当小于a尺寸大于b尺寸的值，也就是非处于他们之间位置的尺寸而触发的样式