2022常见前端基础面试题（含答案）五

　　如何实现一个自适应div，宽高比始终为4:3

　　- 如果想实现一个元素的宽高比例固定，那么就需要让他们参照同一个参照物，宽高本身是两个方向的，各自参照自己的父元素，所以不太好实现，那么就需要转换思维了，大家都知道我们的padding margin 如果设置了百分数，他们不论是哪个方向参照的都是父盒子的width，所以我们可以这样来做：

　　- 父盒子{position:relative;width:100%;padding-top:75%;height:0;}

　　子盒子{position:absolute;top:0;bottom:0; left:0;right:0}

　　- 用padding来模拟父元素的高度，子元素设置绝对定位，四个方向都设置为0，就会把宽高拉伸开，那么他的宽高就会一直保持比例为4:3了

　　设置元素显示隐藏的几种方式，与区别?

　　常见隐藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;

　　他们之间的区别是：

　　opacity：0; 是把透明度设置为0，但是这个元素还是真实存在的，只是看不见了而已，他在页面中依然占位，所有的点击事件也都是可以触发的;

　　visibility:hidden; 他在页面中的效果和opacity：0;有一点相似，他也是看不见的，并且在页面中依然占位，但是不同的是它不能够触发点击事件;

　　display：none;和他们就不一样了，它属于是完全删除的状态，相当于不存在于页面当中了，因此它不占位，也不能触发点击事件。

　　transform:scale(0);使用缩放,按照x和y的中心位置进行缩小占位置

　　height:0px;的时候不占页面空间如果元素中有文本的话需要给元素添加oveflow:hidden;font-size:0px

　　实现垂直居中的几种方法，不知道宽高的情况下如何实现元素水平垂直居中?

　　- **实现垂直居中的几种方式**：

　　- 1.单行文本垂直居中：当此标签高度和行高的值相等时;

　　- 2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半;}

　　- 3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}

　　- 4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}

　　- 5.弹性盒：父元素{display:flex;align-items:center;}

　　- **不知道宽高的情况下如何实现元素水平垂直居中**:

　　- 1.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

　　- 2.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

　　- 3.弹性盒： 父元素{display:flex;} 子元素{margin:auto;}

　　- 4.弹性盒： 父元素{display:flex;justify-content:center;align-items:center;}

　　双飞翼布局跟圣杯布局

　　- 圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

　　- 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：

　　- 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

　　- 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性(圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个;

　　- 而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2 =4)，个人感觉比圣杯布局思路更直接和简洁一点。简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“，而不是你题目中说的”去掉relative"就是双飞翼布局“

　　- 注意：实际开发的时候双飞翼圣杯布局实际就是两栏或者是三栏布局,为了提高开发效率可以选择直接使用弹性盒子直接实现也是非常高效的

　　说说移动端Web分辨率

　　· 分辨率有两种，分别是屏幕分辨率和图像分辨率。

　　o 屏幕分辨率：是指一个屏幕上可以显示多少信息，通常以像素为单位来衡量。例如，分辨率1920 ×1080表示水平方向含有1920个像素，垂直方向含有1080个像素，两者相乘可知，屏幕上总共有2 073 600个像素点。在屏幕的大小相同的情况下，如果屏幕的分辨率低(如640 ×480)，则屏幕上显示的像素少，单个像素尺寸比较大，看起来会有种颗粒感;如果屏幕的分辨率高(如1920 ×1080)，则屏幕上显示的像素多，单个像素尺寸比较小，看起来会比较清晰。

　　o 图像分辨率，在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。图片的分辨率越高，图片越清晰;图片的分辨率越低，图片越模糊。例如，一张图片分辨率是500 ×200，这就表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点(色块)，垂直方向有200个像素点(色块)。

　　更多关于html5培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。