面试问题总结1.0

两边固定中间自适应布局

1. 双飞翼布局和圣杯布局
   圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。
   解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并
   配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内
   容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽
   度，只不过中间栏的内容通过margin的值显示在中间。
   双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
2. 两边固定中间自适应布局
   1. flex布局
      思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局
   2. 利用浮动（float）
      让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入
   3. 利用绝对定位（position）
      center居中并利用margin为左右两边留出位置，左右绝对定位

css 常用单位

1. px
   px 是图像显示的基本单元，是 viewport 像素。同样都是 1px，在不同设备上的显示有可能是不一样的。
   相对：相对于devicePixelRatio，px实际显示的大小是不确定的。
   绝对：相比于em，px的大小和元素的其他属性无关。
   一般来说px是绝对单位
2. rem
   rem 是相对于根元素 的 font-size 来计算的
   document.documentElement.style.fontSize =
   (document.documentElement.offsetWidth / 750) * 100 + ‘px’ ;
3. em
   em 是相对于父元素的 font-size 来计算的。
4. vw，vh，vmin，vmax
   （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。是由视窗（Viewport）大小来决定的。
   1vw是视口宽度的百分之一。
   1vh是视口高度的百分之一。
   vmin：当前 vw 和 vh 中较小的一个值
   vmax：当前 vw 和 vh 中较大的一个值
5. 百分号 %
   % 是相对于父元素的尺寸来计算的。

选择器

1.选择器优先级
内连样式1000>id 选择器 优先级 100>类选择器 优先级 10>元素选择器 优先级 1>通配选择器 优先级 0
如果是两种相同优先级 为同一个元素 同一个属性设置 的话，是哪个写在代码靠后 最终就按那个的样式
2.css选择器
类选择器 ， 元素，ID，属性，后代，子元素，兄弟
!import(最重要的)
（*全局选择器）

懒加载原理

1. 利用图片的标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，浏览器就不会发送请求，在图片进入可视区域再给src赋值，图片就会加载，实现图片懒加载

2. 预加载和懒加载
   一般预加载就是利用ajax将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。提高用户体验
   两者本质区别是一个是，缓慢加载或者不加载，另一个是提前加载所有，懒加载会减缓服务器压力，预加载则会加重服务器压力